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.

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

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:

Called to the get method of controller using jQuery and updated the partial view.
Fill the dropdown with id property specified.
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.

10 Comments

Join the conversation! Your thoughts help the community grow.

Ajay Gandhi11y ago
Thanks Everyone
Upendra Pratap Shahi11y ago
good one
Sibeesh Venu11y ago
Nice Share
Ajay Gandhi11y ago
Thanks All of you
Nilesh Jadav11y ago
Great work sir !
Mukesh Kumar11y ago
Good Job
Santhakumar Munuswamy11y ago
Good Article
Gowtham K11y ago
Nice One
Nitin11y ago
Good one
Mohammed Ibrahim11y ago
nice