Filter table rows using partial view and jquery - on dropdown change

Ankaprasad
Posted by Ankaprasad under ASP.NET MVC category on | Points: 40 | Views : 1209
Description:

The below code will talk about how to filter data on a table using partial view and jquery

Employee Model
    public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public int Salary { get; set; }
public int Department { get; set; }
}


View Code

The following view has one dropdown and one empty div.
Empty div will be loaded with data using jquery and partial view

@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<div class="form-group" style="padding-top:50px; padding-bottom:50px;padding-left:0px">
@Html.Label("Select Department", new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.DropDownList("Department", new List<SelectListItem>
{ new SelectListItem() {Text = "All", Value="0"},
new SelectListItem() {Text = "1", Value="1"},
new SelectListItem() {Text = "2", Value="2"},
new SelectListItem() {Text = "3", Value="3"}

}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.Label("Employees", new { @class = "control-label" })
<div class="">
<div id="divResult"></div>
</div>
</div>

JQuery
$(document).ready(function () {
LoadEmployees();
});
$("#Department").change(function () {
LoadEmployees();
})

The below Jquery function will call the controller action (name :Search ) and that action will return a partial view( _EmployeeGrid ).
function LoadEmployees() {
var department = $("#Department option:selected").val();
$.ajax({
type: 'get',
url: '@Url.Action("Search")',
contentType: 'application/json; charset=utf-8',
dataType: 'html',
data: { "deptId": department },
success: function (result) {
$("#divResult").html(result);
},
error: function (ex) {
alert("Error");
}
});
}

Controller code

public ActionResult Index()
{
return View();
}

[HttpGet]
public ActionResult Search(int deptId)
{
if (deptId != null && deptId != 0)
{
try
{
var model = from emp in empLst where emp.Department == deptId select emp;
return PartialView("_EmployeeGrid", model);
}
catch (Exception e)
{
// handle exception
}
}
return PartialView("_EmployeeGrid", empLst);
}


The following partial view has a table. If we pass the list of objects to this partial view it will bind the objects to table as rows.
@model IEnumerable<MvcFilter_PartialViews.Models.Employee>

@{
ViewBag.Title = "_EmployeeGrid";
}

<table class="table table-bordered table-striped">
<tr class="success">
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Salary)
</th>
<th>
@Html.DisplayNameFor(model => model.Department)
</th>
</tr>

@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Salary)
</td>
<td>
@Html.DisplayFor(modelItem => item.Department)
</td>
</tr>
}
</table>

Comments or Responses

Posted by: Amatya on: 12/8/2016 Level:Silver | Status: [Member] | Points: 10
What do you mean by partial View ?
Posted by: Ankaprasad on: 12/10/2016 Level:Starter | Status: [Member] | Points: 10
Hey Amatya, It's a concept of ASP.NET MVC.

For more info plz find below URL
http://www.c-sharpcorner.com/UploadFile/ff2f08/partial-view-in-mvc/

Login to post response