Refreshing a page without postback in least time irrespective of DB Size.

Question

Which method is very effective and simple to code to attain this functionality ?

Refreshing a page without postback in least time irrespective of DB Size.

Consider i have 10 million records in table i have to retrive the 1000 records of the particular user and display it in the page. He/she might get few more records in next 2 seconds. Then i have to hit the DB once again to get those 2 records and alert them abt the new message. which method will be good to attain this?

1. MS AJAX
2. Basic XML HttpRequest and response methodology
3. Webservice
4. WCF
5. Any other ??

Kindly let me know with the exact reason why your are going for that option you are suggesting and if possible with an simple example code.

Thanks in Advance.

Answer 1

1. Put the GridView containing user records inside an UpdatePanel
2. Add a Timer control to the Page
3. Set the Timer's Tick event to be used as an AsyncPostBack trigger for the UpdatePanel

Here's a sample (not tested):

<asp:Timer ID="myTimer" runat="server" Interval="2000" OnTick="Timer_Tick" />                

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="myGrid" runat="server">
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="myTimer" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

and in the server callback rebind the grid:

private void Timer_Tick(object sender, EventArgs args)
{
    myGrid.DataSource = FetchUserRecordsFromDb();
    myGrid.DataBind();
}

Answer 2

You can go for jQuery Ajax and call static method which will be faster

Answer 3

 $("#btnTest").live("click", function(){
$.ajax({
    type: "POST",
    url: "jQueryAjax.aspx/StaticMethodName",
    data: "{val : 'parametervalue'}",
    contentType: "application/json; charset=utf-8;",
    dataType: "json",
    success: function(msg)
    {
        alert('DB Updated : '+msg);
    },
    failure:function(response)
    {
        alert('Error : '+response);
    }
});

});

So when the btnTest is clicked, it firest the StaticMethodName method which is written in c# code behind. You can respond with a message.

Answer 4

.live method is newly introduced in jQuery 1.3.2. It registers the click event even after postback. Else you need to call the live method on $(document).ready of javascript every time like:

$(document).ready(function()   {
$("#btnTest").click(function()
{
   // do your operation
}});

Answer 5

The most important aspect of the problem is going to be how you perform the query to find the new records for the user. You only want to pull back records that you haven't already retrieved earlier on the page. This could be achieved by storing a variable on the client keeping track of the chronologically latest record pulled back from before. Then, only query the server for the user's records that fall after that point. To do this, your records would need a time stamp, or their primary keys would need to be guaranteed to fall after earlier records when sorting.

// jQuery example
$.getJSON(
    "http://domain/url?after=" + lastTimeStamp,
    function(data) {
        // Render the data
    }
)

Once you've ensured that the amount of records retrieved by your query is the minimum required by the client, you also want to make sure that the query runs quickly. Making sure that the before-mentioned time stamp column and the foreign key column for associating the record with the user is indexed would probably help. Also, if you use a stored procedure, then the fact that the DB engine has a cached execution plan should make the query come back much quicker.

If your users will be returning to the page frequently, and you don't have a lot of concurrent users, you could also cache query results on the server.

If speed is the only factor, it doesn't matter a whole lot which server-side technology you use to host the code that sends the records to the client. What is important is that you only send back raw data. In other words, I would recommend against using an ASP.NET update panel. Instead, I would create a web service, perhaps in WCF, that encodes objects as JSON data structures to reduce the size of the response and the time it takes to parse it. Then, I'd had the client run the Javascript code to generate the HTML. DOM manipulation, even using tools like JQuery, is quite fast.

Answer 6

Jacob has given you a very good suggestion.

Alternatively, you could try a totally different approach: Load the page, then retrieve the data after page load using jQuery to retrieve a JSON result or pre-format the result in HTML server-side and just write it straight into a waiting HTML element.

$(document).ready(loadListDataFromHtml);

function loadListDataFromHtml(){
$.ajax({
type: "GET",
   url: "http://appname/listItems",
   data: "groupId=27",
   success: function(htmlResultString){
     $("targetDivSelector").html(htmlResultString);
   }
 });
}


function loadListDataFromJSON(){
$.ajax({
   type: "GET",
   url: "http://appname/listItems",
   data: "groupId=27",
   success: function(data){
    var jsonResult = eval(data);
    var resultHtml = "";

    //loop through records in jsonResult building html client side

    $("targetDivSelector").html(resultHtml);
   }
 });
}