javascript - 使用来自 ASP.NET 的事件数据更新 DIV 内容

Question

例如，我有 2 个 block ，一个是可见的，一个是折叠的(选项卡控件)。 CountryList 中填充了代码隐藏中的数据 (OnPageLoad):

for (int i = 0; i < 50;i++ )
    countriesList.Controls.Add(new LiteralControl(string.Format("<div class=\"list\"><div class=\"list-item\"><div class=\"list-item-content-wrapper\"><span class=\"list-item-content\">{0}</span></div></div></div>", i)));

<小时/>

<div class="frame" id="frame_1">
    <div class="listview">
        <asp:Panel runat="server" ID="countriesList">
        </asp:Panel>
    </div>
</div>
<div class="frame" id="frame_2">
    <div class="listview">
        <asp:Panel runat="server" ID="citiesList">
        </asp:Panel>
    </div>
</div>

当用户选择某个国家/地区时，我必须从服务器获取数据，然后在一秒钟内显示它(当前隐藏)。

有没有办法填充

<asp:Panel runat="server" ID="citiesList">
</asp:Panel>

不再向服务器请求整个页面？

我需要在服务器端而不是客户端执行请求。

Answer 1

在您的客户端:

$.ajax({
        type: "POST",
        data:
        {
            '__EVENTTARGET': '$GetSomeData',
            'param1': 'param1_value',
            'param2': 'param2_value'
        }
    })
    .done(function (data) {
        alert("have html data:\n" + data);
        $('#YourControlId').html(data);
    }).fail(function (p1, p2, p3) {
        alert("error");
    });

然后在服务器端的 control_load 方法中的某个地方:

if (IsPostBack)
{
    var et = Request.Params["__EVENTTARGET"];

    switch (et)
    {
        case "$GetSomeData":
            var param1 = Request.Params["param1"];
            var param2 = Request.Params["param2"];
            var html_data = GetSomeData(param1, param2);

            response.ClearContent();
            response.ContentType = "text/html";
            response.ContentEncoding = System.Text.Encoding.UTF8;

            using (var outStream = response.OutputStream)
            using (var writer = new System.IO.StreamWriter(outStream))
            {
                writer.Write(html_data);
            }

            response.Flush();
            response.SuppressContent = true;
            HttpContext.Current.ApplicationInstance.CompleteRequest();

            break;
        default:
            return;
    }

    return;
}