A Quick Start on MVC

Introduction

In this session we will describe the basic CRUD operations using MVC and Entity Framework.

The main advantage of these parts is we don't need to write any code.

About MVC: ASP.NET MVC Overview

We need to use the following procedure to create our first MVC application.

Procedure

Step 1

Frist step we need to create a new MVC application.

New MVC Application

Step 2

Select the option Internet Application and select the view engine as Razor.

view engine

Step 3

Now our solution is created.

my first mvc app

Step 4

A close look at our solution. We are now just concentrating on the three folders Controllers, Models and Views.

MVC Folders

Step 5

Right-click on the Models => Add=> New Item.

add new item

Step 6

Select the Data option and click on the Entity Data Model.

ado dotnet entity data model

Step 7

If you want to install the latest version of the Entity Framework then you can install it through Manage NuGet Packages.

entity framwork

Step 8

Click on the option Generate from database.

choose model connection

Step 9

Here we need to create a new database connection.

choose your data connection

Step 10

In this window we need to provide the inputs like our server name and select the database name from the dropdown box .Then we have the option to test our server connection.

enter server name

Step 11

The next step is to select the tables from the selected database.

select table

Step 12

Now the .edmx is created and in our model folder the model classes are created.

model folder

Step 13

Now we need to create a new controller. Right-click on the Controller then seelct Add => Controller.

add controller

Step 14

We need to edit the Controller name and select the Scaffolding options as MVC controller with read/write actions and views, using the Entity Framework.

employee controller

Step 15

Likewise select the Model class name and Data context class name.

data context class

Step 16

Now our Employee controller is created with some auto-generated code.

controller code

Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.Entity;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Mvc;  
  8. using MyFirstMVCApp.Models;  
  9.   
  10. namespace MyFirstMVCApp.Controllers  
  11. {  
  12.     public class EmployeeController : Controller  
  13.     {  
  14.         private MVC_TrainingEntities db = new MVC_TrainingEntities();  
  15.   
  16.         //  
  17.         // GET: /Employee/  
  18.   
  19.         public ActionResult Index()  
  20.         {  
  21.             return View(db.Employees.ToList());  
  22.         }  
  23.   
  24.         //  
  25.         // GET: /Employee/Details/5  
  26.   
  27.         public ActionResult Details(int id = 0)  
  28.         {  
  29.             Employee employee = db.Employees.Find(id);  
  30.             if (employee == null)  
  31.             {  
  32.                 return HttpNotFound();  
  33.             }  
  34.             return View(employee);  
  35.         }  
  36.   
  37.         //  
  38.         // GET: /Employee/Create  
  39.   
  40.         public ActionResult Create()  
  41.         {  
  42.             return View();  
  43.         }  
  44.   
  45.         //  
  46.         // POST: /Employee/Create  
  47.   
  48.         [HttpPost]  
  49.         [ValidateAntiForgeryToken]  
  50.         public ActionResult Create(Employee employee)  
  51.         {  
  52.             if (ModelState.IsValid)  
  53.             {  
  54.                 db.Employees.Add(employee);  
  55.                 db.SaveChanges();  
  56.                 return RedirectToAction("Index");  
  57.             }  
  58.   
  59.             return View(employee);  
  60.         }  
  61.   
  62.         //  
  63.         // GET: /Employee/Edit/5  
  64.   
  65.         public ActionResult Edit(int id = 0)  
  66.         {  
  67.             Employee employee = db.Employees.Find(id);  
  68.             if (employee == null)  
  69.             {  
  70.                 return HttpNotFound();  
  71.             }  
  72.             return View(employee);  
  73.         }  
  74.   
  75.         //  
  76.         // POST: /Employee/Edit/5  
  77.   
  78.         [HttpPost]  
  79.         [ValidateAntiForgeryToken]  
  80.         public ActionResult Edit(Employee employee)  
  81.         {  
  82.             if (ModelState.IsValid)  
  83.             {  
  84.                 db.Entry(employee).State = EntityState.Modified;  
  85.                 db.SaveChanges();  
  86.                 return RedirectToAction("Index");  
  87.             }  
  88.             return View(employee);  
  89.         }  
  90.   
  91.         //  
  92.         // GET: /Employee/Delete/5  
  93.   
  94.         public ActionResult Delete(int id = 0)  
  95.         {  
  96.             Employee employee = db.Employees.Find(id);  
  97.             if (employee == null)  
  98.             {  
  99.                 return HttpNotFound();  
  100.             }  
  101.             return View(employee);  
  102.         }  
  103.   
  104.         //  
  105.         // POST: /Employee/Delete/5  
  106.   
  107.         [HttpPost, ActionName("Delete")]  
  108.         [ValidateAntiForgeryToken]  
  109.         public ActionResult DeleteConfirmed(int id)  
  110.         {  
  111.             Employee employee = db.Employees.Find(id);  
  112.             db.Employees.Remove(employee);  
  113.             db.SaveChanges();  
  114.             return RedirectToAction("Index");  
  115.         }  
  116.   
  117.         protected override void Dispose(bool disposing)  
  118.         {  
  119.             db.Dispose();  
  120.             base.Dispose(disposing);  
  121.         }  
  122.     }  
  123. }  
Next we need to check our Views folder, yes it has one folder named “Employee” and its views are auto-generated.

view

Please have a look at our Index.cshtml.
  1. @model IEnumerable<MyFirstMVCApp.Models.Employee>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.   
  7. <h2>Index</h2>  
  8.   
  9. <p>  
  10.     @Html.ActionLink("Create New", "Create")  
  11. </p>  
  12. <table>  
  13.     <tr>  
  14.         <th>  
  15.             @Html.DisplayNameFor(model => model.EmpNo)  
  16.         </th>  
  17.         <th>  
  18.             @Html.DisplayNameFor(model => model.EmpName)  
  19.         </th>  
  20.         <th>  
  21.             @Html.DisplayNameFor(model => model.Salary)  
  22.         </th>  
  23.         <th>  
  24.             @Html.DisplayNameFor(model => model.Idx)  
  25.         </th>  
  26.         <th>  
  27.             @Html.DisplayNameFor(model => model.DeptNo)  
  28.         </th>  
  29.         <th></th>  
  30.     </tr>  
  31.   
  32. @foreach (var item in Model) {  
  33.     <tr>  
  34.         <td>  
  35.             @Html.DisplayFor(modelItem => item.EmpNo)  
  36.         </td>  
  37.         <td>  
  38.             @Html.DisplayFor(modelItem => item.EmpName)  
  39.         </td>  
  40.         <td>  
  41.             @Html.DisplayFor(modelItem => item.Salary)  
  42.         </td>  
  43.         <td>  
  44.             @Html.DisplayFor(modelItem => item.Idx)  
  45.         </td>  
  46.         <td>  
  47.             @Html.DisplayFor(modelItem => item.DeptNo)  
  48.         </td>  
  49.         <td>  
  50.             @Html.ActionLink("Edit", "Edit", new { id = item.EmpNo }) |  
  51.             @Html.ActionLink("Details", "Details", new { id = item.EmpNo }) |  
  52.             @Html.ActionLink("Delete", "Delete", new { id = item.EmpNo })  
  53.         </td>  
  54.     </tr>  
  55. }  
  56.   
  57. </table>  
In the App_Start: we need to initialize the starting page in this file.

Open the RouteConfig file and edit the controller name and action name.

rought config

Yes! Our first MVC application is completed.

index