ASP.NET MVC CRUD With Dapper (Micro ORM)

In this article, you will learn about CRUD (Create, Retrieve, Update, Delete) functionality in ASP.NET MVC with the help of DAPPER, the Micro-ORM tool.

Recently, in one project, I used Dapper. Here, I am trying to give you an idea to achieve CRUD functionality in avery easy manner.

You will get the following information in this article,

  • What is Dapper?
  • How to work with Dapper?
  • Dapper Query Execution Comparison
  • How to install Dapper?

What is Dapper?

Dapper is a light-weight ORM (Object Relational Mapping) tool, which helps the developers to map their database with POCO (Plain Old CLR Object) /MODEL. Dapper is free and open source. Dapper was developed by Sam Saffron, Marc Gravell, and Nick Craver.

If you are willing to write the SQL Query and take the taste of ORM, then Dapper is a good choice for you. Dapper makes it very easy to handle all kinds of database operations.

Dapper Resources

  • http://dapper-tutorial.net/dapper
  • https://github.com/StackExchange/Dapper
  • https://en.wikipedia.org/wiki/Dapper_ORM

How to work with Dapper or how to implement / run query in Dapper?

To start with Dapper, you have to perform the following actions in your code.

  1. Create an object of IDbConnection.
  2. Attach the query to perform.
  3. Pass Query as a parameter to execute method.

Dapper Query Execution Comparison

Please, visit this link for more information - https://github.com/StackExchange/Dapper

You can install Dapper through NuGet, a free, open source package manager specifically designed for Microsoft development platform.

How to install Dapper?

ASP.NET

OR

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

ASP.NET

Your Dapper is installed successfully.

Step by Step Asp.Net MVC CRUD functionality with DAPPER

Before start working with Visual Studio and Coding part, first let's have a look on the table structure, which we are going to work on further.

