CRUD Operation With ASP.NET Core 2.1 MVC Using ADO.NET

Introduction

 

In this article, I am going to show you, how to Create, Read, Update, and Delete, also called a CRUD operation, in Asp.net core 2.1 MVC application with ADO.NET. We will be creating a sample customer record in order to perform the CRUD operation using Model in Asp.Net Core 2.1 MVC application uses stored procedure and ADO.Net.

 

We will be using Visual Studio 2017 (version 15.9.13 or above) and SQL Server 2017 or you can use SQL server 2008 or above version.

 

Prerequisites

1. Install Visual studio 2017 Updated version 15.9.13
2. Install .Net Core SDK 2.1 or above
3. SQL Server 2017

Now we will create our Asp.Net Core 2.1 MVC Application.

 

First of all, we will create a Database, table, and a stored procedure

 

Creating Database, Table and Stored Procedures

 

Step 1 - To create a Database

 

Open your SQL server and use the following script to create “CoreMvcDB” Database

 

Create database CoreMvcDB

 

Step 2 - To Create a Table

 

Open your SQL Server and use the following script to create “tbl_Customer” table. 

create Table tbl_Customer(

   CustomerId int IDENTITY(1,1) NOT NULL primary key,
   Name Varchar(20) NOT NULL,
   Address varchar(100) not null,
   City Varchar(20) NOT NULL,
   Country Varchar(20) NOT NULL,
   Gender Varchar(6) NOT NULL ,
   MobileNo varchar(15) NOT NULL,
   MailId varchar(20) NOT NULL

)

Now we will be creating a stored procedure to add, delete, update, and get customer data.

 

Step 3 - To create a stored procedure

 

Now we will create a stored procedure to insert a customer record into the Database.

 

Open your SQL Server and use the following script to create the procedure:

 

To insert a CustomerRecord 

Create procedure sp_AddCustomer
(
    @Name VARCHAR(20),
    @Address varchar(100),
    @City VARCHAR(20),
    @Country VARCHAR(20),
    @Gender VARCHAR(6),
    @MobileNo varchar(15),
    @MailId varchar(20)
)
As
Begin
    Insert into tbl_Customer (Name,Address,City,Country, Gender,MobileNo,MailId)
    Values (@Name,@Address,@City,@Country, @Gender,@MobileNo,@MailId)
End

To Update a CustomerRecord

Create procedure sp_UpdateCustomer
(
   @CustomerId INTEGER ,
   @Name VARCHAR(20),
   @Address varchar(100),
   @City VARCHAR(20),
   @Country VARCHAR(20),
   @Gender VARCHAR(6),
    @MobileNo varchar(15),
    @MailId varchar(20)
)
As
begin
   Update tbl_Customer
   set Name=@Name,
   Address=@Address,
   City=@City,
   Country=@Country,
   Gender=@Gender,
   MobileNo=@MobileNo,
   MailId= @MailId

   where CustomerId=@CustomerId
End

To Delete a CustomerRecord

Create procedure sp_DeleteCustomer
(
   @CustomerId int
)
As
begin
   Delete from tbl_Customer where CustomerId=@CustomerId
End

To Get a Single CustomerRecord

Create procedure sp_GetCustomerByID
(
    @CustomerId int
)
As
Begin
    SELECT * FROM tbl_Customer WHERE CustomerID= @CustomerId
End

To View All CustomerRecords

Create procedure sp_GetAllCustomers
As
Begin
    select
        CustomerId,
        Name,
        Address,
        City,
        Country,
        Gender,
        MobileNo,
        MailId
    from tbl_Customer
End

Now, our database part has been completed. So we will create Asp.Net core MVC application.

 

Step 1 - Create an ASP.NET Core 2.1 MVC Project

 

Open Visual Studio and select File -> New -> Project.

 

 

After selecting the project, a "New Project" dialog will open. Select .NET Core inside the Visual C# menu from the left side panel.

 

Then, select “ASP.NET Core web application“ from available project types. Give a name to the project as “AspNetCoreCURDMVC-­Demo” and press OK.

 

 

After clicking on the OK button, a new dialog will open to select the project template. You can see two drop-down menus at the top left of the template window. Then, select “.NET Core” and “ ASP.NET Core 2.1” from these dropdowns. Select “ Web application (Model-View-Controller)” template and press OK to create Asp.Net Core MVC project.

 

 

