<p>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.</p>

<p>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?</p>

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.