In the previous article on the Filtering web grid, we used the DropDown for the filtering. I this article I’ll use the links to filtering the webgrid. In most shopping sites you can see the sidebar with links, user can use those link to filtering the product search area.
In this article we’ll discuss the same thing(See the picture 1.1).
Before Example:
1. I am using the EMployeeDb SQL Database. You can download from here.
2. I am using the MVC 4 Internet application template in Visual Studio 2012
3. Create a folder ‘Employee’ in ‘Views’.
4. Create new model class ‘EmployeeModel’ in ‘Models’.
5. Create new controller class ‘EmployeeController’ in ‘Controllers’
6. Add a view class in ‘Employees’ with name ‘EmployeeList’.
7. Read the following: http://www.authorcode.com/getting-started-with-webgrid-in-mvc-render-the-basic-webgrid/
8. Place a link ‘Show All Employee’ on home page. This link will load the ‘EmployeeList’ view.
First the create the ‘EmployeeModel’ as:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Tutorial_Mvc_4_1.Models { public class EmployeeModel { public int employeeId { get; set; } public string empName { get; set; } public Nullable<int> age { get; set; } public Nullable<decimal> salary { get; set; } public Nullable<int> department_id { get; set; } public string department_name { get; set; } } }
Creating the ‘EmployeeList’ View
The following is the ‘Employeelist’ view for displaying the list of the all employees. In this view we are placing the links for each department above the list of employee so that user can filter the records for the specific department.
The example is using the @Ajax.ActionLink to create the hyperlinks that will send the asynchronous request to invoke the controller’s action method to get the response of the filtered records in the div class=”filters”. The next is the div id=”EmployeeViewGrid” that contains the partial view.
We are using hte Html.RenderPartial() method to renders the _partialview, when you specify the _partialview name and model than the method Html.RenderPartial renders the _partialview, passing it a copy of the current System.Web.Mvc.ViewDataDictionary object with specified model. See the complete view ‘Employeelist’.
@model List<Tutorial_Mvc_4_1.Models.EmployeeModel> @{ ViewBag.Title = "Working with Web Grid in MVC"; } <h4>Please click option to filter the Employees:</h4> <form id="from1" method="post"> <div class="filters"> @foreach (var item in Model.Select(d => d.department_name).Distinct()) { @Ajax.ActionLink(@item, "GetDep", "Employee", new { depName = item }, new AjaxOptions { UpdateTargetId = "EmployeeViewGrid", HttpMethod = "POST" }, new { @class = "filter" }) } </div> </form> <div id="EmployeeViewGrid"> @{Html.RenderPartial("_EmployeeGrid", Model); } </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
Creating the Partial View ‘_EmployeeGrid’
Create the partial view _EmployeeGrid and place a webgrid shown as:
@model List<Tutorial_Mvc_4_1.Models.EmployeeModel> @{ var grid1 = new WebGrid(source: Model, canPage: true,ajaxUpdateContainerId: "EmployeeViewGrid"); @grid1.GetHtml(); }
‘EmployeeController’ controller
The ‘EmployeeList’ is the action that is executed when the view loads. We create a new Action ‘GetDep’ that will be executed when the user click on the link(We are using the Ajax.ActionLink to create them) to be filtering the records. This action accepted one argument for the department name.
public class EmployeeController : Controller { // // GET: /Employee/ private EmployeeDbEntities db = new EmployeeDbEntities(); public ActionResult Index() { ViewBag.Message = "Click on example to load."; return View(); } public ActionResult EmployeeList() { Response.CacheControl = "no-cache"; db = new EmployeeDbEntities(); var model = from e in db.tbl_Employee join d in db.tbl_department on e.department_id equals d.department_id select new EmployeeModel { employeeId = e.employeeId, empName = e.empName, age = e.age, salary = e.salary, department_name = d.department_name, department_id = e.department_id }; return View("EmployeeList", model.ToList()); } public ActionResult GetDep(string depName) { Response.CacheControl = "no-cache"; var model = from e in db.tbl_Employee join d in db.tbl_department on e.department_id equals d.department_id where d.department_name==depName select new EmployeeModel { employeeId = e.employeeId, empName = e.empName, age = e.age, salary = e.salary, department_name = d.department_name, department_id = e.department_id }; return PartialView("_EmployeeGrid", model.ToList()); } }
Thank you to
Dan Redik