Как мне сохранить состояние моих HTML-элементов управления при обратной передаче с JQuery и JSON?

Question

У меня есть форма с набором Html и ASP Server Controls. Я использую JSON для предварительной загрузки некоторых выпадающих списков.

Я хочу сохранить состояния этих выпадающих списков при обратной передаче. Я новичок в JSON, кто-нибудь может помочь?

Answer 1

Если вы можете использовать HTML, выберите элемент вместо. Таким образом, вы можете получить выбранное значение элемента 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);
}

Answer 2

во-первых, вы должны создать HTTPHandler для генерации JSON и получить его, используя метод getJSON из jQuery. Наконец, вы должны получить выбранное значение в событии 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 3

Не позволяйте браузеру делать посты, делайте это сами с помощью jQuery. При обратном вызове замените div результатов возвращенным html.

Если вы пометили свою форму с 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; });