CRUD Operation in ASP.NET MVC Application

In the last tutorials we showed you how to create a controller and in the second tutorial, we showed how to add a view to our project. In the Third tutorial, we showed you how to add the model. Here is the link to those tutorials

  1. Create ASP.NET MVC Application
  2. Create ASP.NET MVC Application – Add View
  3. Create ASP.NET MVC Application – Add Models

We continue the project and add Create/Edit/Delete Functionality to the Project.

CRUD Operation in ASP.NET MVC Application

CRUD Operation in ASP.NET MVC Application
CRUD Operation in ASP.NET MVC Application

Open the Project

Open the MVCHelloWorld Project we created in the last tutorial.  We are not going to use the database for our example. So we need to store the data in some place. To do this let us use TempData object

What is TempData

TempData  help us to keep the data between request.  It is derived from TempDataDictionary class and stores the data in session variables.  Unlike session variable, the data stored in Tempdata removed immediately, after it’s used in the next HTTP request.

List method

Open the list method and change it to hold the customer collection in TempData

In the Code above, we check,  whether we have Customers object to Tempdata. If exists, we are going to use it. If not we get it from our OurDatabase object

Note that we called TempData.keep(). This is because TempData will remove the data once the request is complete. We have to exclusively tell the Tempdata to keep the data and not to destroy it. This will keep the data until the next request.

Add Create Action Method

Open the Customer Controller.  Add new Action Method Create as follows.

Here we create a new customer object and pass it to the View.

Create a View for the Create method

Click anywhere in the Create Action method and right click on Add View. This will bring up the Add View dialog box.

Add Create View
Add Create View
  1. Select View name as Create
  2. Under the Template drop-down, select Create
  3. Under model drop down, select Customer (MvcHelloWorld.Models)
  4. Click on Add

This will generate the Create view in folder Views ->Customer->Create.cshtml

Open the View

Browse to the view folder and open the Create.cshtml.  You will see the following code.

Let us look at each line closely

A Html help function adds <form> tag to the generate Html.  In this code @Html.BeginForm, is used without parameters, sends an HTTP POST Request to the current URL. In this case, this will insert
<form action=”/Customer/Create” method=”post”>

This will prevent Cross-Site Request Forgery

Displays the validation Error message here

Create a label for the Customer Name field

@Html.EditorFor renders the Editor for the Customer Name. In this Case, it will render the text box. @Html.ValidationMessageFor displays the validation message for the customername field right next to the editor

This is a simple submit button.

Creates a link to Controller Action List

Add Create Method for Post Method

Let us now create an action method to add the Customer to our Customer collection. Add the following code to the Customer Controller.

[HttpPost] is attribute is attached to the Create Action Method. We have two Create Action Methods in our class. When the request comes from an HTTP POST Request method MVC Routing module picks up the right action method to execute using this attribute

This action method is called when you click on submit button in our browser.  This method takes customer as its parameter.

How does the Controller gets its data from the Create View?

Whenever the user submits the page using HTTP POST Request method the forms data fields are inserted in the message body. This data is can be accessed from the formsCollection. The fields in the formsCollection are automatically mapped to the Customer object by the Model Binder.

ModelState.IsValid checks for any model errors, which have been added to ModelState.
The model binder dose some built in validation and checks and populates ModelState with the list of errors, if any. It usually checks for type conversion etc.

This is very simple. Customers collection is retrieved from TempData. The new customer is added to the collection. TempData.Keep()  as discussed above keeps the data till the next request.  Then the view is redirected to List Action Method

Test The Create Method

Run the project and change the URL to  Customer/List

Click on Create and add a record and save it. You will see the new record is added to the customer collection and displayed in the grid.

Adding Edit, Delete and details Action Method

These methods are similar to Create method. Add the following code to the CustomerController.

Creating Edit, Delete and Details Views

Click anywhere in the Corresponding Action method for which view is to be generated and right click on Add View. This will bring up the Add View dialogue box.

  1. Select View name same as Action Method
  2. Under the Template drop-down, select either Edit, Delete or Details
  3. Under model drop down, select Customer (MvcHelloWorld.Models)
  4. Click on Add

This will generate the Corresponding view  in folder Views ->Customer

Open each view and go to the bottom and change @Html.ActionLink(“Back to List”, “Index”) to @Html.ActionLink(“Back to List”, “List”)

Run the Project

Run the Project and Type Customer/List in the URL.  Test Edit, Delete and details Actions.

CONCLUSION

This ends our four-part tutorial on How to Create MVC Application.  We have learnt how to Create a Simple Project and added Controller, View and model. We also looked at how to Add Create, Edit, Delete actions.

Download

Source Code

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top