Tuesday, April 26, 2016

Condition statement example on MVC Webgrid column

In this article I am going to explain how to apply the conditional statement on webgrid column in mvc.

Condition statement example on MVC Webgrid column

Description:
Here I am going to explain the conditional attribute for webgrid. I have created a table Employees. At the time of registration some of employees not upload their picture and enter their email id. I want to show image not available image where employee’s pic is missing and same for email id.

Implementation:

I have created a table Employees and insert some dummy record into it.
 
Condition statement example on MVC Webgrid column
Table : Employee
Condition statement example on MVC Webgrid column
Dummy reocrds

Model (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 (EmployeeController.cs):

Import the namespace:

using MVC_Project.Models;

      DemoEntities1 db = new DemoEntities1();
        //
        // GET: /Employee/

        public ActionResult Index()
        {
            return View(db.Employees.ToList());
        }


Add View (index.cshtml):


Add the view for Index.

@model IEnumerable<MVC_Project.Models.Employee>

 @{
    WebGrid grid = new WebGrid(Model, canSort: true, canPage: true,rowsPerPage:5);
}
<style type="text/css">
    table {
        width: 80%;
    }

    th {
        padding: 2px 2px 2px;
    }

    td {
        text-align: center;
    }
    table img
    {
        width:150px;
    }
</style>
@Html.ActionLink("Add New Employee", "Create")

@grid.GetHtml(
    tableStyle: "table",
    fillEmptyRows: true,
    headerStyle: "false",
    footerStyle: "false",
    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