ASP.NET

Database First Approach With ASP.NET MVC Step By Step Part 3

You can visit the previous part of the article from the following links:

Create User Interface

We have added database with tables and also implemented it with Entity Data Model which has been created model classes. So, it is time to create User Interface [Views] which will used to perform user operation like here we can add data, select data, edit data and also delete data.

To add new controller, Right click on Controller folder and choose Add and then choose Add Scaffolded Item.

Add Scaffolded Item

It will open an Add Scaffold window, Here we need to choose the Controller type. Here we need to choose MVC5 Controller with views, using Entity Framework and choose Add.

MVC5 Controller

From the Add Controller window, we need to select the Model Class and Data Context Class. We can also select layout page. In the Controller Name section, we can provide the specific name for the controller "EmployeeController".

Add controller

When we click on Ok. It will Scaffold and create the EmployeeController as well as Views for Employee Controller.

Note: If you don't make build before scaffolding then it will generate the error as in the following.

Error

So, It will create EmployeeController with the following code. In this code you can see that here all the operations has been defined by default. From database instance creation to getting data, deleting data, editing data, etc everything has been defined by the code.

EmployeeController.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.Entity;  
  5. using System.Linq;  
  6. using System.Net;  
  7. using System.Web;  
  8. using System.Web.Mvc;  
  9. using DatabaseFirstDemo.Models;  
  10.   
  11. namespace DatabaseFirstDemo.Controllers  
  12. {  
  13.     public class EmployeeController : Controller  
  14.     {  
  15.         private TestDemoEntities db = new TestDemoEntities();  
  16.   
  17.         // GET: Employee  
  18.         public ActionResult Index()  
  19.         {  
  20.             var employees = db.Employees.Include(e => e.Department);  
  21.             return View(employees.ToList());  
  22.         }  
  23.   
  24.         // GET: Employee/Details/5  
  25.         public ActionResult Details(int? id)  
  26.         {  
  27.             if (id == null)  
  28.             {  
  29.                 return new HttpStatusCodeResult(HttpStatusCode.BadRequest);  
  30.             }  
  31.             Employee employee = db.Employees.Find(id);  
  32.             if (employee == null)  
  33.             {  
  34.                 return HttpNotFound();  
  35.             }  
  36.             return View(employee);  
  37.         }  
  38.   
  39.         // GET: Employee/Create  
  40.         public ActionResult Create()  
  41.         {  
  42.             ViewBag.DepartmentId = new SelectList(db.Departments, "DepartmentId", "DepartmentName");  
  43.             return View();  
  44.         }  
  45.   
  46.         // POST: Employee/Create  
  47.         // To protect from overposting attacks, please enable the specific properties you want to bind to, for   
  48.         // more details see http://go.microsoft.com/fwlink/?LinkId=317598.  
  49.         [HttpPost]  
  50.         [ValidateAntiForgeryToken]  
  51.         public ActionResult Create([Bind(Include = "Id,Name,Email,Age,Address,DepartmentId")] Employee employee)  
  52.         {  
  53.             if (ModelState.IsValid)  
  54.             {  
  55.                 db.Employees.Add(employee);  
  56.                 db.SaveChanges();  
  57.                 return RedirectToAction("Index");  
  58.             }  
  59.   
  60.             ViewBag.DepartmentId = new SelectList(db.Departments, "DepartmentId", "DepartmentName", employee.DepartmentId);  
  61.             return View(employee);  
  62.         }  
  63.   
  64.         // GET: Employee/Edit/5  
  65.         public ActionResult Edit(int? id)  
  66.         {  
  67.             if (id == null)  
  68.             {  
  69.                 return new HttpStatusCodeResult(HttpStatusCode.BadRequest);  
  70.             }  
  71.             Employee employee = db.Employees.Find(id);  
  72.             if (employee == null)  
  73.             {  
  74.                 return HttpNotFound();  
  75.             }  
  76.             ViewBag.DepartmentId = new SelectList(db.Departments, "DepartmentId", "DepartmentName", employee.DepartmentId);  
  77.             return View(employee);  
  78.         }  
  79.   
  80.         // POST: Employee/Edit/5  
  81.         // To protect from overposting attacks, please enable the specific properties you want to bind to, for   
  82.         // more details see http://go.microsoft.com/fwlink/?LinkId=317598.  
  83.         [HttpPost]  
  84.         [ValidateAntiForgeryToken]  
  85.         public ActionResult Edit([Bind(Include = "Id,Name,Email,Age,Address,DepartmentId")] Employee employee)  
  86.         {  
  87.             if (ModelState.IsValid)  
  88.             {  
  89.                 db.Entry(employee).State = EntityState.Modified;  
  90.                 db.SaveChanges();  
  91.                 return RedirectToAction("Index");  
  92.             }  
  93.             ViewBag.DepartmentId = new SelectList(db.Departments, "DepartmentId", "DepartmentName", employee.DepartmentId);  
  94.             return View(employee);  
  95.         }  
  96.   
  97.         // GET: Employee/Delete/5  
  98.         public ActionResult Delete(int? id)  
  99.         {  
  100.             if (id == null)  
  101.             {  
  102.                 return new HttpStatusCodeResult(HttpStatusCode.BadRequest);  
  103.             }  
  104.             Employee employee = db.Employees.Find(id);  
  105.             if (employee == null)  
  106.             {  
  107.                 return HttpNotFound();  
  108.             }  
  109.             return View(employee);  
  110.         }  
  111.   
  112.         // POST: Employee/Delete/5  
  113.         [HttpPost, ActionName("Delete")]  
  114.         [ValidateAntiForgeryToken]  
  115.         public ActionResult DeleteConfirmed(int id)  
  116.         {  
  117.             Employee employee = db.Employees.Find(id);  
  118.             db.Employees.Remove(employee);  
  119.             db.SaveChanges();  
  120.             return RedirectToAction("Index");  
  121.         }  
  122.   
  123.         protected override void Dispose(bool disposing)  
  124.         {  
  125.             if (disposing)  
  126.             {  
  127.                 db.Dispose();  
  128.             }  
  129.             base.Dispose(disposing);  
  130.         }  
  131.     }  
  132. }  
