Post
Ask Question

CRUD Operations in MVC

This article will take you on a journey of MVC Create, Replace, Update and Delete (CRUD) operations. I'll show you step-by-step operations using simple images and charts. So buckle up for that journey.

Agenda

  • Overview
  • Introduction
  • Procedure

    • Creating a MVC Project
    • Adding EDM
    • DB Settings
    • Adding a controller
    • (Ref code Snippet)
    • Routing

  • Conclusion

Overview

This article will explain MVCs base operations rather than any fundamentals and anything like that so if you are new to MVC then I'll suggest you first explore the basics, it will hardly take a few hours then you can read this article.

In spite of these entire one more thing, I'm using MVC4 here for these operations. You can use any version but in the earlier versions, like in case of VS'8 and below you need to install templates first, then you can have fun.

Introduction

This article is all about ASP.NET MVC CRUD operations using Entity Data Model (DB First Approach). This will explain it in baby steps using images. One more interesting fact about this article is, you are not going to write even a single line of code.

Here we go.

Procedure

I am dividing this into 7 major steps, these steps will contain several sub steps. The major steps of this project are:



Step 1: Creating a MVC Project

Just click on File > New project.

On clicking New Project you will get a window like this, in that window does these tiny steps:





In this window simply fill in the project name depending on you; in my case it is "CRUDoperation" and then click on OK.



On clicking OK a window like this will pop up on your screen.



In that window from Project Templates you have several options like:

  • Empty

    (Simply a blank view)

  • Basic

    (Contains a few options and a few folders)

  • Internet Template

    (Contains all the folders for global use)

  • Intranet Template

    (Contains all the folders but for a specific scenario)

  • Mobile Application

    (For mobile app dev)

  • Web API

    (Extra features of Razor, Routing and others)

  • Single Page Application

    (For single page app dev)

  • Facebook Application

    (Facebook app dev)

