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

Update DIV contents with data from ASP.NET on event

本文关键字：DIV 内容 NET 事件 更新 数据 ASP      更新时间：2023-09-26

例如，我有2块，一个是可见的，一个是折叠的(标签控件)。在codebehind (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>

不再次从服务器请求整个页面吗?

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

客户端:

$.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;
}

您可以为国家/地区下拉列表创建onchange事件处理程序。在事件处理程序中，向服务器发出AJAX请求(将国家值作为参数传递)。然后用响应数据填充cities DIV的内部HTML。

示例(使用jquery):

$('#Country').change(function () {
        $.ajax({
            url: '<your url here>'
            , type: 'POST'
            , data: {
                country: $(this).val()
            }
        })
        .done(function (data) {
            $('#citiesList').html(data);
        });
});
相关文章：