How to Search in Gridview using Mvc4 asp.net

Introduction :
This tutorial explain how to make search functionality in in gridview using the asp.net  mvc4 web application. here we can use the entity data source for the getting the data from the database.when you run the project get the all data from the database and if you search data using the textbox then you get matching data of textbox  and display in gridview.

Step1:  You can see the snapshot like below.

(1.  when you run project you can see o/p like below.

 

(2. when you search the data using textbox show gridview as following.

Step 2 : First you create Mvc4 application

Step 3: Create database as following.

Step 4:  Now you drag and drop database table and Create ADO.NET Entity Data Model as following.

Step 5:  Now just time to Create  model class for data access  as following. and give name EmployeeData.cs

public class EmployeeData
    {
        public List<Product> ProductList { get; set; }
             
     }
        public class Product
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string City { get; set; }
            public string Education { get; set; }
         
        }

---

Step 6:  after creating model its time to add controller method as following code here you will be write the search functionality logic.

public class CBController : Controller
    {
       
        // GET: /CB/

       
        [HttpGet]
        public ActionResult GridSearch()
        {
            EmployeeData EMP = new EmployeeData();
            EMP.ProductList = GetProduct("");
            return View(EMP);
        }
        [HttpPost]
        public ActionResult GridSearch(string SearchData)
        {
            EmployeeData EMP = new EmployeeData();
            EMP.ProductList = GetProduct(SearchData);
            return View(EMP);
        }

        public List<Product> GetProduct(string SearchData)
        {
            List<Product> lst = new List<Product>();
            Database1Entities6 db = new Database1Entities6();
            var DataItem = from data in db.tbl_user
                              where SearchData == "" ? true : data.Name.StartsWith(SearchData)
                              select data;
            foreach (var item in DataItem)
            {
                lst.Add(new Product
                {
                    Id = (int)item.Id,
                    Name = item.Name,
                    City = item.City,
                    Education = item.Education

                });
            }
            return lst;
        }

Step 7: and then finelly add the view as following with the gridview.

@model MvcApplication1.Models.EmployeeData

@{
    ViewBag.Title = "GridSearch";
}

<h2>GridSearch</h2>
 <style>
    table, td, th
    {
        border: 1px solid black; 
    }
    th
    {
        border: 1px solid black;
        background-color: pink;
    }
</style>

@using (@Html.BeginForm())
{
<table>
<tr>
    <td>
        @Html.TextBox("SearchData", "")
        <input type="submit" value="SearchData" />
    </td>
</tr>
  </table>
         var grid = new WebGrid(Model.ProductList, canSort: false);   
     <div>
           @grid.GetHtml(columns:
                grid.Columns
                (
                        grid.Column("Id", "Id"),
                        grid.Column("Name", " Name"),
                        grid.Column("City", "City"),
                        grid.Column("Education", "Education")
                     
        ), mode: WebGridPagerModes.Numeric)

     </div>
}

If you have any query reguarding the above code you can give comment below.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email