ASP.NET MVC : If condition in Foreach loop Razor view

In this article I am going to explain how to use if condition in Foreach loop of Razor loop in asp.net MVC.

Description:

I am showing list of employees with their information like name, email, phone no., image etc. Information of some employees is not available. So I want to show a message if value is null in foreach loop.

Implementations:

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; }

    }

Add controller

Add an empty controller to project. Create an index method to get employee from database.

Complete code of Controller:

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Entity;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using mvctest2017.Models;

using PagedList; 

namespace mvctest2017.Controllers

{

    public class EmployeeController : Controller

    {

        private DemoEntities db = new DemoEntities();

        //

        // GET: /Employee/

        public ActionResult Index()

        {

            return View(db.Employees.ToList());

        }

     

    }

}

Add view

Now add a view for Index action. E.g. to use if condition:

@if (item.EmailId != null)

                {

                    @Html.DisplayFor(modelItem => item.EmailId)

                }

                else

                {

                    <span style="color:red">Email not available</span>

                }

Complete code of view (Index.cshtml)

@model IEnumerable<mvctest2017.Models.Employee>

@{

    ViewBag.Title = "ASP.NET MVC : If condition in Foreach loop Razor view";

}

<table>

    <tr>

        <th><input id="checkAll" type="checkbox" /></th>

        <th>

            @Html.DisplayNameFor(model => model.Name)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Phone)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Salary)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Department)

        </th>

        <th>

            Image

        </th>

        <th>

            Email

        </th>

        <th>Action</th>

    </tr>

    @foreach (var item in Model)

    {

        <tr>

            <td><input type="checkbox" class="chkbox" value="@item.Id" /></td>

            <td>

                @Html.DisplayFor(modelItem => item.Name)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Phone)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Salary)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Department)

            </td>

            <td>

                @if (item.ImagePath != null)

                {

                    <img src="@Url.Content(item.ImagePath)" alt="aspmantra.com" height="100px" width="100px" />

                }

                else

                {

                    <img src="@Url.Content("~/images/image.jpg")" alt="aspmantra.com" height="100px" width="100px" />

                }

            </td>

            <td>

                @if (item.EmailId != null)

                {

                    @Html.DisplayFor(modelItem => item.EmailId)

                }

                else

                {

                    <span style="color:red">Email not available</span>

                }

            </td>

            <td>

                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |

                @Html.ActionLink("Details", "Details", new { id = item.Id }) |

                @Html.ActionLink("Delete", "Delete", new { id = item.Id })

            </td>

        </tr>

    }

</table>

<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script>

    $(document).ready(function () {

        $("#checkAll").click(function () {

            if (this.checked) {

                $(".chkbox").prop('checked', $(this).prop('checked', true));

            }

            else {

                $('.chkbox').each(function () { this.checked = false; });

            }

        });

        $('.chkbox').on('click', function () {

            if ($('.chkbox:checked').length == $('.chkbox').length) {

                $('#checkAll').prop('checked', true);

            } else {

                $('#checkAll').prop('checked', false);

            }

        });

    });

</script>