MVC Crud Operation with Interfaces and Repository Pattern with ADO.Net

Step 1: Open the SQL Server and create a database table and related stored procedure. 

/* Create Table Customer */  

CREATE TABLE [dbo].[Customers](

	[CustomerId] [int] IDENTITY(1,1) NOT NULL,

	[FirstName] [nvarchar](250) NULL,

	[LastName] [nvarchar](250) NULL,

	[Phone] [nvarchar](20) NULL,

	[Email] [nvarchar](250) NULL,

	[Street] [nvarchar](250) NULL,

	[City] [nvarchar](250) NULL,

	[State] [nvarchar](250) NULL,

	[Zipcode] [nvarchar](10) NULL,

 CONSTRAINT [PK_Customers] PRIMARY KEY CLUSTERED 

(

[CustomerId] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

/* TO GET Customer BY ID  */  

CREATE procedure [dbo].[GetCustomersById]

@CustomerId int 

 as 

 begin



Select * from Customers

where CustomerId=@CustomerId 

end    

/* TO Create New Customer */

create procedure [dbo].[InsertCustomers]

 @FirstName nvarchar(250),

 @LastName  nvarchar(250),

 @Phone  nvarchar(20),

 @Email  nvarchar(250),

 @Street  nvarchar(250),

 @City  nvarchar(250),

 @State  nvarchar(250),

 @Zipcode  nvarchar(10)

 as 

 begin

 insert into Customers (FirstName,LastName,Phone,Email,Street,City,State,Zipcode) values (@FirstName,@LastName,@Phone,@Email,@Street,@City,@State,@Zipcode)

end    

/* TO UPDATE Customer */  

create procedure [dbo].[UpdateCustomers]

 @CustomerId int , 

 @FirstName nvarchar(250),

 @LastName  nvarchar(250),

 @Phone  nvarchar(20),

 @Email  nvarchar(250),

 @Street  nvarchar(250),

 @City  nvarchar(250),

 @State  nvarchar(250),

 @Zipcode  nvarchar(10)

 as 

 begin

update Customers set  FirstName=@FirstName,LastName=@LastName,Phone=@Phone,Email=@Email,Street=@Street,City=@City,State=@State,Zipcode=@Zipcode where CustomerId=@CustomerId 

end 

/* T0 Delete Customer */ 

create procedure [dbo].[DeleteCustomers]

 @CustomerId int 

 as 

 begin

delete Customers where CustomerId=@CustomerId 

end    

/* To Get All Customer */ 

CREATE procedure [dbo].[GetCustomers]

 as 

 begin

Select * from Customers

end 

Step 2: Create a project 

1. Start Visual Studio 2017 or 2015.
   
2. Create a new project  -> Web -> Visual Studio 2017.

    3. Select ASP.NET Web Application(.Net Framework).

    4.Provide the Name and Location for the project and click Next.

    5. Choose an "Empty" template and check "MVC" under "Add folders & core references"  then click Ok.

Step 3: Right-click on the Models folder select "Add" then  "Choose a class" window will appear. From that window, select Visual C# and Class then give a class name as "Customer.cs" Then click "Add".

Customer Class

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

namespace MvcWithRepositry.Models
{
    public class Customer
    {

        public int CustomerId { get; set; }

        [Required]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required]
        [Display(Name = "Phone")]
        public string Phone { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Street")]
        public string Street { get; set; }

        [Required]
        [Display(Name = "City")]
        public string City { get; set; }

        [Required]
        [Display(Name = "State")]
        public string State { get; set; }

        [Required]
        [Display(Name = "Zipcode")]
        public string Zipcode { get; set; }
    }
}

Step 4: Right-click on the project "Add" folder name  Repository  then Right-click on the Repository  folder select "Add" then  "Choose a class" window will appear. From that window, select Visual C# and  then see on right side Class will display  select class and then give a class name as "RespoCustomer.cs" Then click "Add". and after that again right click on Repository  folder "Add" an interface ICustomer.cs .

ICustomer interface

using MvcWithRepositry.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MvcWithRepositry.Repository
{
    interface ICustomer
    {
        IList<Customer> GetCustomers();
        Customer GetCustomerById(int? id);
        void InsertCustomer(Customer customer);
        void UpdateCustomer(Customer customer);
        void DeleteCustomer(int? id);


    }
}

RespoCustomer Class

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using MvcWithRepositry.Models;

namespace MvcWithRepositry.Repository
{
    public class RespoCustomer : ICustomer
    {
        private readonly string CS = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;

        public void DeleteCustomer(int? id)
        {
            using (SqlConnection con = new SqlConnection(CS))
            {
                var cmd = new SqlCommand("DeleteCustomers", con);
                cmd.CommandType = CommandType.StoredProcedure;
                con.Open();
                cmd.Parameters.AddWithValue("@CustomerId", id);
                cmd.ExecuteNonQuery();
            }
        }

        public Customer GetCustomerById(int? id)
        {
            Customer customers = new Customer();
            using (SqlConnection con = new SqlConnection(CS))
            {
                SqlCommand cmd = new SqlCommand("GetCustomersById", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("CustomerId", id);
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {

                    customers.CustomerId = Convert.ToInt32(rdr["CustomerId"]);
                    customers.FirstName = Convert.ToString(rdr["FirstName"]);
                    customers.LastName = Convert.ToString(rdr["LastName"]);
                    customers.Phone = Convert.ToString(rdr["Phone"]);
                    customers.Email = Convert.ToString(rdr["Email"]);
                    customers.Street = Convert.ToString(rdr["Street"]);
                    customers.City = Convert.ToString(rdr["City"]);
                    customers.State = Convert.ToString(rdr["State"]);
                    customers.Zipcode = Convert.ToString(rdr["Zipcode"]);
                     
                }
                return customers;
            }
        }

        public IList<Customer> GetCustomers()
        {
            List<Customer> customers = new List<Customer>();
            using (SqlConnection con = new SqlConnection(CS))
            {
                SqlCommand cmd = new SqlCommand("GetCustomers", con);
                cmd.CommandType = CommandType.StoredProcedure;
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    var customer = new Customer()
                    {
                        CustomerId = Convert.ToInt32(rdr["CustomerId"]),
                        FirstName = Convert.ToString(rdr["FirstName"]),
                        LastName = Convert.ToString(rdr["LastName"]),
                        Phone = Convert.ToString(rdr["Phone"]),
                        Email = Convert.ToString(rdr["Email"]),
                        Street = Convert.ToString(rdr["Street"]),
                        City = Convert.ToString(rdr["City"]),
                        State = Convert.ToString(rdr["State"]),
                        Zipcode = Convert.ToString(rdr["Zipcode"]),
                    };

                    customers.Add(customer);
                }
                return (customers);
            }
        }

        public void InsertCustomer(Customer customer)
        {
            using (SqlConnection con = new SqlConnection(CS))
            {
                var cmd = new SqlCommand("InsertCustomers", con);
                con.Open();
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@FirstName", customer.FirstName);
                cmd.Parameters.AddWithValue("@LastName", customer.LastName);
                cmd.Parameters.AddWithValue("@Phone", customer.Phone);
                cmd.Parameters.AddWithValue("@Email", customer.Email);
                cmd.Parameters.AddWithValue("@Street", customer.Street);
                cmd.Parameters.AddWithValue("@City", customer.City);
                cmd.Parameters.AddWithValue("@State", customer.State);
                cmd.Parameters.AddWithValue("@Zipcode", customer.Zipcode);
                cmd.ExecuteNonQuery();
            }
        }

        public void UpdateCustomer(Customer customer)
        {
            using (SqlConnection con = new SqlConnection(CS))
            {
                var cmd = new SqlCommand("UpdateCustomers", con);
                con.Open();
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@CustomerId", customer.CustomerId);
                cmd.Parameters.AddWithValue("@FirstName", customer.FirstName);
                cmd.Parameters.AddWithValue("@LastName", customer.LastName);
                cmd.Parameters.AddWithValue("@Phone", customer.Phone);
                cmd.Parameters.AddWithValue("@Email", customer.Email);
                cmd.Parameters.AddWithValue("@Street", customer.Street);
                cmd.Parameters.AddWithValue("@City", customer.City);
                cmd.Parameters.AddWithValue("@State", customer.State);
                cmd.Parameters.AddWithValue("@Zipcode", customer.Zipcode);
                cmd.ExecuteNonQuery();
            }
        }
    }
}

Step 5: Open on Web Config file and add database connection string.

<connectionStrings>
    <add name="connectionString" connectionString="data source=SHUBHAM\SQLEXPRESS; database=CrudMVC; integrated security=true;" providerName="System.Data.SqlClient"/>
  </connectionStrings>

Step 6: Now right click on controllers folder and Add controller   A window will appear. Choose  MVC5 Controller with read/write actions and click "Add".
After clicking on "Add", another window will appear with DefaultController. Change the name to CustomerController and click "Add". The CustomerController will be added under the Controllers folder.

Complete code of controller Class

using MvcWithRepositry.Models;
using MvcWithRepositry.Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace MvcWithRepositry.Controllers
{
    public class EmployeeController : Controller
    {
        private readonly RespoCustomer respocustomer = new RespoCustomer();

        // GET: Employee
        public ActionResult Index()
        {
            var customers = respocustomer.GetCustomers();
            return View(customers);
        }

        // GET: Employee/Details/5
        public ActionResult Details(int? id)
        {
            var employee = respocustomer.GetCustomerById(id);
            return View(employee);
        }

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

        // POST: Employee/Create
        [HttpPost]
        public ActionResult Create(Customer customer)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    respocustomer.InsertCustomer(customer);
                    return RedirectToAction("Index");
                }
                return View("Create", customer);
            }
            catch (Exception ex)
            {
                return View();
            }
        }

        // GET: Employee/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            var customer = respocustomer.GetCustomerById(id);
            if (customer == null)
            {
                return HttpNotFound();
            }
            return View(customer);
        }

        // POST: Employee/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(Customer customer)
        {
            try
            {
                respocustomer.UpdateCustomer(customer);
                return RedirectToAction("Index", "Employee");
            }
            catch
            {
                return View();
            }
        }

        // GET: Employee/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            var customers = respocustomer.GetCustomerById(id);
            if (customers == null)
            {
                return HttpNotFound();
            }
            return View(customers);
        }

        // POST: Employee/Delete/5
        [HttpPost, ActionName("Delete")]
        public ActionResult Deletes(int id)
        {
            try
            {

                respocustomer.DeleteCustomer(id);
                return RedirectToAction("Index", "Employee");
            }
            catch (Exception ex)
            {
                return View("Index");
            }
        }
    }
}

Step 7: Right-click on the Index method in EmployeeController. The "Add View" window will appear with default index name checked (use a Layout page). Click on "Add.

Index View

@model List<MvcWithRepositry.Models.Customer>
@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>Customer Details</h3>
<table id="example" class="table table-striped" style="margin-top: 25px;">
    <thead class="mdb-color darken-3">
        <tr class="text-white">
            <th>@Html.DisplayNameFor(model => model[0].FirstName)</th>
            <th>@Html.DisplayNameFor(model => model[0].LastName)</th>
            <th>@Html.DisplayNameFor(model => model[0].Phone)</th>
            <th>@Html.DisplayNameFor(model => model[0].Email)</th>
            <th>@Html.DisplayNameFor(model => model[0].Street)</th>
            <th>@Html.DisplayNameFor(model => model[0].City)</th>
            <th>@Html.DisplayNameFor(model => model[0].State)</th>
            <th>@Html.DisplayNameFor(model => model[0].Zipcode)</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.FirstName</td>
                <td>@item.LastName</td>
                <td>@item.Phone</td>
                <td>@item.Email</td>
                <td>@item.Street</td>
                <td>@item.City</td>
                <td>@item.State</td>
                <td>@item.Zipcode</td>
                <td>
                    <a href="@Url.Action("Details","Employee",new { id=item.CustomerId})" class="btn btn-sm btn-primary"><i class="fa fa-eye"></i></a>
                    <a href="@Url.Action("Edit","Employee",new { id=item.CustomerId})" class="btn btn-sm btn-info"><i class="fa fa-pencil-square"></i></a>
                    <a href="@Url.Action("Delete","Employee",new { id=item.CustomerId})" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i></a>
                </td>
            </tr>
        }
    </tbody>
</table>

<div>
    <a href="@Url.Action("Create","Employee")" class="btn btn-sm btn-primary">Create Customer</a>

</div>

Step 8: Now similarly right click on Details of ActionResult choose "Add View" and click on it. Now you will get another window which has default view name as ActionResult name. Checked Use a lay page and click on "Add".

Details View

@model MvcWithRepositry.Models.Customer

@{
    ViewBag.Title = "Customers Details";
}

<div>
    <h3>Customer Details</h3>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.FirstName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.LastName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Phone)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Phone)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Email)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Email)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Street)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Street)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.City)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.City)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.State)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.State)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Zipcode)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Zipcode)
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.CustomerId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Step 9: Now click on Create of ActionResult choose "Add View" and click on it. Now you will get another window that has a default view name as ActionResult name. Checked Use a layout page and click on "Add".

Create View

@model MvcWithRepositry.Models.Customer

@{
    ViewBag.Title = "Create";
}

<h3>Add Customer</h3>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
  
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Street, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Street, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Zipcode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Zipcode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Zipcode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Step 10: Right click on Edit of ActionResult choose “Add View” and click on it. Now you will get another window which has default view name as ActionResult name. Checked Use a layout page and click on “Add”.

Edit View

@model MvcWithRepositry.Models.Customer