From those select Intranet Application and then from View Engine select Razor Engine View (it's the default actually).

Then after View Engine there is an option for Create a Unit Test Project, this option is for creating a step-wise unit test for your project. (Microsoft provides that functionality in the default in MVC. It's not mandatory to create a unit test project but in my case I am using it.)

Now just create a Test Project and click OK.



On clicking okay it will take a while to create the project.



Then you will get a window containing these folders:

  • Solution Explorer
  • Test Explore
  • Class View
  • Properties

From these options select Solution Explorer, click CRUDoperations, just click on that and you will get a view of this window.



Step 2: Adding EDM

(For data I am selecting ADO.Net Entity Data Model, you can select several other available options.)

Just do this procedure, right-click on CRUDoperation > Add New Item

Then follow this procedure, respectively:




Simply name your EDM model (in my case it's EDM) and then click OK.

Now you will get a pop-up window, named Choose Model Contents. This contains the following 2 types of model contents:

  • Generate from Database (DB first approach)
  • Empty Model (Modal first approach)

(In my case I am using the DB first approach (Generate from Database), just select it and click on "Next" )



On clicking Next, you will get a option Choose Your Data Connection, from here just select a connection string if you already have one or else you can go with New Connection.

Just click on New Connection.



Now set your connection properties as in the following:



Just fill in all the required details of your server and database and proceed further.



Microsoft has provided a beautiful option to check your connection, down the pop box. Just click on Test Connection, if everything until now will be smooth and clear then you will get a pop-up box saying- "Test connection Succeeded" as shown below.

(Otherwise you need to recheck your DB and server details again and try to establish the connection again and then you can check your connection.)



Now you can see the generated Data Connection in the box as shown below. Just select a few further settings like Security and march forward.

Just click on “Finish”.



On clicking Finish it will show a box saying Model Wizard, just select any of the wizards depending on availability (in my case I am selecting Entity Framework 5.0).

Click Next for further settings.



Step 3: Selecting you DB Settings

Now in this step just click on Table, dbo (as I already have a table in my DB, but if you created a Stored Procedure or view then select it respectively).

In model Namespace just leave it as it is or change it depending on you. In my case its TestDBModel, click Finish.



This will redirect you to a page containing a structure diagram of all the available tables in that select DB in step 3. You remove others depending on you (in my case it's Employee having the columns EmployeeId, FirstName, LastName, Age, Project and Address).

You don't need to do anything here, just chill it's more than half done.



You can see all these EDM files in the Solution Explorer, having all the required fields, pages and reference files of all your available tables with ".cs extension".



Note: Before proceeding to Step 5, build the project. It's recommended.

Step 4: Adding a Controller

For adding a controller do this procedure:



On clicking Add Controller, it will redirect to you to this window, having these fields:

  • Controller Name
  • Scaffolding Template
  • Model Class
  • Data Context Class
  • Views


Just modify entries depending on you. (My entries are shown below.)

Now click Add.



It will redirect you to a page named "CRUDcontroller.cs" (as I modified it). This page contains all the CRUD operation related functions and two others, such as:

  • Index.cs
  • Details.cs


Reference Code | Snippet

This is of the CRUDcontoller.cs page that represents all the base operations with their respective get and set methods.

  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.   
  9. namespace CRUDoperations.Controllers  
  10. {  
  11.     public class CRUDController : Controller  
  12.     {  
  13.         private TestDBEntities db = new TestDBEntities();  
  14.   
  15.         //  
  16.         // GET: /CRUD/  
  17.   
  18.         public ActionResult Index()  
  19.         {  
  20.             return View(db.EMPLOYEEs.ToList());  
  21.         }  
  22.   
  23.         //  
  24.         // GET: /CRUD/Details/5  
  25.   
  26.         public ActionResult Details(string id = null)  
  27.        {  
  28.             EMPLOYEE employee = db.EMPLOYEEs.Find(id);  
  29.             if  (employee == null)  
  30.             {  
  31.                 return HttpNotFound();  
  32.             }  
  33.             return View(employee);  
  34.         }  
  35.   
  36.         //  
  37.         // GET: /CRUD/Create  
  38.   
  39.         public ActionResult Create()  
  40.         {  
  41.             return View();  
  42.         }  
  43.   
  44.         //  
  45.         // POST: /CRUD/Create  
  46.   
  47.         [HttpPost]  
  48.         [ValidateAntiForgeryToken]  
  49.         public ActionResult Create(EMPLOYEE employee)  
  50.         {  
  51.             if (ModelState.IsValid)  
  52.             {  
  53.                 db.EMPLOYEEs.Add(employee);  
  54.                 db.SaveChanges();  
  55.                 return RedirectToAction("Index");  
  56.             }  
  57.   
  58.             return View(employee);  
  59.         }  
  60.   
  61.         //  
  62.         // GET: /CRUD/Edit/5  
  63.   
  64.         public ActionResult Edit(string id = null)  
  65.         {  
  66.             EMPLOYEE employee = db.EMPLOYEEs.Find(id);  
  67.             if (employee == null)  
  68.             {  
  69.                 return HttpNotFound();  
  70.             }  
  71.             return View(employee);  
  72.         }  
  73.   
  74.         //  
  75.         // POST: /CRUD/Edit/5  
  76.   
  77.         [HttpPost]  
  78.         [ValidateAntiForgeryToken]  
  79.         public ActionResult Edit(EMPLOYEE employee)  
  80.         {  
  81.             if (ModelState.IsValid)  
  82.             {  
  83.                 db.Entry(employee).State = EntityState.Modified;  
  84.                 db.SaveChanges();  
  85.                 return RedirectToAction("Index");  
  86.             }  
  87.             return View(employee);  
  88.         }  
  89.   
  90.         //  
  91.         // GET: /CRUD/Delete/5  
  92.   
  93.         public ActionResult Delete(string id = null)  
  94.         {  
  95.             EMPLOYEE employee = db.EMPLOYEEs.Find(id);  
  96.             if (employee == null)  
  97.             {  
  98.                 return HttpNotFound();  
  99.             }  
  100.             return View(employee);  
  101.         }  
  102.   
  103.         //  
  104.         // POST: /CRUD/Delete/5  
  105.   
  106.         [HttpPost, ActionName("Delete")]  
  107.         [ValidateAntiForgeryToken]  
  108.         public ActionResult DeleteConfirmed(string id)  
  109.         {  
  110.             EMPLOYEE employee = db.EMPLOYEEs.Find(id);  
  111.             db.EMPLOYEEs.Remove(employee);  
  112.             db.SaveChanges();  
  113.             return RedirectToAction("Index");  
  114.         }  
  115.   
  116.         protected override void Dispose(bool disposing)  
  117.         {  
  118.             db.Dispose();  
  119.             base.Dispose(disposing);  
  120.         }  
  121.     }  
  122. } 

You can see the controller info on the preceding page but if you want to see their views then simply click on Views, it will show you a separate folder named CRUD and all the pages for the CRUD operations.



You can see the razor engine functionality in any of the pages, as shown below. This page shows a view of the create page, I'll show you that page later in this article.



Step 5: Routing

Routing is itself a complex mechanism, but here I am showing you only the base access functionality. For that base functionality, follow this procedure:





On clicking Route.Config.CS it will redirect you to that window (below). You need to make some changes in that page such as:

  • Controller Name
  • Action

 

In my case I changed it to Controller = “CRUD”.

All other options are the default for the operation.



Just run that page and you will see a page like this. This is your default page of CRUD operations. You can access all the other options.



This is the base structure of the create page, as I was talking about in Step 5.

You can create entries from here.

Conclusion

Cognates buddies!

Just clap for yourself, because you have done a great job. You performed CRUD operations using ASP.NET MVC without writing a single line of code.

I wish you liked this, I'll come with some other exciting parts of MVC operations soon, until then enjoy coding and if you encounter any problem then feel free to ping me.


Similar Articles