Refresh table info using jQuery and ASP.NET MVC

Question

I have a simple page that displays a user's email addresses in a table. I also have a textbox underneath the table and an "add" button. Currently, I am using a simple form post that is handled by a controller that will add the e-mail address to the database and reload the page. This works fine, but I'm looking to streamline the process by using jQuery and AJAX so that the page doesn't need to be refreshed.

What's the best way to go about doing this? I imagine I'll have to set up an event listener for the button's click event, perform an AJAX call to a url like "Email/Add". Where I get lost is figuring out what type of information to return from that controller action and how that information can get parsed on the client side to update the table of e-mail addresses. Are there any good samples of this out there?

Answer 1

You should use XML or JSON. I prefer JSON because it's easy to parse back on the javascript side.

In the click handler for the add button, make an AJAX call to some MVC path specifies what email has been added. Make the code for that path insert the email specified. Then, just return a result:

{
    result: 'SUCCESS',
    description: 'Email Added.'
}

Then, in your AJAX callback, parse the result like so:

//This function abstracts away the strangeness in dealing with the eval method and returning JSON objects
//If there is a better way, let me know
function ParseJSON(jsonText) {
    var ret = null;
    eval('ret = '+jsonText);
    return ret;
}

var ret = ParseJSON(response.value);;

if(ret.result == 'SUCCESS') {
    //Add a new TR to your table here
} else {
    //Display the error message here
    // alert(ret.description);
}

The result of 'SUCCESS' means that the server already added the email to the database. So, we just add the row into our table dynamically with JavaScript and you don't have to refresh the page.

Answer 2

If you want to use jquery you can return a partial view and insert the return html into your current document. ajaxloading div contains a rotating loading gif. The returned value is inserted into a table as the last value. The view returns a piece of html between tr-tags.

    $("#ajaxLoading").show();

     $.ajax({
         type: "POST",
         url: "/Hoofdgroepen/Add",
         data: "nummer=" + nummer + "&omschr=" + omschr,
         dataType: "html",
         success: function(result) {
             //alert(result);                                
             $("tr:last").after(result);
             $("#ajaxLoading").hide();
             $("#hfdgrpForm").resetForm();
         }
     });

Answer 3

When you apply EnganderedMassa's anwser, you could also the client side capability with a micro-template. This is a technique used by John Resig / jQuery god to parse and format data sets returned from a post. Your table is a perfect place to achieve this.

Here are two blog posts that use this technique (they're .Net based, but light on the .Net side).

Encosia - JTemplate

.Net and John Resig's micro template

Answer 4

can u tel me how you can call a server side function in c#.net using jquery with out page refresh