The following is the structure of the code after adding EmployeeController. We can see here an Employee folder has been added inside the Views and all the views such as, Index.cshtml, edit.cshtml, etc also added.

Solution explorer

So, this is the time of running the project. To run the project Press F5. It will open a tab in your browser as in the following.

ASP.NET

As we have added the Employee controller. So, we need to specify the address of Employee Controller with Index page. Here you can see all the added Employee record with a Create New Button.

Index.cshtml
  1. @model IEnumerable<DatabaseFirstDemo.Models.Employee>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8. <h2>Index</h2>  
  9.   
  10. <p>  
  11.     @Html.ActionLink("Create New", "Create")  
  12. </p>  
  13. <table class="table">  
  14.     <tr>  
  15.         <th>  
  16.             @Html.DisplayNameFor(model => model.Name)  
  17.         </th>  
  18.         <th>  
  19.             @Html.DisplayNameFor(model => model.Email)  
  20.         </th>  
  21.         <th>  
  22.             @Html.DisplayNameFor(model => model.Age)  
  23.         </th>  
  24.         <th>  
  25.             @Html.DisplayNameFor(model => model.Address)  
  26.         </th>  
  27.         <th>  
  28.             @Html.DisplayNameFor(model => model.Department.DepartmentName)  
  29.         </th>  
  30.         <th></th>  
  31.     </tr>  
  32.   
  33. @foreach (var item in Model) {  
  34.     <tr>  
  35.         <td>  
  36.             @Html.DisplayFor(modelItem => item.Name)  
  37.         </td>  
  38.         <td>  
  39.             @Html.DisplayFor(modelItem => item.Email)  
  40.         </td>  
  41.         <td>  
  42.             @Html.DisplayFor(modelItem => item.Age)  
  43.         </td>  
  44.         <td>  
  45.             @Html.DisplayFor(modelItem => item.Address)  
  46.         </td>  
  47.         <td>  
  48.             @Html.DisplayFor(modelItem => item.Department.DepartmentName)  
  49.         </td>  
  50.         <td>  
  51.             @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |  
  52.             @Html.ActionLink("Details", "Details", new { id=item.Id }) |  
  53.             @Html.ActionLink("Delete", "Delete", new { id=item.Id })  
  54.         </td>  
  55.     </tr>  
  56. }  
Create new index
Click on Create New, It will redirect to create new Employee Url, Here we can add new employee record.

Create.cshtml
  1. @model DatabaseFirstDemo.Models.Employee  
  2.   
  3. @{  
  4.     ViewBag.Title = "Create";  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8. <h2>Create</h2>  
  9.   
  10.   
  11. @using (Html.BeginForm())   
  12. {  
  13.     @Html.AntiForgeryToken()  
  14.       
  15.     <div class="form-horizontal">  
  16.         <h4>Employee</h4>  
  17.         <hr />  
  18.         @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
  19.         <div class="form-group">  
  20.             @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  21.             <div class="col-md-10">  
  22.                 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  23.                 @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })  
  24.             </div>  
  25.         </div>  
  26.   
  27.         <div class="form-group">  
  28.             @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })  
  29.             <div class="col-md-10">  
  30.                 @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })  
  31.                 @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })  
  32.             </div>  
  33.         </div>  
  34.   
  35.         <div class="form-group">  
  36.             @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })  
  37.             <div class="col-md-10">  
  38.                 @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })  
  39.                 @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })  
  40.             </div>  
  41.         </div>  
  42.   
  43.         <div class="form-group">  
  44.             @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
  45.             <div class="col-md-10">  
  46.                 @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })  
  47.                 @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })  
  48.             </div>  
  49.         </div>  
  50.   
  51.         <div class="form-group">  
  52.             @Html.LabelFor(model => model.DepartmentId, "DepartmentId", htmlAttributes: new { @class = "control-label col-md-2" })  
  53.             <div class="col-md-10">  
  54.                 @Html.DropDownList("DepartmentId", null, htmlAttributes: new { @class = "form-control" })  
  55.                 @Html.ValidationMessageFor(model => model.DepartmentId, "", new { @class = "text-danger" })  
  56.             </div>  
  57.         </div>  
  58.   
  59.         <div class="form-group">  
  60.             <div class="col-md-offset-2 col-md-10">  
  61.                 <input type="submit" value="Create" class="btn btn-default" />  
  62.             </div>  
  63.         </div>  
  64.     </div>  
  65. }  
  66.   
  67. <div>  
  68.     @Html.ActionLink("Back to List", "Index")  
  69. </div>  
  70.   
  71. @section Scripts {  
  72.     @Scripts.Render("~/bundles/jqueryval")  
  73. }  
