Employee System Application using ASP.net MVC

Employee System is basic application build from the ASP.net MVC. It’s a starting point to know what you can build from ASP.net MVC with cleaner code.I am using the Static List data for the simplicity and to know how to use LINQ in different Scenario.

Employee System Application using ASP.net MVC

Objective

Employee System is basic application build from the ASP.net MVC. It's a starting point to know what you can build from ASP.net MVC with cleaner code. It has the Create, Edit, View Detail and Delete functionality. I am using the Static List data for the simplicity and to know how to use LINQ in different Scenario.

Below is the screen shot which you will be building today.

Employee System Application using ASP.net MVC

Employee System Application using ASP.net MVC

Figure 1
You'll learn today

1. How to create ASP.net MVC Application
2. How to use Controller, View and Model
3. How to use Razor View Engine and Razor Syntax
4. How to query the data using LINQ

Create ASP.net MVC Application

Now let's dive into how to create ASP.net MVC Application using Visual Studio 2010 or 2012. Here i am using VS 2012 but you can create using 2010 also. Create new Project and Choose ASP.net MVC template from dialog box and create Intranet based application as Shown I below figure.

Employee System Application using ASP.net MVC

Let's start with Listing (Index) controller which will display the List of Employee as show in Figure 1. Create controller called EmployeeController.cs under the Controllers folder in visual studio. EmployeeController will have all our ActionResult or ViewResult for Create, Edit, Delete and View Details actions.

Index ActionResult in controller


namespace EmployeeInfo.Controllers
{
    public class EmployeeController : Controller
    {
        //
        // GET: /Employee/

        public ActionResult Index()
        {
            IEnumerable lstEmp = null;
            if (Employee.EmpDB == null)
            {
                lstEmp = new List{
                new Employee{EmployeeID=2,EmpName="Amit",EmpSalary=600,EmpPhone="670-560-456",EmpAddress="World"},
                new Employee{EmployeeID=3,EmpName="Manish",EmpSalary=800,EmpPhone="671-561-456",EmpAddress="World"},
                new Employee{EmployeeID=4,EmpName="Rahul",EmpSalary=900,EmpPhone="672-562-456",EmpAddress="World"},
                new Employee{EmployeeID=1,EmpName="Soni",EmpSalary=2900,EmpPhone="673-563-456",EmpAddress="World"},
                new Employee{EmployeeID=5,EmpName="Sonali",EmpSalary=3900,EmpPhone="674-564-456",EmpAddress="World"}
            };
            }
            else
            {
                lstEmp = Employee.EmpDB;
            }

            Employee.EmpDB = lstEmp;
            return View(Employee.EmpDB.OrderBy(s => s.EmployeeID));
            
        }
   }
}

In above listing we are using the Employee Model class to store Employee details. Employee model class has the below properties and methods which we will be using throughout our application. Create Empployee.cs class under the models folder in Visual Studio and paste the below code in that class.

Model

Employee.cs


using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace EmployeeInfo.Models
{
    public class Employee
    {
        [Required(ErrorMessage="Employee ID is Required")]
        [Display(Name="Employee ID")]
        public int EmployeeID { get; set; }
        
        [Display(Name = "Employee Name")]
        public string EmpName { get; set; }
        
        [Display(Name = "Employee Address")]
        public string EmpAddress { get; set; }
        
        [Display(Name = "Employee Phone")]
        public string EmpPhone { get; set; }

        [Display(Name = "Employee Salary")]
        [Range(1000,5000,ErrorMessage="The salary should be in between {1} and {2}")]
        [DataType(DataType.Currency)]
        public double EmpSalary { get; set; }

        private static IEnumerable _EmpData;
        public static IEnumerable EmpDB
        {
            get
            {
                return _EmpData;
            }
            set
            {
                _EmpData = value;
            }
        }

        public Employee()
        {
           //Nothing to do here for now
        }

        public static Employee getEmpDetail(Int32 id) {

            IEnumerable lstEmp = Employee.EmpDB;
            Employee emp = (Employee)(from e in lstEmp
                                      where e.EmployeeID == id
                                      select e).FirstOrDefault();
            return emp;
        }
    }
}

Let me take some time to explain our Model class. As you can see we have some set of properties which will hold our Employee data. If you notice we are using the Annotations (Attributes) for Validations, Messages for each property. In MVC we can annotate the Model for the Error messages, validations and so on.

All the annotations are defined in using System.ComponentModel.DataAnnotations namespace.

Views

We have two important pieces in place i.e. Controller and Model. Now we need UI which can display the List of Employees with some Actions Links. In MVC, View is used to display the UI components and renders the HTML output.

In MVC the view has the same name as your controller action has as per the convention which is really handy. Index is the controller action so we will have index.cshtml as View. If you have controller then in Visual Studio 2012 right click on the Index action result, it will give you context menu to add view as shown below

Click on Add View menu and it will open the box as shown below with Index as the View name by convention. Choose View Engine as Razor as we will be focusing on this engine in this tutorial.

Select the Create a strongly-typed view as we will be using Model which is already described above. You can leave layout manager empty or choose one which you want to use in your application as shown below.

Employee System Application using ASP.net MVC

It will create Index.cshtml view page.

Index.cshtml


@using EmployeeInfo.Models

@model IEnumerable<Employee>
@{
   
    Layout = @Url.Content("~/Views/Shared/_Layout.cshtml");
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>

        <div>
         @* @MyHelpers.Employees(Model) *@
             <h1>Employee Information</h1>
            <p>
                @Html.ActionLink("Create New", "Create")
            </p>
            <table border="1" style="background-color:#b6ff00;">    
                <thead>
                    <tr>
                        <th class="th">
                            @Html.Label("Employee Id")
                        </th>
                        <th class="th">
                            @Html.Label("Employee Name")
                        </th>
                        <th class="th">
                            @Html.Label("Employee Address")
                        </th>
                        <th class="th">
                            @Html.Label("Employee Phone")
                        </th>
                        <th class="th">
                            @Html.Label("Employee Salary")
                        </th>
                        <th>
                            @Html.Label("Action")
                        </th>
                    </tr>
                </thead>
        @foreach(var emp in Model){
            <text>

                <tr>
                    <td>
                        @emp.EmployeeID
                    </td>
                    <td>
                        @emp.EmpName
                    </td>
                    <td>
                        @emp.EmpAddress
                    </td>
                    <td>
                        @emp.EmpPhone
                    </td>
                    <td>
                        ($@emp.EmpSalary)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit",new { id = @emp.EmployeeID })
                        @Html.ActionLink("Delete", "Delete",new { id = @emp.EmployeeID })
                        @Html.ActionLink("Details", "Details", new { id = @emp.EmployeeID })
                    </td>
                </tr>
            
            </text>
        }
                </table>
        </div>       
    
</body>
</html>

Note: I have given overview of Razor view engine and Razor syntax in my previous article here. Please take some time to go over that.

Let's take one step ahead and finish all the actions in controller class for Create, Edit, Delete and Details.

On Create

Logically when we call the create action it should add the employee in our list and display the results with the new data.

On Edit

On edit we are going to edit the details of the employee except its ID. Here we have the static data so i am removing and adding the updated data in our list for simplicity.

On Delete
On Delete action we will be removing the employee from the list and go back to the list page with updated data.

On Details

Detail View is just to display the employee information in form manner instead as list.

You can update the project as per your requirement and to learn different aspects of the MVC model here.

In all of the scenarios I have used LINQ to query the data from the List as I like LINQ now.

Controller Class EmployeeController.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using EmployeeInfo.Models;

namespace EmployeeInfo.Controllers
{
    public class EmployeeController : Controller
    {
        //
        // GET: /Employee/

        public ActionResult Index()
        {
            IEnumerable lstEmp = null;
            if (Employee.EmpDB == null)
            {
                lstEmp = new List{
                new Employee{EmployeeID=2,EmpName="Amit",EmpSalary=600,EmpPhone="670-560-456",EmpAddress="World"},
                new Employee{EmployeeID=3,EmpName="Manish",EmpSalary=800,EmpPhone="671-561-456",EmpAddress="World"},
                new Employee{EmployeeID=4,EmpName="Rahul",EmpSalary=900,EmpPhone="672-562-456",EmpAddress="World"},
                new Employee{EmployeeID=1,EmpName="Soni",EmpSalary=2900,EmpPhone="673-563-456",EmpAddress="World"},
                new Employee{EmployeeID=5,EmpName="Sonali",EmpSalary=3900,EmpPhone="674-564-456",EmpAddress="World"}
            };
            }
            else
            {
                lstEmp = Employee.EmpDB;
            }

            Employee.EmpDB = lstEmp;
            return View(Employee.EmpDB.OrderBy(s => s.EmployeeID));
        }

        //
        // GET: /Employee/Details/Id

        public ActionResult Details(Int32 id = 0)
        {
            
            Employee emp = Employee.getEmpDetail(id);
            if (emp != null)
            {
                return View(emp);
            }
            else
            {
                return HttpNotFound("Employee Not found !!!");
            }
        }

        // GET: /Employee/Create
        public ActionResult Create()
        {
            return View();
        }

        //POST :/Employee/Create
        [HttpPost]
        public ActionResult Create(Employee emp)
        {
            if (ModelState.IsValid)
            {
                ((List)Employee.EmpDB).Add(emp);
                return RedirectToAction("Index");
            }
            return View(emp);
        }

        //POST :/Employee/Delete
        
        public ActionResult Delete(Int32 id)
        {
            Employee emp = Employee.getEmpDetail(id);
            if (emp != null)
            {
                ((List)Employee.EmpDB).Remove(emp);
                return View("Index", Employee.EmpDB);
            }
            else
            {
                return HttpNotFound("Employee Not found !!!");
            }
            
        }

        //Get: /Employee/Edit
        [HttpPost]
        public ActionResult Edit(Employee emp)
        {
            if (ModelState.IsValid)
            {
                int id = emp.EmployeeID;
                Employee empd = Employee.getEmpDetail(id);
                ((List)Employee.EmpDB).Remove(empd);
                ((List)Employee.EmpDB).Add(emp);
                return RedirectToAction("Index");
            }
            return View(emp);
        }

        //POST: /Employee/Edit/1
        [HttpGet]
        public ActionResult Edit(Int32 id)
        {
            Employee emp = Employee.getEmpDetail(id);
            if (emp != null)
            {
                return View(emp);
            }
            else
            {
                return HttpNotFound("Employee Not found !!!");
            }
        }

    }
}

View Classes

Create.cshtml


@model EmployeeInfo.Models.Employee

@{
    Layout = @Url.Content("~/Views/Shared/_Layout.cshtml");
}

<!DOCTYPE html>

<html>
<head>
    <title>Create</title>
    <script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
</head>
<body>
    <div>
         <h2>Employee Detail</h2>
    </div>
     @using(@Html.BeginForm()){   
    <p> @Html.ValidationSummary(true,"Please fix the following errors") </p>
    <div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmployeeID)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmployeeID)
              @Html.ValidationMessageFor(m => m.EmployeeID)
        </div>
        
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpName)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmpName)
              @Html.ValidationMessageFor(m => m.EmpName)
        </div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpAddress)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m => m.EmpAddress)
              @Html.ValidationMessageFor(m => m.EmpAddress)
        </div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpPhone)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmpPhone)
              @Html.ValidationMessageFor(m => m.EmpPhone)
        </div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpSalary)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmpSalary)
              @Html.ValidationMessageFor(m => m.EmpSalary)
        </div>
    </div>
        <p>
            <input type="submit" value="Create" />
        </p>
     }
    <p>
        @Html.ActionLink("Back to List", "Index");
    </p>
