ASP.NET + jQuery – Adding SelectBox & Removing SelectBox on Client Side with Selected Item from ASHX JSON Restful & 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; margin-right:5px; width:150px !important; } #body { background-color:#FFFFFF; } .submitbtn{ margin-top:3px; } |
\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("1", "Text 1")); selectbox.append(OptionCtlAdd("2", "Text 2")); selectbox.append(OptionCtlAdd("3", "Text 3")); selectbox.append(OptionCtlAdd("4", "Text 4")); selectbox.append(OptionCtlAdd("5", "Text 5")); selectbox.append(OptionCtlAdd("6", "Text 6")); selectbox.append(OptionCtlAdd("7", "Text 7")); selectbox.append(OptionCtlAdd("8", "Text 8")); RoleSelectBoxCtlItemAdd(i); return selectbox; } function RoleSelectBoxCtlAdd(i) { var selectbox = $('<select />').attr({ id: "RoleSelectBox" + i, name: "RoleSelectBox" + i, class: "SelectBox" }); return selectbox; } function RoleSelectBoxCtlItemAdd(i) { $("#SelectBox" + i).live("change", function () { $.ajax({ url: "role.ashx", data: "id=" + $("#SelectBox" + i).val(), success: function (data) { console.log(data); roleselectbox = $("#RoleSelectBox" + i); roleselectbox.html(""); roleselectbox.append(OptionCtlAdd("", "")); for (var key in data) { console.log(key); if (data.hasOwnProperty(key)) { for (var keyx in data[key]) { console.log(keyx); roleselectbox.append(OptionCtlAdd(keyx, data[key][keyx])); } } } } }); }); } 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(); $("#SelectBox" + i).die(); $("#RoleSelectBox" + 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 roleselectbox = RoleSelectBoxCtlAdd(i); var removebtn = RemoveSelectBoxBtnCtlAdd(i); panel.append(selectbox); panel.append(roleselectbox); panel.append(removebtn); $("#SelectBoxPanel").append(panel); RemoveSelectBoxBtnCtlEvent(i); } |
DropDown.ashx.cs |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Newtonsoft.Json.Serialization; namespace SampleDemo { public class DropDown : IHttpHandler { public void ProcessRequest(HttpContext context) { if (context.Request.Params["id"] != null) { string id = context.Request.Params["id"].ToString(); context.Response.ContentType = "application/json"; JArray ary = new JArray(); ary.Add(new JObject(new JProperty(id + "1", "Item " + id + " 1"))); ary.Add(new JObject(new JProperty(id + "2", "Item " + id + " 2"))); ary.Add(new JObject(new JProperty(id + "3", "Item " + id + " 3"))); ary.Add(new JObject(new JProperty(id + "4", "Item " + id + " 4"))); context.Response.Write(ary.ToString()); } else { context.Response.Write(new JArray().ToString()); } } … … } } |
WebForm.aspx |
< head runat=" server" > < title >< /title > < link href=" /Content/DropDown.css" rel=" stylesheet" / > < script src=" /Scripts/jquery-1.6.min.js" >< /script > < script src=" /Scripts/DropDown.js" >< /script > < /head > < body > < form id=" form1" runat=" server" > < div > < table border=" 0" cellpadding=" 0" cellspacing=" 0" width=" 100%" > < tr > < td width=" 350" > < 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" class=" submitbtn" / > < /div > < br / > < asp:Literal ID=" IsPostBackDebugStatement" runat=" server" / > < br / >< br / > < asp:Literal ID=" PostBackValueDebugStatement" runat=" server" / > < /form > < /body > |
WebForm.aspx.cs |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace SampleDemo { public partial class WebForm : System.Web.UI.Page { 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."; } } } } |