@{
    ViewBag.Title = "Edit";
}

<h3>Customer Edit</h3>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
 
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.CustomerId)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Street, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Street, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Zipcode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Zipcode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Zipcode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

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

Delete View

@model MvcWithRepositry.Models.Customer

@{
    ViewBag.Title = "Delete";
}

<h2>Customer Delete</h2>

<h4>Are you sure you want to delete this?</h4>
<div>
    
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.FirstName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.LastName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Phone)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Phone)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Email)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Email)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Street)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Street)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.City)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.City)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.State)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.State)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Zipcode)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Zipcode)
        </dd>

    </dl>

    @using (Html.BeginForm("Delete", "Employee", FormMethod.Post, new { id = "DeleteCustomer", enctype = "multipart/form-data", name = "Delete" }))
    {

        @Html.AntiForgeryToken()

        <div class="form-actions no-color">
            <input type="submit" value="Delete" id="Delete" formmethod="post" name="command" class="btn btn-default" /> |
            @Html.ActionLink("Back to List", "Index")
        </div>
    }
    <div id="DeleteDialog">You really want to delete?</div>

    @section scripts{
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(document).ready(function () {
                debugger;
                $("#DeleteDialog").dialog({
                    height: 280,
                    modal: true,
                    autoOpen: false,
                    buttons: {
                        'Confirm': function () {
                            $("#DeleteCustomer").submit();
                            $(this).dialog('close');
                        },
                        'Cancel': function () {
                            $(this).dialog('close');
                        }
                    }
                });

                $("#DeleteDialog").hide();
                $("#Delete").click(function (e) {
                    debugger;
                    $("#DeleteDialog").dialog("open");
                    e.preventDefault();
                    return false;
                });


            });

        </script>
    }
</div>

Step 12: Build your project and run by pressing ctrl+F5

The Final Output