How to Implement Insert, Update, Delete Functionality in Single View of ASP.Net MVC?

Recently I saw a thread in the C# Corner Forums. Many people like to do doing insert, update and delete in a single View, in other words similar to ASP.NET. So I decided to write an article on this topic.

employee detail

By default ASP.NET MVC does not support this approach. We need to implement some tricks to do this.

Step 1

Create the blank application like this:

eisk mvc

empty asp project

Step 2

Create the database table like this:

employee demo in MVC

Step 3

In the Model layer, create the model using an EF database first approach like this:

navigation property

Step 4

Now create a blank Emp controller like this:

add controller

Step 5

Add a class, HttpParamActionAttribute, in the solution like this:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Reflection;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.    
  8. namespace EmpDemoInMVC  
  9. {  
  10.     public class HttpParamActionAttribute : ActionNameSelectorAttribute  
  11.     {  
  12.         public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)  
  13.         {  
  14.             if (actionName.Equals(methodInfo.Name, StringComparison.InvariantCultureIgnoreCase))  
  15.                 return true;  
  16.    
  17.             var request = controllerContext.RequestContext.HttpContext.Request;  
  18.             return request[methodInfo.Name] != null;  
  19.         }  
  20.     }  
  21. }  
Note: We are writing this class to fire the multiple Submit button events from a single view.

Step 6

Write the Action Method in the Controller for the insert/update/delete and fetch functionalities like this:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using EmpDemoInMVC.Models;  
  7. using System.Data.Entity;  
  8.    
  9. namespace EmpDemoInMVC.Controllers  
  10. {  
  11.     public class EmpController : Controller  
  12.     {  
  13.    
  14.         EmpEntities db = new EmpEntities();  
  15.           
  16.         //  
  17.         // GET: /Emp/  
  18.         public ActionResult Index(int? id)  
  19.         {  
  20.             ViewBag.Operation = id;  
  21.             ViewBag.Name = db.tblEmps.ToList();  
  22.             tblEmp objEmp = db.tblEmps.Find(id);  
  23.             return View(objEmp);  
  24.         }  
  25.    
  26.         [HttpPost]  
  27.         [HttpParamAction]  
  28.         [ValidateAntiForgeryToken]  
  29.         public ActionResult Create(tblEmp objEmp)   
  30.         {  
  31.             if (ModelState.IsValid)  
  32.             {  
  33.                 db.tblEmps.Add(objEmp);  
  34.                 db.SaveChanges();  
  35.             }  
  36.             return RedirectToAction("Index");  
  37.         }  
  38.    
  39.         [HttpPost]  
  40.         [HttpParamAction]  
  41.         [ValidateAntiForgeryToken]  
  42.         public ActionResult Update(tblEmp objEmp)  
  43.         {  
  44.             if (ModelState.IsValid)  
  45.             {  
  46.                 db.Entry(objEmp).State = EntityState.Modified;  
  47.                 db.SaveChanges();  
  48.             }  
  49.             return RedirectToAction("Index"new { id = 0 });  
  50.         }  
  51.    
  52.         public ActionResult Delete(int id)  
  53.         {  
  54.             tblEmp objEmp = db.tblEmps.Find(id);  
  55.             db.tblEmps.Remove(objEmp);  
  56.             db.SaveChanges();  
  57.             return RedirectToAction("Index"new { id = 0 });  
  58.         }  
  59.     }  
  60. }  
Step 7

Create the Empty View from the controller like this:

add view

Step 8

