In
this article I am going to explain how to filter record in MVC Webgrid based on
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>)
)
)
.png)
