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

Implementation:

Model:
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; }
    }

Controller:
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/
        [HttpPost]
        public ActionResult Index(string SearchName)
        {
            var Employee = from em in db.Employees
                           where em.Name.Contains(SearchName)
                           select em;              
            return View(Employee);
        }

View:
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
    {
        width:150px;
    }
    .row-style {
        background-color :#E6E6E6;
    }
    .row-style:hover {
        background-color: #C0C0C0;
    }
   
     .alternating-row {
        background-color: #DEEDF5;
    }
        .alternating-row:hover {
            background-color: #6EA0C3;
        }
</style>
@using(Html.BeginForm())
{
  @Html.Label("Enter Name :-"@Html.TextBox("SearchName", "", new { placeholder = "Name" })  <input type="submit" value="Filter" />
}

@{var grid = new WebGrid(Model, canSort: true, canPage: true);
  }
@grid.GetHtml(
        tableStyle: "webgrid",
        headerStyle: "header",
        footerStyle: "footer",
        rowStyle: "row-style",
        alternatingRowStyle: "alternating-row",
    mode: WebGridPagerModes.All,
    columns: grid.Columns
    (
        grid.Column("Name","Name"),
        grid.Column("Phone","Phone"),
        grid.Column("Salary","Salary"),
         grid.Column("Department","Department"),
         //if else condition to check email id
             grid.Column("Email",format: (item) =>
             {
                 if (item.emailid == null)
                     return Html.Raw("Email not available");
                 else
                     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")));
                     else
                         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>)
   )
     )


Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget