Condition statement example on MVC Webgrid column - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

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

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.


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
@Html.ActionLink("Add New Employee", "Create")

    tableStyle: "table",
    fillEmptyRows: true,
    headerStyle: "false",
    footerStyle: "false",
    mode: WebGridPagerModes.All,
    columns: grid.Columns
         //if else condition to check email id
             grid.Column("Email",format: (item) =>
                 if (item.emailid == null)
                     return Html.Raw("Email not available");
                     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")));
                         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>)

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.