ASP.NET MVC meets AJAX

• Visual Studio 2013+ for web, ultimate or community.
• SQL Server Management Studio 2012+
• Knowledge of Transact SQL basics
• Knowledge of AJAX at an apprentice level. 

In this tutorial we would use AJAX to retrieve data from the server asynchronously and to update portions of existing page without loading the whole page which we will be creating.

• Open SQL Server Management Studio 2012 +
• Create a new database named "mvDB"
• Right Click the Database 
• Click on new Query
• Type the following code in the query to create a new table with properties

Create table tblStudents
(
 Id int identity primary key,
 Name nvarchar(50),
 TotalMarks int
)

• Click on the execute icon or press Fn + F5 or F5 on your keyboard.
• Add the following code 

Insert into tblStudents values ('Mark', 900)
Insert into tblStudents values ('Tom', 760)
Insert into tblStudents values ('James', 720)
Insert into tblStudents values ('Mary', 970)
Insert into tblStudents values ('Nick', 480)
Insert into tblStudents values ('Jim', 640)
Insert into tblStudents values ('Tim', 520)
Insert into tblStudents values ('Paul', 983)

• Click on the execute icon or press Fn + F5 or F5 on your keyboard.
• Open Visual Studio
• Create a new MVC app using the templates provided in Visual Studio.
• Right click on the models folder
• Click create a new item.
• Go to data section on top left
• Add an ADO.NET Entity Data Model named "Student Model"
• Click on EF Designer from database to generate the model using the database that we previously created. 
• Click on New Connection...

​

• On the new "Connection Properties" window, fill in the required fields
• Test your database connection and once the test succeeds click OK
• Click Next
• Check these 3 Checkbox as shown in the screenshot below: 

• Click Finish

• Go to Views > Shared 
• Add a new View as shown below:

• Click Add.
• Go to the Controller folder
• Delete all the controllers in that folder
• Create an Empty MVC 5 controller named "HomeController"
• Replace the code in your HomeController with the following code:
• Make sure to read the comments included below to understand the code better.

//Referencing our project's models folder to access the StudentModel.edmx file.
//Notice that your project name might be different than "myMVC" and thus you would type 
//"yourProjectName.Models" instead of myMVC.Models in the using statement.
using myMVC.Models;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace myMVC.Controllers
{
    public class HomeController : Controller
    {
        //Creating an instance of the mvDBEntities
        mvDBEntities DB = new mvDBEntities();

        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
      
        //Creating a partialViewResult to ensure that the entire view is not refresh 
        //Only a portion of the view will be refresh with the PartialViewResult
        public PartialViewResult All()
        {
            //Creating a list of Students and populating it with data from the DB (database)
            List<tblStudent> model = DB.tblStudents.ToList();
            
            //Using the PartialView function since our action method "All" type is "PartialViewResult"
            //The arguments that this method takes are the View followed by the model object
            return PartialView("_Student", model);
        }

        //Get top 3 students based on their marks
        public PartialViewResult Top3()
        {
            //Using a LINQ method to filter the data and using .Take(...) method to get only 3 row of data.
            List<tblStudent> model = DB.tblStudents.OrderByDescending(a => a.TotalMarks).Take(3).ToList();
            return PartialView("_Student", model);
        }
        //Get bottom 3 students on their marks
        public PartialViewResult Bottom3()
        {
            List<tblStudent> model = DB.tblStudents.OrderBy(a => a.TotalMarks).Take(3).ToList();
            return PartialView("_Student", model);
        }

    }
}

 

 

• On the solution explorer, go to the View folder
• Delete the Home folder from the View folder
• Go to the HomeController file
• On the HomeController file, right click on the index action method code
• Click Add view.
• Uncheck the "Create as partial view" checkbox
• Click the add button

---

We are going to use the Ajax.ActionLink helper; there are 12 overloaded versions of this helper. The following overloaded version takes the following parameters:
the link text , the action method to be involked when we click on the link and the third parameter is the ActionOptions.

• Go to the Package Manager Console 
• Type: 

  Install-Package Microsoft.jQuery.Unobtrusive.Ajax

• Press enter
• In the Index.cshtml that we previously created, replace the code with the following code:
• Pay careful attention to the comments to understand the code better.

@*Notice that jquery file reference might be different depending on the version of .Net that you would be using*@
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
@*Make sure that the following reference is after the above jQuery reference since it is using jQuery codes*@
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<h2>Student</h2>

@*1st parameter: Link Text
2nd parameter: The action method is All from the HomeController
3rd parameter: AjaxOptions*@
@Ajax.ActionLink("All", "All", new AjaxOptions
{
    //Properties of the AjaxOptions object that we are using are:
    HttpMethod = "Get", //HTTP get request used since we are retriving data from the server
    UpdateTargetId = "divStudents", //On which element, we are placing the data that we retrieve (the element id used to identity unique elements)
    LoadingElementId = "spinner", //Display loading image with id "spinner until the element have loaded"
    InsertionMode = InsertionMode.Replace //the content that is already on the page be replace when ever we click the All click (this would avoid us having duplicate data)

})

|

@Ajax.ActionLink("Top 3", "Top3", new AjaxOptions
{
    HttpMethod = "Get",  
    UpdateTargetId = "divStudents",
    LoadingElementId = "spinner",
    InsertionMode = InsertionMode.Replace
})


|

@Ajax.ActionLink("Bottom 3", "bottom3", new AjaxOptions
{   
    HttpMethod = "Get", 
    UpdateTargetId = "divStudents",
    LoadingElementId = "spinner",
    InsertionMode = InsertionMode.Replace  
})

On the same page "Index.cshtml" add the following code:

@*Loading image with id "spinner"*@
<img id="spinner" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" style="display: none;">

@*Displaying the data retrived in that div of id "divStudents"*@
<div id="divStudents">

</div>

Result on Google Chrome:

Notice that only the table element of the web page is refreshed once we click either of the 3 links All,Top 3 or Bottom 3.

• To remove extra links "Edit,Details,Deletes and create", go to View > Shared > _Student.cshtml
• Once you have removed the extra links, your code should be similar to the one shown below:

• @model IEnumerable<myMVC.Models.tblStudent>
  <table class="table">
      <tr>
          <th>
              @Html.DisplayNameFor(model => model.Name)
          </th>
          <th>
              @Html.DisplayNameFor(model => model.TotalMarks)
          </th>
          <th></th>
      </tr>
  
  @foreach (var item in Model) {
      <tr>
          <td>
              @Html.DisplayFor(modelItem => item.Name)
          </td>
          <td>
              @Html.DisplayFor(modelItem => item.TotalMarks)
          </td>
      </tr>
  }
  
  </table>
  

Result on Chrome after extra links removal

• You can find out more about the MVC AJAX helper here: http://www.c-sharpcorner.com/article/Asp-Net-mvc-ajax-helper/