How do i maintain the state of my Html Controls on postback with JQuery and JSON?

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

Don't let the browser do the post, do it yourself with jQuery. On the callback replace a results div with the returned html.

Assuming you've marked your form with class="ajaxform" and your results div with id="results" then something like this (not fully tested)...

// Submit form.ajaxform
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
    $.ajax({
        type: "POST",
        data: $("form.ajaxform").serialize(),
        success: function(data, textStatus) {
            $("#results").replaceWith($("#results", $(data)));
        }
    });
};
$("form.ajaxform input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form.ajaxform").submit(function () { return false; });

Answer 2

If you can use HTML select element instead. Thus, you can get the selected value of select element on the server and register an hidden field to maintain the value. While you are loading the items so you can check the registered hidden field to retrieve the previous selected value.

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

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

<script type="text/javascript">
    var sv = document.getElementById("SelectedValue");
    var v = (sv != null && sv.value != "" ? sv.value : null);

    var o = document.getElementById("DropDownList1");
    for (var i = 0; i < 10; i++) {
        var item = document.createElement("option");
        item.innerHTML = "item" + i;
        item.setAttribute("value", "item" + i);

        if (("item" + i) == v)
            item.setAttribute("selected", "selected");

        o.appendChild(item);
    }
</script>

---

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

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

Answer 3

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);
}