Question

I have a form with a collection of Html and ASP Server Controls. Im using JSON to preload some drop-down lists.

I want to maintain the states of these drop-down lists on postback. Im quite new to JSON, can anyone help?

Answer 1

firstly, you should create an HTTPHandler to generate the JSON and get it using getJSON method from jQuery. Lastly, you have to get the selected value on the Load event of the page and maintain the value to a HiddenField for the next time. The following code demonstares it.

public class JsonGenerator : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        JavaScriptSerializer ser = new JavaScriptSerializer();
        context.Response.Write(ser.Serialize(new object[]
        { 
            new { Text = "Item1", Value = 1 },
            new { Text = "Item2", Value = 2 } ,
            new { Text = "Item3", Value = 3 } 
        }));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

---

<select id="DropDownList1" name="DropDownList1" />

<asp:Button ID="Button1" runat="server" Text="Button" />

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("JsonGenerator.ashx",
                  null,
                  function(r) {
                      var ddl = $("#DropDownList1"), hf = $("#SelectedValue");

                      $.each(r, function(k, v) {
                          ddl.append("<option value='" + v.Value + "'>" + v.Text + "</option>");
                      });

                      if (hf.length > 0)
                          ddl.children("[value='" + hf.val() + "']").attr("selected", "selected");
                  });
    });
</script>

---

protected void Page_Load(object sender, EventArgs e)
{
    string selectedValue = Request["DropDownList1"];

    if (!string.IsNullOrEmpty(selectedValue))
        Page.ClientScript.RegisterHiddenField("SelectedValue", selectedValue);
}