Step 2 - Add the model to the application

 

Right click on the solution and add a new folder named as “Models”. Now add a new class on Models folder.

 

Right click on Models folder and select add a new class, name of your class Customer.cs. This class will contain our Customer model properties.

 

Now open Customer.cs class and put the following code in it. We are also adding the required validators to the fields of Customer class, so we need to use System.ComponentModel.DataAnnotations at the top.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
namespace AspNetCoreCURDMVC_Demo.Models
{
    public class Customer
    {
        public int ID { get; set; }
        [Required(ErrorMessage = "Enter Your Name")]
        [StringLength(15, ErrorMessage = "Name should be less than or equal to Fifteen characters.")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Enter Your Address")]
        [StringLength(50, ErrorMessage = "Name should be less than or equal to fifty characters.")]
        public string Address { get; set; }
        [Required(ErrorMessage = "Enter Your Gender")]
        [StringLength(10, ErrorMessage = "Name should be less than or equal to ten characters.")]
        public string Gender { get; set; }
        [Required(ErrorMessage = "Enter Your City")]
        [StringLength(10, ErrorMessage = "Name should be less than or equal to ten characters.")]
        public string City { get; set; }
        [Required(ErrorMessage = "Enter Your Country")]
        [StringLength(10, ErrorMessage = "Name should be less than or equal to ten characters.")]
        public string Country { get; set; }
        [Required(ErrorMessage = "Your must provide a Mobile Number")]
        [RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Not a valid Mobile number")]
        public string Mobile { get; set; }
        [Required(ErrorMessage = "Enter Your Mail ID")]
        [RegularExpression(@"^[\w-\._\+%]+@(?:[\w-]+\.)+[\w]{2,6}$", ErrorMessage = "Please enter a valid email address")]
        public string Email { get; set; }
    }
}

In the above code, I have used some attributes to check validation of controls, which are based on control values. For textbox name, Address, City and Country Validation, I have put [Required(ErrorMessage = "Enter Your Name")].

 

This code will be executed if your input is empty in controls.

 

Now, if the user puts something but this does not satisfy the standard validation, then the code will be given below.

[StringLength(15, ErrorMessage = "Name should be less than or equal to fifteen characters.")]

The user puts only 15 characters to control input values. Like this you can check for others.

 

In Mobile, I can enter only 10 digit valid mobile no.

[RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Not a valid Mobile number")]

In email, I can enter only a valid Email Id with @ symbol.

[RegularExpression(@"^[\w-\._\+%]+@(?:[\w-]+\.)+[\w]{2,6}$", ErrorMessage = "Please enter a valid email address")]

Now add one more class file to Models folder. Name it as CustomerDataAccess_Layer.cs. This class will contain our database related operations.

 

Now, the Models folder has the following structure.

 

 

Open CustomerDataAccess_Layer.cs and put the following code to handle the database operations. Make sure to put your connection string.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Data;
using System.Data.SqlClient;

namespace AspNetCoreCURDMVC_Demo.Models
{
    public class CustomerDataAccess_Layer
    {
        string connectionString = "put your connection string here";
        //To View all Customers details
        public IEnumerable<Customer> GetAllCustomers()
        {
            List<Customer> lstCustomer = new List<Customer>();

            using (SqlConnection con = new SqlConnection(connectionString))
            {
                SqlCommand cmd = new SqlCommand("sp_GetAllCustomers", con);
                cmd.CommandType = CommandType.StoredProcedure;

                con.Open();
                SqlDataReader sdr = cmd.ExecuteReader();

                while (sdr.Read())
                {
                    Customer Customer = new Customer();

                    Customer.ID = Convert.ToInt32(sdr["CustomerID"]);
                    Customer.Name = sdr["Name"].ToString();
                    Customer.Address = sdr["Address"].ToString();
                    Customer.Gender = sdr["Gender"].ToString();
                    Customer.Country = sdr["Country"].ToString();
                    Customer.City = sdr["City"].ToString();
                    Customer.Mobile = sdr["MobileNo"].ToString();
                    Customer.Email = sdr["MailId"].ToString();
                    lstCustomer.Add(Customer);
                }
                con.Close();
            }
            return lstCustomer;
        }

        //To Add new Customer record
        public void AddCustomer(Customer Customer)
        {
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                SqlCommand cmd = new SqlCommand("sp_AddCustomer", con);
                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@Name", Customer.Name);
                cmd.Parameters.AddWithValue("@Address", Customer.Address);
                cmd.Parameters.AddWithValue("@Gender", Customer.Gender);
                cmd.Parameters.AddWithValue("@Country", Customer.Country);
                cmd.Parameters.AddWithValue("@City", Customer.City);
                cmd.Parameters.AddWithValue("@MobileNo", Customer.Mobile);
                cmd.Parameters.AddWithValue("@MailId", Customer.Email);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }

        //To Update the records of a particluar Customer
        public void UpdateCustomer(Customer Customer)
        {
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                SqlCommand cmd = new SqlCommand("sp_UpdateCustomer", con);
                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@CustomerId", Customer.ID);
                cmd.Parameters.AddWithValue("@Name", Customer.Name);
                cmd.Parameters.AddWithValue("@Address", Customer.Address);
                cmd.Parameters.AddWithValue("@Gender", Customer.Gender);
                cmd.Parameters.AddWithValue("@Country", Customer.Country);
                cmd.Parameters.AddWithValue("@City", Customer.City);
                cmd.Parameters.AddWithValue("@MobileNo", Customer.Mobile);
                cmd.Parameters.AddWithValue("@MailId", Customer.Email);

                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }

        //Get the details of a particular Customer
        public Customer GetCustomerData(int? id)
        {
            Customer Customer = new Customer();

            using (SqlConnection con = new SqlConnection(connectionString))
            {

                SqlCommand cmd = new SqlCommand("sp_GetCustomerByID", con);
                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@CustomerId", id);
                con.Open();
                SqlDataReader sdr = cmd.ExecuteReader();

                while (sdr.Read())
                {
                    Customer.ID = Convert.ToInt32(sdr["CustomerID"]);
                    Customer.Name = sdr["Name"].ToString();
                    Customer.Address = sdr["Address"].ToString();
                    Customer.Gender = sdr["Gender"].ToString();
                    Customer.Country = sdr["Country"].ToString();
                    Customer.City = sdr["City"].ToString();
                    Customer.Mobile = sdr["MobileNo"].ToString();
                    Customer.Email = sdr["MailId"].ToString();
                }
            }
            return Customer;
        }

        //To Delete the record on a particular Customer
        public void DeleteCustomer(int? id)
        {

            using (SqlConnection con = new SqlConnection(connectionString))
            {
                SqlCommand cmd = new SqlCommand("sp_DeleteCustomer", con);
                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@CustomerId", id);

                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

Step 3 - Adding the new controller to the application

 

Right click on Controllers folder and select add New Item.

 

 

An “Add New Item” dialog box will open. Select Web from the left panel, then select “MVC Controller Class” from templates panel, and put the name as CustomerController.cs. Press OK.

 

 

Now our CustomerController has been created. We will put our business logic in this controller.

 

Step 4 - Adding Views to the Application

 

To add views for our controller class, we need to create a folder inside Views folder with the same name as our controller and then add our views to that folder.

 

Right-click on the Views folder, and then Add >> New Folder and name the folder as Customer.

 

 

Now Right click on the Views/Customer folder, and then select Add >> New Item.

 

 

An “Add New Item” dialog box will open. Select Web from the left panel, then select “Razor View Page” from templates panel, and put the name as Index.cshtml. Press OK.

 

 

Similarly add 4 more views in Views/Customer folder, Create_customer.cshtml, Delete_customer.cshtml, customer_Details.cshtml, and Edit_customer.cshtml.

 

Now, our Views folder will look like this,

 

 

Let us put our codes in views and controller to perform the CRUD operation.

 

Create View

 

This view is for Adding new Customer data to the database. 

 

Open Create_customer.cshtml and put following code into it.

@model AspNetCoreCURDMVC_Demo.Models.Customer
@{
    ViewData["Title"] = "Create";
}
<h2>Create</h2>
<h4>Customers</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create_customer">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Address" class="control-label"></label>
                <input asp-for="Address" class="form-control" />
                <span asp-validation-for="Address" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="City" class="control-label"></label>
                <input asp-for="City" class="form-control" />
                <span asp-validation-for="City" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Country" class="control-label"></label>
                <input asp-for="Country" class="form-control" />
                <span asp-validation-for="Country" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Gender" class="control-label"></label>
                <select asp-for="Gender" class="form-control">
                    <option value="">-- Select Gender --</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                <span asp-validation-for="Gender" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Mobile" class="control-label"></label>
                <input asp-for="Mobile" class="form-control" />
                <span asp-validation-for="Mobile" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

To handle database operations, we will create an object of CustomerDataAccess_Layer class inside the CustomerController class.

namespace AspNetCoreCURDMVC_Demo.Controllers
{
    public class CustomerController : Controller
    {
        CustomerDataAccess_Layer objCustomer = new CustomerDataAccess_Layer();

To handle the business logic of Create_customer, open CustomerController.cs and put the following code into it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using AspNetCoreCURDMVC_Demo.Models;

namespace AspNetCoreCURDMVC_Demo.Controllers
{
    public class CustomerController : Controller
    {
        CustomerDataAccess_Layer objCustomer = new CustomerDataAccess_Layer();

        [HttpGet]
        public IActionResult Create_customer()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create_customer([Bind] Customer cust)
        {
            if (ModelState.IsValid)
            {
                objCustomer.AddCustomer(cust);
                return RedirectToAction("Index");
            }
            return View(objCustomer);
        }

The [Bind] attribute is used with parameter “cust” to protect against over-posting.

 

Index View

 

This view is for displaying all the Customer records available in the database. Also, all the operation, Edit, Details and Delete on each record can be done form this view.

 

Open Index.cshtml and puts the following codes.

@model IEnumerable<AspNetCoreCURDMVC_Demo.Models.Customer>

@{
    ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
    <a asp-action="Create_customer">Create New</a>
</p>
<table class="table table-bordered table-responsive">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.City)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Country)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Mobile)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.City)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Gender)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Mobile)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                <a asp-action="Edit_customer" asp-route-id="@item.ID">Edit</a> |
                <a asp-action="customer_Details" asp-route-id="@item.ID">Details</a> |
                <a asp-action="Delete_customer" asp-route-id="@item.ID">Delete</a>
            </td>
        </tr>
        }
    </tbody>
</table>

To handle the business logic of Index view, open CustomerController.cs and add the following code in Index method.

public IActionResult Index()
        {
            List<Customer> customers = new List<Customer>();
            customers = objCustomer.GetAllCustomers().ToList();
            return View(customers);
        }

Edit View

 

This view will enable us to edit an existing Customer data.

 

Open Edit_customer.cshtml and put the following code into it.

@model AspNetCoreCURDMVC_Demo.Models.Customer

@{
    ViewData["Title"] = "Edit";
}
<h2>Edit</h2>
<h4>Customer</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit_customer">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="ID" />
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Address" class="control-label"></label>
                <input asp-for="Address" class="form-control" />
                <span asp-validation-for="Address" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Gender" class="control-label"></label>
                <select asp-for="Gender" class="form-control">
                    <option value="">-- Select Gender --</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                <span asp-validation-for="Gender" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Country" class="control-label"></label>
                <input asp-for="Country" class="form-control" />
                <span asp-validation-for="Country" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="City" class="control-label"></label>
                <input asp-for="City" class="form-control" />
                <span asp-validation-for="City" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Mobile" class="control-label"></label>
                <input asp-for="Mobile" class="form-control" />
                <span asp-validation-for="Mobile" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

To handle the business logic of Edit_customer view, open CustomerController.cs and add following code to it.

public IActionResult Edit_customer(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            Customer customer = objCustomer.GetCustomerData(id);

            if (customer == null)
            {
                return NotFound();
            }
            return View(customer);
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Edit_customer(int id, [Bind] Customer cust)
        {
            if (id != cust.ID)
            {
                return NotFound();
            }
            if (ModelState.IsValid)
            {
                objCustomer.UpdateCustomer(cust);
                return RedirectToAction("Index");
            }
            return View(objCustomer);
        }

As we can see, we have two Edit_customer action methods, the first one is for HttpGet and the second one is for HttpPost. The HttpGet Edit_customer action method will fetch the Customer data and fills the fields of edit view. After the user clicks Save by editing the record, a Post request will be generated which is handled by HttpPost Edit_customer action method.

 

Details View

 

This view will display the details of a particular Customer. Add following codes on customer_Details .cshtml.

@model AspNetCoreCURDMVC_Demo.Models.Customer
@{
    ViewData["Title"] = "Details";
}
<h2>Details</h2>
<div>
    <h4>Customer</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.City)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.City)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Country)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Country)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Mobile)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Mobile)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Email)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Email)
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Edit_customer" asp-route-id="@Model.ID">Edit</a> |
    <a asp-action="Index">Back to List</a>
