Condition statement example on MVC Webgrid column - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework 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

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>)
   )
     )



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.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon