从 JQuery 添加 asp.net 自定义用户控件

Adding an asp.net custom user control from JQuery

本文关键字：自定义 用户 控件 net asp JQuery 添加      更新时间：2023-09-26

我正在使用互联网上某个地方的以下JQuery代码在浏览器窗口滚动时加载内容。 

var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    }); 
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        customers.each(function () {
            var customer = $(this);
            var table = $("#dvCustomers table").eq(0).clone(true);
            $(".name", table).html(customer.find("ContactName").text());
            $(".city", table).html(customer.find("City").text());
            $(".postal", table).html(customer.find("PostalCode").text());
            $(".country", table).html(customer.find("Country").text());
            $(".phone", table).html(customer.find("Phone").text());
            $(".fax", table).html(customer.find("Fax").text());
            $("#dvCustomers").append(table).append("<br />");
        });
        $("#loader").hide();
    }

如您所见，它在响应成功时添加了HTML表。但是我有一个 asp.net 用户控件，我想在内容滚动时添加它而不是这个 HTML 表（简而言之，我想从 JQuery 添加一个服务器端控件）。我无法添加用户控件的 HTML 来代替这个 HTML 表，因为它的代码太长太复杂，而且我对 JQuery 了解不多。我是JQuery初学者概念的初学者。此外，我是后端编程方面的专家。因此，我无法在 JQuery 中编写该业务逻辑。所以任何人请帮助我这样做。

就像 kintaro alerady 建议的那样;在服务器端（在用户控件中）呈现 html，然后在 Web 方法中加载该控件以将 HTML 结果返回到客户端。

下面是一个示例：

JavaScript 代码：

var pageIndex = 0;
var data = { "pageIndex": pageIndex };
$.ajax({
    type: "POST",
    url: "CS.aspx/GetCustomers",
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8"
}).done(function (result) {
    $("#dvCustomers").append(result.d);
});

和服务器端的页面方法：

[WebMethod]
public static string GetCustomers(int pageIndex)
{
    Page pageHolder = new Page();
    UserControl viewControl = (UserControl)pageHolder.LoadControl("_path_to_customers_usercontrol");
    pageHolder.Controls.Add(viewControl);
    StringWriter output = new StringWriter();
    HttpContext.Current.Server.Execute(pageHolder, output, false);
    return output.ToString();
}

您还必须将 pageIndex 值传递给客户用户控件，您可以通过将 LoadControl 方法的结果强制转换为代表客户用户控件的类，然后设置 PageIndex 属性来实现该值。

如果要将项目开发为 ASP.NET 网站，则必须使用反射来设置属性值。下面是一个示例：

Type viewControlType = viewControl.GetType();            
PropertyInfo field = viewControlType.GetProperty("PageIndex");
if (field != null)
{
    field.SetValue(viewControl, pageIndex, null);
}

您可以使用 url 参数切换控件的 HTML：

     $.ajax({
        type: "POST",
        url: "CS.aspx/GetCustomers",
        data: '{pageIndex: ' + pageIndex + ', ajaxcall: true}',
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (data) {
        $("#dvCustomers table").append(data);
    });

在 ascx 控件中：

<%if (Page.Request.QueryString.Get("ajaxcall") == "true")
  {%>
    normal html control render.
<%}
  else
  {%>
    <tr>
        <td>All data of table only tr an tds</td>
    </tr>
<%} %>

创建一个div 并将您的用户控件放入此div 中，然后设置visibility:hidden，一旦成功显示它（使用 jquery 将visibility设置为 visible）：

<div style="visibility:hidden" id="dv1">
 <uc1:usercontrol Visible="true" runat="server">...
</div>

Jquery ：

$("#dv1").css("visibility","visible");
相关文章：