Question

Technologies involved:

1. ASP.NET Web-forms
2. Javascript (jQuery for instance)

Case

To make it clearer let’s give the Stackoverflow Users list as an example. This list can be manipulated at client-side. I can search, page and so forth. So obviously we would need to call jQuery.ajax to retrieve the HTML of each page given a search. Alright. Now this leaves me with the first question:

What is the best way to render the response for the jQuery.ajax at server-side? I can’t use templates I suppose, so the most obvious solution I think is to create the HTML tags as server-controls and render them as the result of an ASHX request? Is this is best approach?

Nice. That solved we have yet another problem:

When the user first enters the Authors List the first list page should already come from the server completely rendered alright? Of course we could render the first page as well as an ajax call but I don’t think it’s better. This time I CAN use templates to render the list but this template couldn’t be reused in case 1. What do I do?

Now the final question:

Now we have 2 rendering strategies: 1) Client and 2) Server. How do I reuse code for the 2 renderings?

What are the best pratices for solving these problems?

Answer 1

I would make a user control called “AuthorList.ascx” which outputs the list of authors in the correct format (ie with HTML), as a fragment. (No HEAD/HTML/BODY tags, just straight fragmet type stuff as per usual with an ASCX control.

Then I would make my Author List page as per normal, dropping this new control that I just made inside a div:

<div id="author-list"><uc1:authorList runat="server" id="userList1" /></div>

This is enough for case 2.

To add to it the ajax updating, I would make a new page, which has nothing but the AuthorList.ascx control in it:

<%@ Page ... %>
<%@ Register ... %>
<uc1:authorList runat="server" id="userList1" />

Using jQuery I would do:

$('#author-list').load('path-to-the-second-aspx-page-containing-user-contor.aspx', {
    // args here
});

Which allows you to update the contents of the author list via AJAX for subsequent requests, such as search, filter, paging etc.