Step By Step How to make Ajax calls in MVC 4 - JSON - PartialViews

        By Carmel Schvartzman

In this tutorial we'll learn how to make Ajax calls in an MVC 4 View in ASP.NET MVC 4, rendering both strings, ActionResults and Json data. We'll use an ActionLink Html Helper to render just a sample data statically coded, sent by the Action method from the web server.

We'll be using anActionLink Html Helper.  As you know, an Html Helper is a class designed for rendering HTML controls to the Views. It supports several extension methods representing the different controls such as forms, textboxes, labels, dropdownlists, routelinks ( "< a >" ) , actionlinks ( "< a >" ) ,textareas, passwords, listboxes, checkboxes, radiobuttons, hidden fields, editors, and validation code.

We'll want to render ActionResults, Strings and Json data, via Ajax requests, as follows:

To use the Ajax enabled HTML Helpers we must create our own View, so first let's create a new Controller called "NewViewController", and then add a View to the Index Action method. So right click over the Controllers folder, and add a new Controller:

Name it "NewViewController", and select the template "Empty MVC Controller":

Open the Controller file and find the "Index" Action method:

Right click on it and select the option "Add View":

On the dialog, let the name be "Index", select the "ASPX" View engine, and choose a master page:

Our ActionLink will reside inside a Form. For the sake of this tutorial, we don't actually need a Form, but in most cases you'll be coding inside one. Create the Form object taking care of its tags, and add a button in order to submit the form:

Now, add the label which will inform the user what is the data returned about. This label is a custom Html Helper created by us in a previous tutorial :

To use the custom Html Helper Label, in case you're using it, we need to add the "Import" directive as follows:

Inside the Form tag, type an Ajax enabled ActionLink as follows , using an overload of the extension method with the following parameters:

The ActionLink will be set as follows, with the text to be displayed , the name of the Action Method to call, and the following AjaxOptions:

The options mean we want to send an Http GET verb request, and REPLACE the <p> tag with certain ID.
Of course, add a <p> tag to display the data returned with the response.

Now at the server side, open the controller, and create a new Action method which returns a PartialViewResult , and inserts in the ViewBag a string:

Next, we need to create the PartialView, therefore right-click the mouse over the Action method, and select "Add View":

Then, write the name of the partial view, and check the "Create as a Partial View":

Open the Partial View ASCX file, and add the code to display the ViewBag variable:

Finally, open the Master page (or the _layout.cshtml) and add a reference to the jqueryval.js script, in order to render the partial view:

Buid (F6) and run your app (CTL-F5) , to get this presentation UI:

Remember you don't need to press the Submit button; instead, press the Link. As you see, the <p> tag was populated with a string sent by the Web Server:

Let's take a look at the Network tab on the Developer's Tools (F12):

As you see, a GET request has been sent to the Web Server, getting an 200 (OK) response as a result:

An HTTP GET request has been sent to the web server, getting back a 200 response with the replacement string:

Now we'll render from the Web Server a simple string, instead of a Partial View Result. Then create a new Action method and add the code to render the data,  sending a String Result to the View :

Inside the View, code another ActionLink to request a string from the new Action method, and this time we don't need an AjaxOptions object:

Buid (F6) and run your app (CTL-F5) , to get this presentation UI:

Remember you don't need to press the Submit button; instead, press the new Link we just added.
Let's take a look at the Network tab on the Developer's Tools (F12):

As you see, a GET request has been sent to the Web Server, getting an 200 (OK) response as a result:

An HTTP GET request has been sent to the web server, getting back a 200 response with the requested string:

Now we'll render from the Web Server a Json Result, instead of a String. Then add the code to render the data, sending a Json Result to the View :

Inside the View, code another ActionLink to request a JSON object from the new Action method, and again we won't need an AjaxOptions object:

Buid (F6) and run your app (CTL-F5) , to get this presentation UI:

Remember you don't need to press the Submit button; instead, press the new Link we just added.
Let's take a look at the Network tab on the Developer's Tools (F12):

As you see, a GET request has been sent to the Web Server, getting an 200 (OK) response as a result:

An HTTP GET request has been sent to the web server, getting back a 200 response with the requested JSON object:

In this tutorial we've learned how to make Ajax calls in an MVC 4 View in ASP.NET MVC 4, using an ActionLink Html Helper, and rendering both strings, PartialViews and Json data. 
That's all!! 
Happy programming.....

כתב: כרמל שוורצמן