Step By Step How to make Ajax calls using PartialViews in MVC 4

        By Carmel Schvartzman

In this tutorial we'll learn how to make Ajax calls using PartialViews in MVC 4. We'll use several ActionLink Html Helpers to asynchronously render data from database, sent by some Action methods from the web server.

We'll be using three ActionLink Html Helpers.  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 a PartialView, via Ajax requests, showing up as follows:

The web page we're going to build, will display a list of blog posts, stored in database in a "Blog" table, and included in the Entity Framework context as follows:

By the other side, we'll need a Partial View containing a list of the posts in the Blog table. We'll make a AJAX call from the Index View, in order to populate a <div> with the contents of the PartialView. Add a new View to the "Shared" folder:

Set this as a "Partial View" , strongly typed according to the "Blog" Model class:

Because we don't need all the controls scaffolded in the View, delete the ones marked with red and retain those marked with green:

Now add the <img> tag in order to properly display the images in the page:

Now we'll build the controller to handle the user's interactions. This controller will render a simple View with a <div> placeholder in which display the Partial View, and three Ajax enabled links to call three different Action methods that filter the contents for that Partial View. Therefore, add a new Controller to the Controllers folder:

Name it "PostList", and leave it as an empty controller:

Leave the Index Action method as it is:

Now take a look again at the Model type the Partial View is expecting:

According to that, let's write another Action method to send the IEnumerable<Blog> collection to the Partial View:

The new Partial View will return a PartialViewResult with the collection obtained from a Repository we build in a previous Tutorial.

Now, for the View rendered by the Index Action method, add a new View right clicking inside the Index Action method:

Leave it as a simple View not strongly typed:

Open the Content tag and find the "Index" <F2>:

Change the title to "Posts List" and insert an Ajax.ActionLink control:

First Action Link we code, will send an GET request to the "AllPosts" Action method, and will insert the response inside the "DivPosts" update target, REPLACING its contents:

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

Click the link , and you'll see all the data ajax loaded without refreshing the web page:

Now we'll add another two Action methods to render filtered data. Notice that all we did was copy-paste the original "AllPosts" action method, adding a filter, and an HTTP POST attribute to handle POST requests:

The second Action Link we code, will send a POST request to the "Last3Posts" Action method, and will insert the response inside the "DivPosts" update target, REPLACING its contents:

Accordingly, the third Action Link we code, will send a GET request to the "AllPostsDescending" Action method, and will insert the response inside the "DivPosts".

Buid (F6) and run your app (CTL-F5) , and click the second link, to see ONLY 3 LAST posts:

Open the Developer Tools (F12) and in the NETWORK tab you'll see a POST request was sent:

And this was the response received:

You see, it's an HTML made to fit and replace the <div> tag content holder.

Now click the third link, to see all posts but SORTED descending by date posts, sending the following request:

The response received is indeed sorted descending:

And this is the ajax rendered table inside the <div> :

In this tutorial we've learned how to make Ajax calls using PartialViews in MVC 4, with several ActionLink Html Helpers used to asynchronously render filtered data from database. 
That's all!! 
Happy programming.....

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

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

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