</body>
</html>

When you click on the Create New link on the first page, It will call the Create action from the controller and render the View associated with that controller i.e. Create.cshtml. The HTML output will look like as shown below.

Employee System Application using ASP.net MVC

You can provide the data and hit create button which will call the POST action i.e. public ActionResult Create(Employee emp) which will pass the Employee form data back to your controller.

Edit.cshtml


@model EmployeeInfo.Models.Employee

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<head>
    <title>Edit</title>
    <script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
</head>
<body>
    <div>
         <h2>Edit Employee Detail</h2>
    </div>
     @using(@Html.BeginForm()){   
    <p> @Html.ValidationSummary(true,"Please fix the following errors") </p>
    <div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmployeeID)
        </div>
        <div class="editor-field">
              @Html.TextBoxFor(m => m.EmployeeID, new { @readonly = "readonly" })
              @Html.ValidationMessageFor(m => m.EmployeeID)
        </div>
        
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpName)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmpName)
              @Html.ValidationMessageFor(m => m.EmpName)
        </div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpAddress)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m => m.EmpAddress)
              @Html.ValidationMessageFor(m => m.EmpAddress)
        </div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpPhone)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmpPhone)
              @Html.ValidationMessageFor(m => m.EmpPhone)
        </div>
        <div class="editor-label">
             @Html.LabelFor(m => m.EmpSalary)
        </div>
        <div class="editor-field">
              @Html.EditorFor(m =>m.EmpSalary)
              @Html.ValidationMessageFor(m => m.EmpSalary)
        </div>
    </div>
        <p>
            <input type="submit" value="Edit" />
        </p>
     }
    <p>
        @Html.ActionLink("Back to List", "Index");
    </p>