Table Structure

  1. USE [MBKTest]  
  2. GO  
  3. /****** Object:  Table [dbo].[tblFriends]    Script Date: 27-Jun-17,Tue 3:44:59 PM ******/  
  4. SET ANSI_NULLS ON  
  5. GO  
  6. SET QUOTED_IDENTIFIER ON  
  7. GO  
  8. SET ANSI_PADDING ON  
  9. GO  
  10.   
  11. CREATE TABLE [dbo].[tblFriends](  
  12.     [FriendID] [int] IDENTITY(1,1) NOT NULL,  
  13.     [FriendName] [varchar](50) NULL,  
  14.     [City] [varchar](25) NULL,  
  15.     [PhoneNumber] [varchar](15) NULL  
  16. ON [PRIMARY]  
  17.   
  18. GO  
  19. SET ANSI_PADDING OFF  
  20. GO  

Sample Records View of Table tblFriends.

ASP.NET

STEP 1 -
FILE --> NEW --> Project.

ASP.NET

STEP 2 - Select the following.

  1. Template : Empty
  2. Select MVC CheckBox.

    ASP.NET

After creation of project, you can see that the default project structure will look like the following (Solution Explorer).

ASP.NET

STEP 3 Installation of Dapper

Install the Dapper through NuGet: All the installation steps are given above.

STEP 4 Creating a Friend Model

Select Solution Explorer and right click on Models.

ASP.NET

ASP.NET

Friend Model (Friend.cs) Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace DapperMvc.Models  
  7. {  
  8.     public class Friend  
  9.     {  
  10.         public int FriendID { get; set; }  
  11.         public string FriendName { get; set; }  
  12.         public string City { get; set; }  
  13.         public string PhoneNumber { get; set; }  
  14.     }  
  15. }  

STEP 5 Creating a Friend Controller

ASP.NET

ASP.NET

ASP.NET


Default Code of Controller FriendController.cs

ASP.NET

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace DapperMvc.Controllers  
  8. {  
  9.     public class FriendController : Controller  
  10.     {  
  11.   
  12.         // GET: Friend  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.   
  18.         // GET: Friend/Details/5  
  19.         public ActionResult Details(int id)  
  20.         {  
  21.             return View();  
  22.         }  
  23.   
  24.         // GET: Friend/Create  
  25.         public ActionResult Create()  
  26.         {  
  27.             return View();  
  28.         }  
  29.   
  30.         // POST: Friend/Create  
  31.         [HttpPost]  
  32.         public ActionResult Create(FormCollection collection)  
  33.         {  
  34.             try  
  35.             {  
  36.                 // TODO: Add insert logic here  
  37.   
  38.                 return RedirectToAction("Index");  
  39.             }  
  40.             catch  
  41.             {  
  42.                 return View();  
  43.             }  
  44.         }  
  45.   
  46.         // GET: Friend/Edit/5  
  47.         public ActionResult Edit(int id)  
  48.         {  
  49.             return View();  
  50.         }  
  51.   
  52.         // POST: Friend/Edit/5  
  53.         [HttpPost]  
  54.         public ActionResult Edit(int id, FormCollection collection)  
  55.         {  
  56.             try  
  57.             {  
  58.                 // TODO: Add update logic here  
  59.   
  60.                 return RedirectToAction("Index");  
  61.             }  
  62.             catch  
  63.             {  
  64.                 return View();  
  65.             }  
  66.         }  
  67.   
  68.         // GET: Friend/Delete/5  
  69.         public ActionResult Delete(int id)  
  70.         {  
  71.             return View();  
  72.         }  
  73.   
  74.         // POST: Friend/Delete/5  
  75.         [HttpPost]  
  76.         public ActionResult Delete(int id, FormCollection collection)  
  77.         {  
  78.             try  
  79.             {  
  80.                 // TODO: Add delete logic here  
  81.   
  82.                 return RedirectToAction("Index");  
  83.             }  
  84.             catch  
  85.             {  
  86.                 return View();  
  87.             }  
  88.         }  
  89.     }  
  90. }  

You can see above that the following ActionMethods are created by default.

SR.

NO.

ACTION METHOD NAME

ACTION METHOD DESCRIPTION

1.

Index

List of all friends.

2.

Details

Detail view of friend.

3.

Create

Create a new friend.

4.

Edit

Edit / Modify / Change existing selected friend detail.

5.

Delete

Erase / Delete friend detail.

Now, let's understand each ActionMethod of FriendController before starting the coding of Index,Details, Create,Edit, Delete methods.

STEP 6 Use Namespace on the top of the HomeController.cs

  1. using DapperMvc.Models;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
  5. using Dapper;  

STEP 7 Implementing Index ActionMethod

Index

  1. // GET: Friend  
  2.         public ActionResult Index()  
  3.         {  
  4.             List<Friend> FriendList = new List<Friend>();  
  5.             using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  6.             {  
  7.                   
  8.                 FriendList = db.Query<Friend>("Select * From tblFriends").ToList();  
  9.             }  
  10.             return View(FriendList);  
  11.         }  

STEP 8 Creating View for Index ActionMethod

Note - Generally, we create View  with the same name as of Action Method.

ASP.NET

ASP.NET


ASP.NET

Index.cshtml Code

Auto-Generated code for List (Index), this will display all the records of Friends.

  1. @model IEnumerable<DapperMvc.Models.Friend>  
  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 class="table">  
  13.     <tr>  
  14.         <th>  
  15.             @Html.DisplayNameFor(model => model.FriendName)  
  16.         </th>  
  17.         <th>  
  18.             @Html.DisplayNameFor(model => model.City)  
  19.         </th>  
  20.         <th>  
  21.             @Html.DisplayNameFor(model => model.PhoneNumber)  
  22.         </th>  
  23.         <th></th>  
  24.     </tr>  
  25.   
  26. @foreach (var item in Model) {  
  27.     <tr>  
  28.         <td>  
  29.             @Html.DisplayFor(modelItem => item.FriendName)  
  30.         </td>  
  31.         <td>  
  32.             @Html.DisplayFor(modelItem => item.City)  
  33.         </td>  
  34.         <td>  
  35.             @Html.DisplayFor(modelItem => item.PhoneNumber)  
  36.         </td>  
  37.         <td>  
  38.             @Html.ActionLink("Edit""Edit"new { id=item.FriendID }) |  
  39.             @Html.ActionLink("Details""Details"new { id=item.FriendID }) |  
  40.             @Html.ActionLink("Delete""Delete"new { id=item.FriendID })  
  41.         </td>  
  42.     </tr>  
  43. }  
  44.   
  45. </table>  

Look at the output of Index of Friend controller

STEP 9 Set the RouteConfig.cs file

Why do we need to configure RouteConfig.Cs?

By default RouteConfig.cs file called controller = HOME and action = INDEX now we want our FRIEND controller’s INDEX action method to run by default that’s why we change the RouteConfig.cs file.

Default RouteConfig.cs file view

ASP.NET

Default RouteConfig.cs file code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7.   
  8. namespace DapperMvc  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.   
  16.             routes.MapRoute(  
  17.                 name: "Default",  
  18.                 url: "{controller}/{action}/{id}",  
  19.                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }  
  20.             );  
  21.         }  
  22.     }  
  23. }  