</div>

To handle the business logic of Details view, open CustoemrController.cs and add the following code to it.

[HttpGet]
        public IActionResult customer_Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            Customer objcustomer = objCustomer.GetCustomerData(id);

            if (objcustomer == null)
            {
                return NotFound();
            }
            return View(objcustomer);
        }

Delete View

 

This view will help us to remove Customer data. Open Delete_customer.cshtml and put the following code into it.

@model AspNetCoreCURDMVC_Demo.Models.Customer

@{
    ViewData["Title"] = "Delete";
}
<h2>Delete</h2>
<h3>Are you sure you want to delete this?</h3>
<div>
    <h4>Customer</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.City)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.City)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Country)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Country)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Mobile)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Mobile)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Email)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Email)
        </dd>
    </dl>

    <form asp-action="Delete_customer">
        <input type="hidden" asp-for="ID" />
        <input type="submit" value="Delete" class="btn btn-primary" /> |
        <a asp-action="Index">Back to List</a>
    </form>
</div>

To handle the business logic of Delete_customer view, open CustomerController.cs and add the following code to it.

[HttpGet]
        public IActionResult Delete_customer(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            Customer objcustomer = objCustomer.GetCustomerData(id);

            if (objcustomer == null)
            {
                return NotFound();
            }
            return View(objcustomer);
        }

        [HttpPost, ActionName("Delete_customer")]
        [ValidateAntiForgeryToken]
        public IActionResult DeleteConfirmed(int? id)
        {
            objCustomer.DeleteCustomer(id);
            return RedirectToAction("Index");
        }

