ASP.NET + jQuery – Adding SelectBox & Removing SelectBox on Client Side with Server Side Form Post Handling
\Content\DropDown.css |
.Panel { margin-top:5px; } .RemoveBtn { margin-left:5px; vertical-align:middle; } .SelectBox { line-height:10px; font-size:12px; height:30px; } #body { background-color:#FFFFFF; } |
\Scripts\DropDown.js |
var i = 2; $(document).ready(function () { SelectBoxPanelCtlAdd(1); $("#AddBox").click(function () { SelectBoxPanelCtlAdd(i); i++; }); }); function OptionCtlAdd(value, text) { var optionctl = $('<option />').attr({ value: value }); optionctl.html(text); return optionctl; } function SelectBoxCtlAdd(i) { var selectbox = $('<select />').attr({ id: "SelectBox" + i, name: "SelectBox" + i, class: "SelectBox" }); selectbox.append(OptionCtlAdd("Value 1", "Text 1")); selectbox.append(OptionCtlAdd("Value 2", "Text 2")); selectbox.append(OptionCtlAdd("Value 3", "Text 3")); selectbox.append(OptionCtlAdd("Value 4", "Text 4")); selectbox.append(OptionCtlAdd("Value 5", "Text 5")); selectbox.append(OptionCtlAdd("Value 6", "Text 6")); selectbox.append(OptionCtlAdd("Value 7", "Text 7")); selectbox.append(OptionCtlAdd("Value 8", "Text 8")); return selectbox; } function RemoveSelectBoxBtnCtlAdd(i) { var btn = $('<img>').attr({ id: "RemoveBtn" + i, src: ".\\images\\remove.png", height: "20", class: "RemoveBtn" }); return btn; } function RemoveSelectBoxBtnCtlEvent(i) { $("#RemoveBtn" + i).live("click", function () { if (i > 1) { //alert("#RemoveBtn" + i); $("#RemoveBtn" + i).die(); $("#Panel" + i).remove(); } }); } function SelectBoxPanelCtlInitize(i) { var panel = $('<div>').attr({ id: "Panel" + i, class: "Panel" }); return panel; } function SelectBoxPanelCtlAdd(i) { var panel = SelectBoxPanelCtlInitize(i); var selectbox = SelectBoxCtlAdd(i); var removebtn = RemoveSelectBoxBtnCtlAdd(i); panel.append(selectbox); panel.append(removebtn); $("#SelectBoxPanel").append(panel); RemoveSelectBoxBtnCtlEvent(i); } |
WebForm.aspx |
< script src="Scripts/DropDown.js" type="text/javascript" >< /script > < link href="Content/DropDown.css" rel="stylesheet"/ > < div > < table border="0" cellpadding="0" cellspacing="0" width="100%" > < tr > <td width="100"> < div id="SelectBoxPanel" >< /div > </td> <td align="left" valign="bottom" > <img src=".\images\add.png" id="AddBox" height="20" /> </td> < /tr > < /table > < /div > < div > <input type="submit" value="Submit" /> < /div > <br /> <asp:Literal ID="IsPostBackDebugStatement" runat="server" /> <br /><br /> <asp:Literal ID="PostBackValueDebugStatement" runat="server" /> |
WebForm.aspx.cs |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; protected void Page_Load(object sender, EventArgs e) { if(Page.IsPostBack) { IsPostBackDebugStatement.Text = "Is Post Back."; PostBackValueDebugStatement.Text = "Select Box Value : <br />"; foreach(var item in Request.Form) { if (item.ToString().Contains("SelectBox")) { PostBackValueDebugStatement.Text += item.ToString() + " : " + Request.Form[item.ToString()].ToString() + "<br />"; } } }else{ IsPostBackDebugStatement.Text = "Is Not Post Back."; } } |