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