حذف و اضافه textbox در زمان اجرا توسط jquery در asp.net

در این مقاله میخواهیم در asp.net زمانی که برنامه در حال اجرا است و با کلیک روی دکمه بتونیم یک کنترل اضافه یا حذف کنیم که این عمل را توسط jquery انجام خواهیم داد

حذف و اضافه textbox  در زمان اجرا توسط   jquery در asp.net

در صفحه aspx خود کد زیر را که شامل دو دکمه و یک div می باشد را وارد کنید:

<form id="form1" runat="server">
<input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here -->
</div>
<br />
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
</form>

حالا نوبت به کد jquery برای حذف و اضافه textbox ها می رسد:


<script type="text/javascript">
function GetDynamicTextBox(value){
    return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
            '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("TextBoxContainer").appendChild(div);
}
 
function RemoveTextBox(div) {
    document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
 
function RecreateDynamicTextboxes() {
    var values = eval('<%=Values%>');
    if (values != null) {
        var html = "";
        for (var i = 0; i < values.length; i++) {
            html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
        }
        document.getElementById("TextBoxContainer").innerHTML = html;
    }
}
window.onload = RecreateDynamicTextboxes;
</script>

زمانی که روی دکمه post  کلیک میکنیم اطلاعات از textbox هایی که به صورت داینامیک ایجاد شده اند جمع آوری میشودسپس اطلاعات سریالایز میشود به رشته ای  از نوع json .در صفحه aspx.cs کد زیر را وارد کنید:


protected string Values;
protected void Post(object sender, EventArgs e)
{
    string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    this.Values = serializer.Serialize(textboxValues);
    string message = "";
    foreach (string textboxValue in textboxValues)
    {
        message += textboxValue + "\\n";
    }
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}

حالا برنامه رو اجرا کنید:

 

فایل های ضمیمه