Search Record and Display in WebGrid

Introduction

This article describes how to search the records and displays in a WebGrid in the Web API.

The following is the procedure for creating the application.

Step 1

First create an Web API Application using the following:

• Start Visual Studio 2012.
• From the start window select "New Project".
• From the new project window select "Installed" -> "Visual C#" -> "Web".
• Select "ASP.NET MVC4 web Application" and click the "OK" button.
  
  
  
  
• From the "MVC4 Project" window select "Web API".
  
  
  
  
• Click the "OK" button.

Step 2

In this step add a model class:

• In the "Solution Explorer".
• Right-click on the Model folder.
• Select "Add" -> "Class".
• From the Add new item window select "Installed" -> "Visual C#".
  
  
  
  
• Select "Class" and then click the "Add" button.

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace GridViewAPI.Models
{
    public class StudentModel
    {
        public string key { get; set; }
        public List<StudentRecord> StudentRModel { get; set; }
    }
    public class StudentRecord
    {
        public string Name {get; set;}
        public string Course{get;set;}
        public string Rank{get;set;}
        public string City { get; set; }
    }
}

Step 3

In the "HomeController" write some code. This file exists:

• In the "Solution Explorer".
• Expand the "Controller" folder.
• Select "Homecontroller".
  
  
  

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using GridViewAPI.Models;
namespace GridViewAPI.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            StudentModel obj = new StudentModel();
            obj.StudentRModel = new List<StudentRecord>();
            obj.StudentRModel = GetData().OrderBy(m => m.Course).ToList();
            return View(obj);
        }
        [HttpPost]
        public ActionResult Index(StudentModel student)
        {
            student.StudentRModel = GetData().Where(m => m.Course == student.key.ToUpper()).ToList();
            return View(student);
        }
        public List<StudentRecord> GetData()
        {
            List<StudentRecord> objmodel = new List<StudentRecord>();
            objmodel.Add(new StudentRecord { Course = "MCA", Name = "Smith", Rank = "10",City="Kanpur" });
            objmodel.Add(new StudentRecord { Course = "MCA", Name = "Jhon", Rank = "5", City = "Lucknow" });
            objmodel.Add(new StudentRecord { Course = "MBA", Name = "Tanya", Rank = "3", City = "Delhi" });
            objmodel.Add(new StudentRecord { Course = "MBA", Name = "Malini", Rank = "4", City = "Banglore" });
            objmodel.Add(new StudentRecord { Course = "MBA", Name = "Varun", Rank = "19", City = "Gurgao" });
            objmodel.Add(new StudentRecord { Course = "BTech", Name = "Arun", Rank = "13", City = "Noida" });
            objmodel.Add(new StudentRecord { Course = "BTech", Name = "Vishakha", Rank = "7", City = "Rajasthan" });
            objmodel.Add(new StudentRecord { Course = "BCA", Name = "Tarun", Rank = "9", City = "Gujrat" });
            objmodel.Add(new StudentRecord { Course = "BCA", Name = "Mayank", Rank = "1", City = "Kannauj" });
            objmodel.Add(new StudentRecord { Course = "BCA", Name = "Ram", Rank = "2", City = "Jaipur" });
            return objmodel;
        }
    }
}

Step 4

In the "View" write some code. This view exists:

• In the "Solution Explorer".
• Expend the "Views" folder.
• Select "Home"->"index.cshtml".
  
  
  

Add the following code:

@model GridViewAPI.Models.StudentModel
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #4800ff;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #4800ff;
    background-color: #ffd800;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #4800ff;
    background-color: #999999;
}
</style>
@using (Html.BeginForm())
{
    <table width="40%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right">
                Search :
            </td>
            <td align="left">@Html.TextBoxFor(m => m.key) <input type="submit" value="Search" />
            </td>
            <td align="left">
            </td>
        </tr>
        <tr>
            <td colspan="2">
            <br />
                @{
                    var grid = new WebGrid(source: Model.StudentRModel, rowsPerPage: 10);
                }
                @grid.GetHtml(alternatingRowStyle: "even",
                  tableStyle: "gridtable",
                    columns: grid.Columns(
                    grid.Column("Course", "Course"),
                    grid.Column("Name", header: "Name"),
                    grid.Column("Rank", "Rank"),
                    grid.Column("City", "City")
                    ))
            </td>
        </tr>
    </table>
}

Step 5

Now execute the application:

Search the record type and Course name in the search box then click on the search button.