To perform the Delete operation we need two Delete methods accepting the same parameter (Customer Id). But both the methods with the same name and method signature can create a compile time error and if we rename the Delete method then routing will not be able to find it as asp.net maps URL segments to action methods by its name. So, to resolve this issue we put ActionName("Delete_customer") attribute to the DeleteConfirmed method. That attribute performs mapping for the routing system so that a URL that includes /Delete_customer/ for a POST request will find the DeleteConfirmed method.

 

When we click the Delete link on the Index page, it will send a Get request and return a View of the Customer using HttpGet Delete_customer method. When we click Delete on this view, it will send a Post request to delete the record which is handled by the HttpPost DeleteConfirmed method. Performing a delete operation in response to a Get request (or for that matter, performing an edit operation, create operation, or any other operation that changes data) opens up a security hole. Hence, we have two separate methods.

 

Step 5 - Add a new menu

 

Edit the Views/Shared/_Layout page and add a new menu as “AddCustomer”. For that, add the below code.

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>

                    <li><a asp-area="" asp-controller="Customer" asp-action="Index">ADDCustomer</a></li>
                </ul>
            </div>

Step 6

 

Now press F5 to launch the application or Run the application and you can see the output page as shown below.

 

 

Click on AddCustomer menu and navigate to Index view. It shows all the available customer records already saved in the database. Below is the list of records.

 

 

