Best pratice: How do I implement a list similar to Stackoverflow's Users List?

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

If you are creating the html tags on the server, reuse is easy enough. In either case you are adding html controls to a parent control, so you just create a method available from both pages that takes the parent control as a parameter and call it from CreateChildControls.

If you are sending json data to the client, use client side rendering only during development (using an ajax call in onload). You can then add a server side version if necessary once the view isn't going to change too much. In most cases it should be possible to write code in a style that will work in both jquery and .net so you can copy from one to the other without too many changes.

Answer 2

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.