In
this article I am going to explain how to filter record in MVC Webgrid based on
textbox.
 |
| Click to enlarge |
In
previous articles I have explained how to apply or set the custom style on MVCwebgrid, how to apply the conditional statement on webgrid column in mvc and howCreate, read, update and Delete (CRUD) opratuion using Store procedure inasp.net mvc.
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>)
)
)
No comments:
Post a Comment