حذف و اضافه textbox در زمان اجرا توسط jquery در asp.net
سه شنبه 7 بهمن 1393در این مقاله میخواهیم در asp.net زمانی که برنامه در حال اجرا است و با کلیک روی دکمه بتونیم یک کنترل اضافه یا حذف کنیم که این عمل را توسط jquery انجام خواهیم داد
در صفحه 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); }
حالا برنامه رو اجرا کنید:
- ASP.net
- 2k بازدید
- 3 تشکر