</body>
</html>

When you click on the Edit link for that employee, It will call the GET edit action from the controller and render the View associated with that controller i.e. Edit.cshtml. The HTML output will look like as shown below.

Employee System Application using ASP.net MVC

You can update the data and hit Edit button which will call the POST action i.e. public ActionResult Edit(Employee emp) which will pass the Employee form data back to your controller.

Details.cshtml



@model EmployeeInfo.Models.Employee

@{
    Layout = @Url.Content("~/Views/Shared/_Layout.cshtml");
}

<!DOCTYPE html>

<html>
<head>
    <title>Details</title>
</head>
<body>
    <h2>Employee Details for @Model.EmpName</h2>
    <div>
        <pre class="editor-label">@Html.LabelFor(m => m.EmployeeID) : @Html.TextBox("EmployeeID", Model.EmployeeID, new { @readonly = "readonly" })</pre>
        <pre class="editor-label">@Html.LabelFor(m => m.EmpName)    : @Html.TextBox("EmployeeID", Model.EmpName, new { @readonly = "readonly" })</pre>
        <pre class="editor-label">@Html.LabelFor(m => m.EmpAddress) : @Html.TextBox("EmployeeID", Model.EmpAddress, new { @readonly = "readonly" })</pre>
        <pre class="editor-label">@Html.LabelFor(m => m.EmpPhone)   : @Html.TextBox("EmployeeID", Model.EmpPhone, new { @readonly = "readonly" })</pre>
        <pre class="editor-label">@Html.LabelFor(m => m.EmpSalary)  : @Html.TextBox("EmployeeID", Model.EmpSalary, new { @readonly = "readonly" })</pre>

    </div>
     <p>
        @Html.ActionLink("Back to List", "Index")
    </p>
</body>
</html>

When you click on the Details link for that employee, It will call the GET detail action from the controller and render the View associated with that controller i.e. Details.cshtml. The HTML output will look like as shown below.

Employee System Application using ASP.net MVC

Employee System Application using ASP.net MVC