ASP.NET + jQuery – Adding SelectBox & Removing SelectBox on Client Side with Server Side Form Post Handling

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.";
 
      }
   }