Click Create New to navigate Create view. Add a new Customer record as shown in the image below.

 

 

 

We can check by missing any field while creating Customer Record, we can see the required field validation error message.

 

 

 

 

After inserting the data in all the fields, click "Create". The new Customer record will be created and you will be redirected to the Index view, displaying records of all the Customers. Here, we can also see action methods Edit, Details, and Delete.

 

 

 

If we want to edit an existing Customer record, then click Edit action link. It will open Edit View as below where we can change the Customer data.

 

 

 

If we miss any fields while editing Customer records, then Edit view will also throw the required field validation error message.

 

 

 

If you want to see the details of any Customer, then click Details action link, which will open the customer_Details view, as shown in the image below.

 

 

 

Click "Back to List" to go back to Index view. Now, we will perform Delete operation on a Customer named Chittaranjan. Click Delete action link which will open Delete view asking for a confirmation to delete.

 

 

 

Once we click Delete, it will send HttpPost request to delete Customer record and we will be redirected to the Index view. Here, we can see that the Customer with name Chittaranjan has been removed from our record.

 

 

Conclusion 

 

We have learned about creating a sample MVC web application with ASP.NET Core 2.1 using ADO.NET and SQL Server with the help of Visual Studio 2017. We have used stored procedures to handle CRUD operations at the database level. Post your valuable feedback in the comments section.