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:



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



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



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

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

Build the project.



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



Model Code

public class StudentDetailsModel
{
    public List < StudentDetailViewModel > Studentmodel
    {
        get;
        set;
    }
    public List < StudentDetailViewModel > GetStudentList()
    {
        List < StudentDetailViewModel > objStudent = new List < StudentDetailViewModel > ();
        objStudent.Add(new StudentDetailViewModel
        {
            Id = 1, Name = "TestName1", Class = "1", Section = "2", Address = "Pune"
        });
        objStudent.Add(new StudentDetailViewModel
        {
            Id = 2, Name = "TestName2", Class = "1", Section = "2", Address = "Nagar"
        });
        objStudent.Add(new StudentDetailViewModel
        {
            Id = 3, Name = "TestName3", Class = "1", Section = "2", Address = "Nagpur"
        });
        return objStudent;
    }
    public List < StudentDetailViewModel > GetStudentList(int ? id)
    {
        if (id == null || id == 0) return GetStudentList();
        else return GetStudentList().Where(P => P.Id == id).ToList();
    }
}
public class StudentDetailViewModel
{
    public int Id
    {
        get;
        set;
    }
    public string Name
    {
        get;
        set;
    }
    public string Class
    {
        get;
        set;
    }
    public string Section
    {
        get;
        set;
    }
    public string Address
    {
        get;
        set;
    }
}

Controller Code

public class GetStudentsController: Controller
{
    public ActionResult Index()
        {
            StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();
            List < StudentDetailViewModel > _objStudent = new List < StudentDetailViewModel > ();
            _objStudent = _objuserloginmodel.GetStudentList();
            _objuserloginmodel.Studentmodel = _objStudent;
            return View(_objuserloginmodel);
        }
        [HttpGet]
    public ActionResult SelectStudent(int ? selectedStudent)
    {
        StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();
        List < StudentDetailViewModel > _objStudent = new List < StudentDetailViewModel > ();
        _objStudent = _objuserloginmodel.GetStudentList(selectedStudent);
        _objuserloginmodel.Studentmodel = _objStudent;
        return PartialView("_PartialStudent", _objuserloginmodel);
    }
}

Highlighted code is the HTTP get method which will be called on dropdown change method.



Index page (View) Code

<script type="text/javascript">
   $(document).ready(function () {
        $(document).ready(function () {
            $("#StudentDropDown").change(function () {
                var selectedID = $(this).val();
                $("#dvCategoryResults").load('@(Url.Action("SelectStudent", "GetStudents", null, Request.Url.Scheme))?selectedStudent=' + selectedID);
            });
        });

    });
</script>

<br><br><br><br><br><br>
@Html.DropDownListFor(M => M.Studentmodel, new SelectList(Model.Studentmodel, "ID", "Name", 0), "Please Select", new { @id = "StudentDropDown" })
<br>

<div id="dvCategoryResults">
    @Html.Partial("~/Views/Shared/_PartialStudent.cshtml", Model);
</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 code

@model DropdownGrid.Models.StudentDetailsModel

@if (Model.Studentmodel != null && Model.Studentmodel.Count() > 0)
{
    var grid = new WebGrid(Model.Studentmodel, canSort: false);

    <div>
        @grid.GetHtml(columns:
        grid.Columns
        (
            grid.Column("ID", "Stud ID"),
            grid.Column("Name", "Stud Name"),
            grid.Column("Class", "Class"),
            grid.Column("Section", "Section"),
            grid.Column("Address", "Address")
        ), mode: WebGridPagerModes.Numeric)
    </div>

}

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.


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