Adding an asp.net custom user control from JQuery

Question

I am using following JQuery code from somewhere on the internet to load content on browser window scroll.

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();
    }

As you can see its adding HTML table on response success. But I have an asp.net user-control that I want to add instead of this HTML table when content scrolls (In short I want to add a server side control from JQuery). I can't add user-control's HTML in place of this HTML table because its code is too lengthy and complex and I don't know much JQuery. I am the beginner of the beginner concept of JQuery. Moreover I am a specialist in back-end programming. So, I can't code that business logic in JQuery. So any one please help me in doing so.

Uroš Goljat · Accepted Answer · 2013-11-19 10:18:13Z

1

+50

Like kintaro alerady suggested; render you html on server side (in a user control) and then load that control inside web method to return results in HTML to client side.

Here'a an example:

JavaScript code:

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);
});

and the PageMethod on server side:

[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();
}

You will also have to pass a pageIndex value to Customers user controls, you can to that by casting the result of LoadControl method to a class that represnts your customer user control and then set PageIndex property.

If you are developing your project as ASP.NET Web Site you'll have to use reflection to set property value. Here's an example:

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

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

answered Nov 19, 2013 at 10:18

Uroš Goljat

1,81615 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aishwarya Shiva Over a year ago

This is the exact answer. Thanks :)

Thamotharan Karuppiah · Accepted Answer · 2013-11-19 09:21:04Z

1

You can switch the HTML of the control with url parameter:

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

And in the ascx control:

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

edited Nov 19, 2013 at 9:21

Thamotharan Karuppiah

1,7951 gold badge11 silver badges14 bronze badges

answered Nov 8, 2013 at 16:24

kintaro

2,5442 gold badges17 silver badges16 bronze badges

Comments

Zaki · Accepted Answer · 2013-11-08 16:21:56Z

0

Create a div and put your user control in this div. then set the visibility:hidden and once it is success display it(set visibility to visible using jquery) :

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

Jquery :

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

answered Nov 8, 2013 at 16:21

Zaki

5,6087 gold badges58 silver badges91 bronze badges

1 Comment

Aishwarya Shiva Over a year ago

didn't worked. Can you please modify my code and tell me how to achieve your idea?

Collectives™ on Stack Overflow

Adding an asp.net custom user control from JQuery

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related