[英]Adding an asp.net custom user control from JQuery
我在互联网上的某个地方使用以下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中编写业务逻辑。 所以任何人请帮助我这样做。
您可以使用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>
<%} %>
像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);
});
和服务器端的PageMethod:
[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值传递给Customers用户控件,您可以通过将LoadControl方法的结果转换为重新创建客户用户控件的类,然后设置PageIndex属性来实现。
如果您将项目开发为ASP.NET Web站点,则必须使用反射来设置属性值。 这是一个例子:
Type viewControlType = viewControl.GetType();
PropertyInfo field = viewControlType.GetProperty("PageIndex");
if (field != null)
{
field.SetValue(viewControl, pageIndex, null);
}
创建一个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");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.