Now change your RouteConfig.cs as follows:

Changed RouteConfig.cs file Image

ASP.NET

Changed RouteConfig.cs file Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7.   
  8. namespace DapperMvc  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.   
  16.             routes.MapRoute(  
  17.                 name: "Default",  
  18.                 url: "{controller}/{action}/{id}",  
  19.                 defaults: new { controller = "Friend", action = "Index", id = UrlParameter.Optional }  
  20.             );  
  21.         }  
  22.     }  
  23. }  

STEP 10 Run the Project to check Index

Press F5 to check the Index actionmethod of friend. This will run by default because we had set the FRIEND Controller’s INDEX ActtionMethod default in ROUTECONFIG.CS in step number 9.

Our Index Method of Friend Controller Output

ASP.NET

Even you can write this also on Address Bar of browser: localhost:54501/Friend/Index

STEP 11 Implementing Details ActionMethod

Details 

ActionMethod Code,

  1. // GET: Friend/Details/5  
  2.        public ActionResult Details(int id)  
  3.        {  
  4.            Friend _friend = new Friend();  
  5.            using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  6.            {  
  7.                _friend = db.Query<Friend>("Select * From tblFriends " +  
  8.                                       "WHERE FriendID =" + id, new { id }).SingleOrDefault();  
  9.            }  
  10.            return View(_friend);  
  11.        }  

NOTE

While we want to run this Action Method on browser sample URL given on the top of Details Action Method.

Example localhost:54501/Friend/Create