Create employee

After adding the record, we can see all the records here. Here some other links are also available to edit the record. Details of record or for deleting the record.

Index
For deleting the record, click on Delete link, It will ask for your confirmation to delete the record. If you will click on Delete again, then it will delete the record finally.

Delete.cshtml
  1. @model DatabaseFirstDemo.Models.Employee  
  2.   
  3. @{  
  4.     ViewBag.Title = "Delete";  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8. <h2>Delete</h2>  
  9.   
  10. <h3>Are you sure you want to delete this?</h3>  
  11. <div>  
  12.     <h4>Employee</h4>  
  13.     <hr />  
  14.     <dl class="dl-horizontal">  
  15.         <dt>  
  16.             @Html.DisplayNameFor(model => model.Name)  
  17.         </dt>  
  18.   
  19.         <dd>  
  20.             @Html.DisplayFor(model => model.Name)  
  21.         </dd>  
  22.   
  23.         <dt>  
  24.             @Html.DisplayNameFor(model => model.Email)  
  25.         </dt>  
  26.   
  27.         <dd>  
  28.             @Html.DisplayFor(model => model.Email)  
  29.         </dd>  
  30.   
  31.         <dt>  
  32.             @Html.DisplayNameFor(model => model.Age)  
  33.         </dt>  
  34.   
  35.         <dd>  
  36.             @Html.DisplayFor(model => model.Age)  
  37.         </dd>  
  38.   
  39.         <dt>  
  40.             @Html.DisplayNameFor(model => model.Address)  
  41.         </dt>  
  42.   
  43.         <dd>  
  44.             @Html.DisplayFor(model => model.Address)  
  45.         </dd>  
  46.   
  47.         <dt>  
  48.             @Html.DisplayNameFor(model => model.Department.DepartmentName)  
  49.         </dt>  
  50.   
  51.         <dd>  
  52.             @Html.DisplayFor(model => model.Department.DepartmentName)  
  53.         </dd>  
  54.   
  55.     </dl>  
  56.   
  57.     @using (Html.BeginForm()) {  
  58.         @Html.AntiForgeryToken()  
  59.   
  60.         <div class="form-actions no-color">  
  61.             <input type="submit" value="Delete" class="btn btn-default" /> |  
  62.             @Html.ActionLink("Back to List", "Index")  
  63.         </div>  
  64.     }  
  65. </div>  
Delete record

To view the single employee details, we need to click on Details link.

Details.cshtml
  1. @model DatabaseFirstDemo.Models.Employee  
  2.   
  3. @{  
  4.     ViewBag.Title = "Details";  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8. <h2>Details</h2>  
  9.   
  10. <div>  
  11.     <h4>Employee</h4>  
  12.     <hr />  
  13.     <dl class="dl-horizontal">  
  14.         <dt>  
  15.             @Html.DisplayNameFor(model => model.Name)  
  16.         </dt>  
  17.   
  18.         <dd>  
  19.             @Html.DisplayFor(model => model.Name)  
  20.         </dd>  
  21.   
  22.         <dt>  
  23.             @Html.DisplayNameFor(model => model.Email)  
  24.         </dt>  
  25.   
  26.         <dd>  
  27.             @Html.DisplayFor(model => model.Email)  
  28.         </dd>  
  29.   
  30.         <dt>  
  31.             @Html.DisplayNameFor(model => model.Age)  
  32.         </dt>  
  33.   
  34.         <dd>  
  35.             @Html.DisplayFor(model => model.Age)  
  36.         </dd>  
  37.   
  38.         <dt>  
  39.             @Html.DisplayNameFor(model => model.Address)  
  40.         </dt>  
  41.   
  42.         <dd>  
  43.             @Html.DisplayFor(model => model.Address)  
  44.         </dd>  
  45.   
  46.         <dt>  
  47.             @Html.DisplayNameFor(model => model.Department.DepartmentName)  
  48.         </dt>  
  49.   
  50.         <dd>  
  51.             @Html.DisplayFor(model => model.Department.DepartmentName)  
  52.         </dd>  
  53.   
  54.     </dl>  
  55. </div>  
  56. <p>  
  57.     @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |  
  58.     @Html.ActionLink("Back to List", "Index")  
  59. </p>  
Details
So, today we learned what is database first approach and how to implement it in ASP.NET MVC application.

Thanks for reading all the articles of this series. Hope you enjoyed it.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs