Call HTTPGet Action And Update The PartialView Using jQuery

At the end of this assignment you will understand the following things in MVC and jQuery:

  • Calling HTTPGet function on jQuery.
  • Assigning the data to PartialView on dropdown item change.
  • Binding data to the dropdown.
  • Binding data to the grid in PartialView on some event.

Requirement for these assignments

  • Visual Studio 2015

Step 1: Create a New web Project from Visual Studio File - Go to New Project, give Solution Name and Project Name. Click on OK button as in the following screenshot:

New Project

Step 2: On clicking Ok button the following screens will appear. Now select MVC on available templates and click Ok button.

mvc

Step 3: It will create fresh MVC project for you and solution will be like the following screen. In View Folder open the _ViewStart and comment it. Remove all default code from it ( it will remove the default template applied ).

MVC project

Step 4: Delete the unwanted views, controllers & models.

Comment out code inside 1: IdentityConfig.cs 2: Startup.Auth.cs.

Build the project.

Build the project

Step 5: Add Controller, Model, View and PartialView as in the following code snippet:

Add Controller

Model Code

  1. public class StudentDetailsModel  
  2. {  
  3.     public List < StudentDetailViewModel > Studentmodel  
  4.     {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     public List < StudentDetailViewModel > GetStudentList()  
  9.     {  
  10.         List < StudentDetailViewModel > objStudent = new List < StudentDetailViewModel > ();  
  11.         objStudent.Add(new StudentDetailViewModel  
  12.         {  
  13.             Id = 1, Name = "TestName1", Class = "1", Section = "2", Address = "Pune"  
  14.         });  
  15.         objStudent.Add(new StudentDetailViewModel  
  16.         {  
  17.             Id = 2, Name = "TestName2", Class = "1", Section = "2", Address = "Nagar"  
  18.         });  
  19.         objStudent.Add(new StudentDetailViewModel  
  20.         {  
  21.             Id = 3, Name = "TestName3", Class = "1", Section = "2", Address = "Nagpur"  
  22.         });  
  23.         return objStudent;  
  24.     }  
  25.     public List < StudentDetailViewModel > GetStudentList(int ? id)  
  26.     {  
  27.         if (id == null || id == 0) return GetStudentList();  
  28.         else return GetStudentList().Where(P => P.Id == id).ToList();  
  29.     }  
  30. }  
  31. public class StudentDetailViewModel  
  32. {  
  33.     public int Id  
  34.     {  
  35.         get;  
  36.         set;  
  37.     }  
  38.     public string Name  
  39.     {  
  40.         get;  
  41.         set;  
  42.     }  
  43.     public string Class  
  44.     {  
  45.         get;  
  46.         set;  
  47.     }  
  48.     public string Section  
  49.     {  
  50.         get;  
  51.         set;  
  52.     }  
  53.     public string Address  
  54.     {  
  55.         get;  
  56.         set;  
  57.     }  
  58. }  
Controller Code
  1. public class GetStudentsController: Controller  
  2. {  
  3.     public ActionResult Index()  
  4.         {  
  5.             StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();  
  6.             List < StudentDetailViewModel > _objStudent = new List < StudentDetailViewModel > ();  
  7.             _objStudent = _objuserloginmodel.GetStudentList();  
  8.             _objuserloginmodel.Studentmodel = _objStudent;  
  9.             return View(_objuserloginmodel);  
  10.         }  
  11.         [HttpGet]  
  12.     public ActionResult SelectStudent(int ? selectedStudent)  
  13.     {  
  14.         StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();  
  15.         List < StudentDetailViewModel > _objStudent = new List < StudentDetailViewModel > ();  
  16.         _objStudent = _objuserloginmodel.GetStudentList(selectedStudent);  
  17.         _objuserloginmodel.Studentmodel = _objStudent;  
  18.         return PartialView("_PartialStudent", _objuserloginmodel);  
  19.     }  
  20. }  
Highlighted code is the HTTP get method which will be called on dropdown change method.

code is the HTTP

Index page (View) Code
  1. <script type="text/javascript">  
  2.    $(document).ready(function () {  
  3.         $(document).ready(function () {  
  4.             $("#StudentDropDown").change(function () {  
  5.                 var selectedID = $(this).val();  
  6.                 $("#dvCategoryResults").load('@(Url.Action("SelectStudent", "GetStudents", null, Request.Url.Scheme))?selectedStudent=' + selectedID);  
  7.             });  
  8.         });  
  9.   
  10.     });  
  11. </script>  
  12.   
  13. <br><br><br><br><br><br>  
  14. @Html.DropDownListFor(M => M.Studentmodel, new SelectList(Model.Studentmodel, "ID""Name", 0), "Please Select"new { @id = "StudentDropDown" })  
  15. <br>  
  16.   
  17. <div id="dvCategoryResults">  
  18.     @Html.Partial("~/Views/Shared/_PartialStudent.cshtml", Model);  
  19. </div>  
The following is the details of blocks in view code:

 

  1. Called to the get method of controller using jQuery and updated the partial view.
  2. Fill the dropdown with id property specified.
  3. Call to the PartialView.

    partial view

Partial View code

  1. @model DropdownGrid.Models.StudentDetailsModel  
  2.   
  3. @if (Model.Studentmodel != null && Model.Studentmodel.Count() > 0)  
  4. {  
  5.     var grid = new WebGrid(Model.Studentmodel, canSort: false);  
  6.   
  7.     <div>  
  8.         @grid.GetHtml(columns:  
  9.         grid.Columns  
  10.         (  
  11.             grid.Column("ID""Stud ID"),  
  12.             grid.Column("Name""Stud Name"),  
  13.             grid.Column("Class""Class"),  
  14.             grid.Column("Section""Section"),  
  15.             grid.Column("Address""Address")  
  16.         ), mode: WebGridPagerModes.Numeric)  
  17.     </div>  
  18.   
  19. }  
Finally run the project and as a result you will get the following screen. On dropdown element change HTTPGet action method will get called and partial view gets filled respective data.

dropdown
I hope you understood how to call HTTPGet action using jQuery and update the PartialView using jQuery.