( // GET: Friend/Details/5)

STEP 12 Creating View for Details ActionMethod

Right click on ActionMethod area of Details and Select ADD VIEW, As we did in STEP 8.

ASP.NET

After click on ADD button you will see solution explorer Detail.cshtml file has been created

Details.cshtml Code

  1. @model DapperMvc.Models.Friend  
  2.   
  3. @{  
  4.     ViewBag.Title = "Details";  
  5. }  
  6.   
  7. <h2>Details</h2>  
  8.   
  9. <div>  
  10.     <h4>Friend</h4>  
  11.     <hr />  
  12.     <dl class="dl-horizontal">  
  13.         <dt>  
  14.             @Html.DisplayNameFor(model => model.FriendName)  
  15.         </dt>  
  16.   
  17.         <dd>  
  18.             @Html.DisplayFor(model => model.FriendName)  
  19.         </dd>  
  20.   
  21.         <dt>  
  22.             @Html.DisplayNameFor(model => model.City)  
  23.         </dt>  
  24.   
  25.         <dd>  
  26.             @Html.DisplayFor(model => model.City)  
  27.         </dd>  
  28.   
  29.         <dt>  
  30.             @Html.DisplayNameFor(model => model.PhoneNumber)  
  31.         </dt>  
  32.   
  33.         <dd>  
  34.             @Html.DisplayFor(model => model.PhoneNumber)  
  35.         </dd>  
  36.   
  37.     </dl>  
  38. </div>  
  39. <p>  
  40.     @Html.ActionLink("Edit""Edit"new { id = Model.FriendID }) |  
  41.     @Html.ActionLink("Back to List""Index")  
  42. </p>  

STEP 13 Run the Project to check Details.

You can execute details method  directly or through INDEX method.

By default Index will view on browser you can select details of any friend or directly type URL.

ASP.NET

STEP 14 To create a new friend entry

Why Create ActionMethod having two method?

First method is for GET process which will run when we call the method.

Second method is for POST process which will run when we submit the entry to the server.

Create ActionMethod Code

  1. // GET: Friend/Create  
  2.      public ActionResult Create()  
  3.      {  
  4.   
  5.          return View();  
  6.      }  
  7.   
  8.      // POST: Friend/Create  
  9.      [HttpPost]  
  10.      public ActionResult Create(Friend _friend)  
  11.      {  
  12.           
  13.              using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  14.   
  15.              {  
  16.   
  17.                  string sqlQuery = "Insert Into tblFriends (FriendName,City,PhoneNumber) Values("+ _friend.FriendName+","+ _friend.City+","+ _friend.PhoneNumber + ")";  
  18.   
  19.                  int rowsAffected = db.Execute(sqlQuery);  
  20.              }  
  21.   
  22.              return RedirectToAction("Index");  
  23.          }  

STEP 15 Creating View for Create ActionMethod

Right click on ActionMethod area of Create and Select ADD VIEW, As we did in STEP 8.

ASP.NET

Create.cshtml Code

  1. @model DapperMvc.Models.Friend  
  2.   
  3. @{  
  4.     ViewBag.Title = "Create";  
  5. }  
  6.   
  7. <h2>Create</h2>  
  8.   
  9.   
  10. @using (Html.BeginForm())   
  11. {  
  12.     @Html.AntiForgeryToken()  
  13.       
  14.     <div class="form-horizontal">  
  15.         <h4>Friend</h4>  
  16.         <hr />  
  17.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
  18.         <div class="form-group">  
  19.             @Html.LabelFor(model => model.FriendName, htmlAttributes: new { @class = "control-label col-md-2" })  
  20.             <div class="col-md-10">  
  21.                 @Html.EditorFor(model => model.FriendName, new { htmlAttributes = new { @class = "form-control" } })  
  22.                 @Html.ValidationMessageFor(model => model.FriendName, ""new { @class = "text-danger" })  
  23.             </div>  
  24.         </div>  
  25.   
  26.         <div class="form-group">  
  27.             @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })  
  28.             <div class="col-md-10">  
  29.                 @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })  
  30.                 @Html.ValidationMessageFor(model => model.City, ""new { @class = "text-danger" })  
  31.             </div>  
  32.         </div>  
  33.   
  34.         <div class="form-group">  
  35.             @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  36.             <div class="col-md-10">  
  37.                 @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })  
  38.                 @Html.ValidationMessageFor(model => model.PhoneNumber, ""new { @class = "text-danger" })  
  39.             </div>  
  40.         </div>  
  41.   
  42.         <div class="form-group">  
  43.             <div class="col-md-offset-2 col-md-10">  
  44.                 <input type="submit" value="Create" class="btn btn-default" />  
  45.             </div>  
  46.         </div>  
  47.     </div>  
  48. }  
  49.   
  50. <div>  
  51.     @Html.ActionLink("Back to List""Index")  
  52. </div>  
  53.   
  54. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  55. <script src="~/Scripts/jquery.validate.min.js"></script>  
  56. <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>  

STEP 16 Run the Project to check Create.

You can execute create method directly or through INDEX method.

Example

localhost:54501/Friend/Create

By default Index will view on browser you can select Create option or directly type URL given above.

ASP.NET

I had filled entry form as given below,

ASP.NET

Index Page showing my new entry.

ASP.NET

STEP 17 To create a Change/Edit friend entry

Why EDIT ActionMethod having two method?

First method for GET process which will run when we call the method.

Second method for POST process which will run when we submit the entry to the server.

Here we are changing MAHESH THANVI to MOHAN THANVI

ASP.NET

EDIT ActionMethod Code

  1. // GET: Friend/Edit/5  
  2.       public ActionResult Edit(int id)  
  3.       {  
  4.           Friend _friend = new Friend();  
  5.           using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  6.           {  
  7.               _friend = db.Query<Friend>("Select * From tblFriends " +  
  8.                                      "WHERE FriendID =" + id, new { id }).SingleOrDefault();  
  9.           }  
  10.           return View(_friend);  
  11.       }  
  12.   
  13.       // POST: Friend/Edit/5  
  14.       [HttpPost]  
  15.       public ActionResult Edit(Friend _friend)  
  16.       {  
  17.           using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  18.   
  19.           {  
  20.   
  21.               string sqlQuery = "update tblFriends set FriendName='"+_friend.FriendName+ "',City='"+_friend.City+"',PhoneNumber='"+_friend.PhoneNumber + "' where friendid="+_friend.FriendID;  
  22.   
  23.               int rowsAffected = db.Execute(sqlQuery);  
  24.           }  
  25.   
  26.           return RedirectToAction("Index");  
  27.       }   

STEP 18 Creating View for EDIT ActionMethod

Right click on ActionMethod area of EDIT and Select ADD VIEW, As we did in STEP 8.

ASP.NET

Edit.cshtml Code

  1. @model DapperMvc.Models.Friend  
  2.   
  3. @{  
  4.     ViewBag.Title = "Edit";  
  5. }  
  6.   
  7. <h2>Edit</h2>  
  8.   
  9.   
  10. @using (Html.BeginForm())  
  11. {  
  12.     @Html.AntiForgeryToken()  
  13.       
  14.     <div class="form-horizontal">  
  15.         <h4>Friend</h4>  
  16.         <hr />  
  17.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
  18.         @Html.HiddenFor(model => model.FriendID)  
  19.   
  20.         <div class="form-group">  
  21.             @Html.LabelFor(model => model.FriendName, htmlAttributes: new { @class = "control-label col-md-2" })  
  22.             <div class="col-md-10">  
  23.                 @Html.EditorFor(model => model.FriendName, new { htmlAttributes = new { @class = "form-control" } })  
  24.                 @Html.ValidationMessageFor(model => model.FriendName, ""new { @class = "text-danger" })  
  25.             </div>  
  26.         </div>  
  27.   
  28.         <div class="form-group">  
  29.             @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })  
  30.             <div class="col-md-10">  
  31.                 @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })  
  32.                 @Html.ValidationMessageFor(model => model.City, ""new { @class = "text-danger" })  
  33.             </div>  
  34.         </div>  
  35.   
  36.         <div class="form-group">  
  37.             @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  38.             <div class="col-md-10">  
  39.                 @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })  
  40.                 @Html.ValidationMessageFor(model => model.PhoneNumber, ""new { @class = "text-danger" })  
  41.             </div>  
  42.         </div>  
  43.   
  44.         <div class="form-group">  
  45.             <div class="col-md-offset-2 col-md-10">  
  46.                 <input type="submit" value="Save" class="btn btn-default" />  
  47.             </div>  
  48.         </div>  
  49.     </div>  
  50. }  
  51.   
  52. <div>  
  53.     @Html.ActionLink("Back to List""Index")  
  54. </div>  
  55.   
  56. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  57. <script src="~/Scripts/jquery.validate.min.js"></script>  
  58. <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>  

STEP 19 Run the Project to check EDIT.

