How to filter records in MVC Webgrid using textbox - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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>)
   )
     )


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon