In this article I will explain with an example, how to filter WebGrid using DropDownList in ASP.Net MVC Razor.
By default, the WebGrid will display all records with Paging.
When an option is selected in the DropDownList, the Controller’s Action method will be called and the records from the Database Table will be filtered using Entity Framework and displayed in WebGrid in ASP.Net MVC Razor.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
![Filter WebGrid using DropDownList in ASP.Net MVC]()
Model
The Model class consists of the following two properties.
The Countries property is a Generic List of SelectItem class and will be used to populate the DropDownList.
The Customers property is a Generic List of Customer class of the Entity Model and will be used to populate the WebGrid.
public class NorthwindModel
{
public List<SelectListItem> Countries { get; set; }
public List<Customer> Customers { get; set; }
}
Controller
The Entity Framework is now configured and hence now we can create a Controller and write code to fetch the records from the Customers Table of the Northwind Database.
Action method for handling GET operation
Inside this Action method, the PopulateModel method is called and the value of Country parameter is passed as NULL.
Since the Country value is NULL, the PopulateModel method will fetch all the records from the Customers Table using Entity Framework and return it to the View.
The PopulateModel method, also populates the distinct list of Countries from the Customers Table which is used to populate the DropDownList.
Action method for handling POST operation
Inside the Index Action method, the PopulateModel method is again called but this time the selected value of the DropDownList is passed as parameter.
Now, the PopulateModel method will fetch filtered records from the Customers Table using Entity Framework and return it to the View.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindModel model = PopulateModel(null);
return View(model);
}
[HttpPost]
public ActionResult Index(string country)
{
NorthwindModel model = PopulateModel(country);
return View(model);
}
private static NorthwindModel PopulateModel(string country)
{
using (NorthwindEntities entities = new NorthwindEntities())
{
NorthwindModel model = new NorthwindModel()
{
Customers = (from c in entities.Customers
where c.Country == country || string.IsNullOrEmpty(country)
select c).ToList(),
Countries = (from c in entities.Customers
select new SelectListItem { Text = c.Country, Value = c.Country }).Distinct().ToList()
};
return model;
}
}
}
View
Inside the View, in the very first line the Northwind is declared as the Model.
HTML Form
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the Form, a DropDownList is created using the Html.DropDownList HTML Helper function.
WebGrid
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Entity class objects as source.
The WebGrid is created using the GetHtml method with the following parameters.
HtmlAttributes – It is used to set the HTML attributes to the HTML Table generated by WebGrid such as ID, Name, Class, etc.
Columns – It is used to specify the columns to be displayed in WebGrid and also allows to set specific Header Text for the columns.
Performing HTTP POST on WebGrid Paging
By default, when a Page Number Link is clicked in the WebGrid, a HTTP GET called is performed and hence with the help of jQuery the Page Number Links are forced to perform HTTP POST.
Filtering records in WebGrid using DropDownList
The DropDownList has been assigned a jQuery OnChange event handler, when an item is selected in the DropDownList, the Form will be submitted.
When the Form gets submitted, the selected Country value is sent to the Controller and the records in the WebGrid are filtered.
@model WebGrid_EF_MVC.Models.NorthwindModel
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model.Customers, canSort: false, rowsPerPage: 5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "WebGridForm" }))
{
@Html.DropDownList("Country", Model.Countries, "All", new { @id = "ddlCountries" })
}
<hr/>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("CustomerID", "Customer Id"),
webGrid.Column("ContactName", "Customer Name"),
webGrid.Column("City", "City"),
webGrid.Column("Country", "Country")))
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("change", "#ddlCountries", function () {
$('#WebGridForm')[0].submit();
});
$("body").on("click", ".Grid tfoot a", function () {
$('#WebGridForm').attr('action', $(this).attr('href')).submit();
return false;
});
</script>
</body>
</html>
Screenshot
![Filter WebGrid using DropDownList in ASP.Net MVC]()
Downloads