You can execute EDIT method directly or through INDEX method.

Example

localhost:54501/Friend/Edit/5

By default Index will view on browser you can select EDIT option or directly type URL given above.

ASP.NET

Change entry to,

ASP.NET

ASP.NET

STEP 20 To create a Erase/Delete friend entry

Why DELETE ActionMethod having two method?

First method for GET process which will run when we call the method.

Second method for POST process which will run when we submit delete request to the server.

Here we want to delete MOHAN THANVI Record

ASP.NET

DELETE ActionMethod Code

  1. // GET: Friend/Delete/5  
  2.       public ActionResult Delete(int id)  
  3.       {  
  4.           Friend _friend = new Friend();  
  5.           using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  6.           {  
  7.               _friend = db.Query<Friend>("Select * From tblFriends " +  
  8.                                      "WHERE FriendID =" + id, new { id }).SingleOrDefault();  
  9.           }  
  10.           return View(_friend);  
  11.       }  
  12.   
  13. // POST: Friend/Delete/5  
  14.       [HttpPost]  
  15.       public ActionResult Delete(int id, FormCollection collection)  
  16.       {  
  17.           using (IDbConnection db = new SqlConnection(ConfigurationManager.ConnectionStrings["friendConnection"].ConnectionString))  
  18.           {  
  19.               string sqlQuery = "Delete From tblFriends WHERE FriendID = " +id;  
  20.   
  21.               int rowsAffected = db.Execute(sqlQuery);  
  22.                
  23.   
  24.           }  
  25.           return RedirectToAction("Index");  
  26.       }   

STEP 21 Creating View for DELETE ActionMethod

Right click on ActionMethod area of DELETE and Select ADD VIEW, As we did in STEP 8.

ASP.NET

Delete.cshtml Code

  1. @model DapperMvc.Models.Friend  
  2.   
  3. @{  
  4.     ViewBag.Title = "Delete";  
  5. }  
  6.   
  7. <h2>Delete</h2>  
  8.   
  9. <h3>Are you sure you want to delete this?</h3>  
  10. <div>  
  11.     <h4>Friend</h4>  
  12.     <hr />  
  13.     <dl class="dl-horizontal">  
  14.         <dt>  
  15.             @Html.DisplayNameFor(model => model.FriendName)  
  16.         </dt>  
  17.   
  18.         <dd>  
  19.             @Html.DisplayFor(model => model.FriendName)  
  20.         </dd>  
  21.   
  22.         <dt>  
  23.             @Html.DisplayNameFor(model => model.City)  
  24.         </dt>  
  25.   
  26.         <dd>  
  27.             @Html.DisplayFor(model => model.City)  
  28.         </dd>  
  29.   
  30.         <dt>  
  31.             @Html.DisplayNameFor(model => model.PhoneNumber)  
  32.         </dt>  
  33.   
  34.         <dd>  
  35.             @Html.DisplayFor(model => model.PhoneNumber)  
  36.         </dd>  
  37.   
  38.     </dl>  
  39.   
  40.     @using (Html.BeginForm()) {  
  41.         @Html.AntiForgeryToken()  
  42.   
  43.         <div class="form-actions no-color">  
  44.             <input type="submit" value="Delete" class="btn btn-default" /> |  
  45.             @Html.ActionLink("Back to List""Index")  
  46.         </div>  
  47.     }  
  48. </div>  

STEP 22 Run the Project to check DELETE.

You can execute DELETE method  directly or through INDEX method.

Example

localhost:54501/Friend/Delete/5

By default, Index will display on browser. You can select DELETE option or directly type the above URL.

ASP.NET

You can see that MOHAN THANVI entry is deleted successfully.

ASP.NET

I have zipped the source code and attached with this article.

How to use Zipped Source Code?

  • Download the zip file.
  • Overwrite the following folders in your Solution path.

I have given four folders:

  1. App_Start
  2. Controllers
  3. Models
  4. Views

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now