ASP.NET + jQuery – Adding SelectBox & Removing SelectBox on Client Side with Selected Item from ASHX JSON Restful & Server Side Form Post Handling

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