Saturday, April 30, 2016

How to filter records in MVC Webgrid using textbox

In this article I am going to explain how to filter record in MVC Webgrid based on textbox.
How to filter records in MVC Webgrid using textbox
Click to enlarge


Model class (Employee.cs)

   public partial class Employee
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Phone { get; set; }
        public Nullable<int> Salary { get; set; }
        public string Department { get; set; }
        public string ImagePath { get; set; }
        public string EmailId { get; set; }

I have added a controller to project and write code to search the record.

using MVC_Project.Models;
DemoEntities1 db = new DemoEntities1();
        // GET: /Employee/

        public ActionResult Index()
            return View(db.Employees.ToList());
        //Filter :/Employee/
        public ActionResult Index(string SearchName)
            var Employee = from em in db.Employees
                           where em.Name.Contains(SearchName)
                           select em;              
            return View(Employee);

Add the view for index. Below given is code of view (Index.cshtml)

@model IEnumerable<MVC_Project.Models.Employee>

<style type="text/css">
    .webgrid {
        font-size: 1.2em;
        width: 80%;

        display: table;    
        border-collapse: collapse;
    .header {
        background-color: #3F95C5;
        color: #fff;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: center;
    .header a {
        text-decoration: none;
        color: #fff;
    td {
            text-align: center;
    table img
    .row-style {
        background-color :#E6E6E6;
    .row-style:hover {
        background-color: #C0C0C0;
     .alternating-row {
        background-color: #DEEDF5;
        .alternating-row:hover {
            background-color: #6EA0C3;
  @Html.Label("Enter Name :-"@Html.TextBox("SearchName", "", new { placeholder = "Name" })  <input type="submit" value="Filter" />

@{var grid = new WebGrid(Model, canSort: true, canPage: true);
        tableStyle: "webgrid",
        headerStyle: "header",
        footerStyle: "footer",
        rowStyle: "row-style",
        alternatingRowStyle: "alternating-row",
    mode: WebGridPagerModes.All,
    columns: grid.Columns
         //if else condition to check email id
             grid.Column("Email",format: (item) =>
                 if (item.emailid == null)
                     return Html.Raw("Email not available");
                     return (item.EmailId);
       //if else condition to display image
       grid.Column("Image",format: (item) =>
                     if (item.ImagePath == null)
                         return Html.Raw (string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/images/image.jpg")));
                         return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\" /></text>", Url.Content(item.ImagePath)));
grid.Column("Edit",format:@<text>@Html.ActionLink("Edit", "Update", new { id = item.ID })</text>),
grid.Column("Delete",format:@<text>@Html.ActionLink("Delete", "Delete", new { id = item.ID })</text>)

No comments:

Post a Comment