Now write the HTML code as per as our requirements like this:
  1. @model EmpDemoInMVC.Models.tblEmp  
  2.    
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.    
  7. <h2>Index</h2>  
  8.    
  9. @using (Html.BeginForm())   
  10. {  
  11.     // This is For EmpDetail in Grid  
  12.         <fieldset>  
  13.             <legend><b>Emp Details</b></legend>  
  14.             <table border="1" cellpadding="10">  
  15.                 <tr>  
  16.                     <th>  
  17.                         @Html.DisplayNameFor(model => model.Name)  
  18.                     </th>  
  19.                     <th>  
  20.                         @Html.DisplayNameFor(model => model.Address)  
  21.                     </th>  
  22.                     <th>  
  23.                         @Html.DisplayNameFor(model => model.EmailId)  
  24.                     </th>  
  25.                     <th>  
  26.                         @Html.DisplayNameFor(model => model.MobileNo)  
  27.                     </th>  
  28.                     <th>  
  29.                         @Html.DisplayNameFor(model => model.Country)  
  30.                     </th>  
  31.                     <th>  
  32.                         Action  
  33.                     </th>  
  34.                 </tr>  
  35.    
  36.                 @foreach (var item in (IEnumerable<EmpDemoInMVC.Models.tblEmp>)ViewBag.Name)  
  37.                 {  
  38.                     <tr>  
  39.                         <td>  
  40.                             @Html.DisplayFor(modelItem => item.Name)  
  41.                         </td>  
  42.                         <td>  
  43.                             @Html.DisplayFor(modelItem => item.Address)  
  44.                         </td>  
  45.                         <td>  
  46.                             @Html.DisplayFor(modelItem => item.EmailId)  
  47.                         </td>  
  48.                         <td>  
  49.                             @Html.DisplayFor(modelItem => item.MobileNo)  
  50.                         </td>  
  51.                         <td>  
  52.                             @Html.DisplayFor(modelItem => item.Country)  
  53.                         </td>  
  54.                         <td>  
  55.                             @Html.ActionLink("Edit""Index"new { id = item.Id }) |  
  56.                             @Html.ActionLink("Delete""Delete"new { id = item.Id })  
  57.                         </td>  
  58.                     </tr>  
  59.                 }  
  60.    
  61.             </table>  
  62.       </fieldset>  
  63.       
  64.     // This is for the Emp Entry Screen  
  65.     @Html.AntiForgeryToken()  
  66.     <div class="form-horizontal">  
  67.          
  68.         @Html.ValidationSummary(true)  
  69.    
  70.         <fieldset>  
  71.             <legend> <b>Entry Screen</b></legend>  
  72.    
  73.             <div class="form-group">  
  74.                 @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })  
  75.                 <div class="col-md-10">  
  76.                     @Html.EditorFor(model => model.Name)  
  77.                     @Html.ValidationMessageFor(model => model.Name)  
  78.                 </div>  
  79.             </div>  
  80.    
  81.             <div class="form-group">  
  82.                 @Html.LabelFor(model => model.Address, new { @class = "control-label col-md-2" })  
  83.                 <div class="col-md-10">  
  84.                     @Html.EditorFor(model => model.Address)  
  85.                     @Html.ValidationMessageFor(model => model.Address)  
  86.                 </div>  
  87.             </div>  
  88.    
  89.             <div class="form-group">  
  90.                 @Html.LabelFor(model => model.EmailId, new { @class = "control-label col-md-2" })  
  91.                 <div class="col-md-10">  
  92.                     @Html.EditorFor(model => model.EmailId)  
  93.                     @Html.ValidationMessageFor(model => model.EmailId)  
  94.                 </div>  
  95.             </div>  
  96.    
  97.             <div class="form-group">  
  98.                 @Html.LabelFor(model => model.MobileNo, new { @class = "control-label col-md-2" })  
  99.                 <div class="col-md-10">  
  100.                     @Html.EditorFor(model => model.MobileNo)  
  101.                     @Html.ValidationMessageFor(model => model.MobileNo)  
  102.                 </div>  
  103.             </div>  
  104.    
  105.             <div class="form-group">  
  106.                 @Html.LabelFor(model => model.Country, new { @class = "control-label col-md-2" })  
  107.                 <div class="col-md-10">  
  108.                     @Html.EditorFor(model => model.Country)  
  109.                     @Html.ValidationMessageFor(model => model.Country)  
  110.                 </div>  
  111.             </div>  
  112.             <div class="form-group">  
  113.                 <p>  
  114.                     <input type="submit" value="Create" name="Create"  
  115.                            style=@((ViewBag.Operation != null && Convert.ToInt32(ViewBag.Operation) > 0) ? "display:none" : "display:block") />  
  116.                     <input type="submit" value="Update" name="Update"  
  117.                            style=@((ViewBag.Operation != null && Convert.ToInt32(ViewBag.Operation) > 0) ? "display:block" : "display:none") />  
  118.                 </p>  
  119.             </div>  
  120.             </fieldset>  
  121.    
  122. </div>  
  123. }  
Summary

In this article we showed that we are using only one view for doing doing insert, update, delete and fetch functionality. If you like to implement an entry screen similar to the ASP.NET style then you can use this approach.

Up Next
    Ebook Download
    View all
    Learn
    View all