Friday, July 21, 2017

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>




No comments:

Post a Comment