如何在使用JQuery和JSON回發時維護Html控件的狀態？

Question

我有一個Html和ASP服務器控件集合的表單。我使用JSON來預加載一些下拉列表。

我想在回發時維護這些下拉列表的狀態。我對JSON相當陌生，任何人都可以幫忙嗎？

Answer 1

首先，你應該創建一個HTTPHandler生成JSON和使用jQuery的從方法getJSON得到它。最後，您必須在頁面的Load事件中獲取選定的值，並在下次將值保留爲HiddenField。以下代碼演示了它。

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

Answer 2

不要讓瀏覽器做這個帖子，用jQuery自己做。在回調中，用返回的html替換結果div。

假設你有class="ajaxform"和你的結果與DIV標記的形式id="results"那麼這樣的事情（不完全測試）...

// 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 3

如果你可以使用HTML select元素來代替。因此，您可以獲取服務器上select元素的選定值並註冊一個隱藏字段以保持該值。在加載項目時，您可以檢查已註冊的隱藏字段以檢索先前選定的值。

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