Добавление пользовательского элемента управления asp.net из JQuery

Question

Добавление пользовательского элемента управления asp.net из JQuery

0

Я использую следующий код 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. Поэтому, пожалуйста, помогите мне в этом.

Aishwarya Shiva 08 нояб. 2013, в 17:09

Источник

Теги:

c#

javascript

jquery

html

asp.net

3 ответа

1

Вы можете переключить HTML-код элемента управления с параметром url:

     $.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 08 нояб. 2013, в 14:17

0

Спасибо Кинтаро, +1 тебе :)
Aishwarya Shiva 19 нояб. 2013, в 10:23

0

Создайте div и поместите свой пользовательский элемент управления в этот div. затем установите visibility:hidden и как только это будет успешным, отобразите его (установите visibility на visible с помощью jquery):

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

JQuery:

$("#dv1").css("visibility","visible");

Zaki 08 нояб. 2013, в 14:16

0

не сработало. Можете ли вы изменить мой код и сказать, как реализовать вашу идею?
Aishwarya Shiva 18 нояб. 2013, в 10:54

Ещё вопросы

не сработало. Можете ли вы изменить мой код и сказать, как реализовать вашу идею?

Uroš Goljat · Accepted Answer · 2013-11-19T08-06-00.000Z

Как предложил кинтаро-алериад; визуализируйте html на стороне сервера (в пользовательском элементе управления), а затем загрузите этот элемент управления внутри веб-метода, чтобы возвращать результаты с 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 пользовательским элементам клиентов, вы можете это сделать, переведя результат метода LoadControl в класс, представляющий пользовательский элемент управления пользователя, а затем установите свойство PageIndex.

Если вы разрабатываете свой проект как веб-сайт ASP.NET, вам нужно будет использовать отражение, чтобы установить значение свойства. Вот пример:

Type viewControlType = viewControl.GetType();            
PropertyInfo field = viewControlType.GetProperty("PageIndex");

if (field != null)
{
    field.SetValue(viewControl, pageIndex, null);
}