Introduction
CRUD means create update and delete.
With ASP.NET in MVC, we can also perform CRUD operations using stored procedures.
Description
Using a single stored procedure means selecting, updating, inserting, and deleting all SQL queries; we can put in one stored procedure and perform this CRUD operation by calling only this single stored procedure.
Steps to Build MVC Application
Step 1. Create MVC Application named “SatyaMvc4Crud”.
![MVC Application]()
Step 2. Create a model class file called Customer. cs.
Code Ref
Code description
Here, I have created some attributes to check the validation of controls, which are based on control values. For textbox name and address validation, I have put [Required(ErrorMessage = "Your Message")].
This code will be executed if your input is empty in the controls.
Now, if the user puts something but this does not satisfy the standard validation, then the code will be, as given below.
The user can put only four characters to control the input values.
Like this, you can check for other attributes, which are based on control validation values.
Here, I will declare 6 different entities to access the user and inputs. For every entity, I required an attribute to show the validation message failed for the end users.
e.g.
Like this required attribute, I used StringLength, Display, DisplayFormat, and RegularExpression attributes.
We have used some attributes. For this, we have to add one namespace.
In the name part, I can enter up to 4 characters.
In the address part, I can enter up to 10 characters.
In MobileNo. part, I can enter only 10-digit valid phone no.
In an E-mail ID part, I can enter only a valid E-mail ID with the @ symbol.
In the Date Time part, I can enter only a valid date, which should be less than the current date.
For Custom validation of the entities, Code Ref is given below.
Code description
Here, I have used one Custom Validation class to customize your Date time validation. For this, I created one class file in the Models folder named “CustomValidationAttributeDemo.cs”.
Here, I used one date time variable to access the date time.
Thus, I put some code to take the user’s birth date. Birth date should always be less than today’s date.
Here, I used one class, ValidBirthDate, that is inherited from the ValidationAttribute class.
What is the ValidationAttribute class?
It serves as a base class for all the validation attributes. Go to the definition of this ValidationAttribute class.
Here, System.ComponentModel.DataAnnotations.dll file references for this class files.
The ValidationResult override method is used to represent a container for the result of the validation request. The ValidationContext class acts as a parameter inside the ValidationResult override method. It is used to describe a context in which a validation check is performed.
In the custom validation class, I used Student. cs for the DATE-TIME entity. According to this, the user input date should be less than today’s date.
Here, CustomValidationAttributeDemo is the name of the Model Class and ValidBirthDate class is the child class of ValidateAttribute base class.
![Demo]()
Step 3. Create a table to add stored procedures to perform CRUD operations in MVC.
Table SQL Ref
Table SQL Description
Here, six columns are the same as entities declared in model class “Customer. cs”.
Here “[CustomerID]” is the primary key and an auto-increment feature is added in these columns.
Step 4. Now, create a stored procedure to perform CRUD operation in MVC.
Stored procedure Script Ref
Stored procedure Script description
Here, five @Query parameters with different values for Insert/ Update/ Delete/ Select/Search statements.
Here (@Query = 1) means for insertion of the records.
Like this, other (@Query = 2 to 5) is assigned for other operation performances.
By using single procedure by using this individual query parameter values; we can perform different operations.
![Parameter]()
Step 5. Create a class file called DataAccessLayer.cs inside a manually created folder named DataAccess.
To add connection string, add name as well as stored procedure name to perform CRUD role.
Code Ref
Code description
Here, I will show how to implement query parameter value, which is 1 to implement in this class file to perform insert operation.
In this InsertData() function, I used @Query = 1 value to perform the insert operation. Here, I have added the stored procedure name.
To perform the update operation, I have added the code in the UpdateData function.
To perform the delete operation, I have added the code in the DeleteData function.
To perform a select list of data, I have added the code in the Selectalldata list function of the customer model class.
I have added one for loop to perform a selection of all the data loop-wise by using the customer model class.
Now, I will filter the records by using customer ID values.
I have added the code given below.
Thus, I have added a customer Id parameter in a function of the customer model class.
Now, I have closed the connection in every function in this class by using catch and finally block.
![Connections]()
Step 6. Create a controller class file called CustomerController.cs.
Code Ref
Code description
In this controller class file, I have created one controller action method.
Here, DataAccessLayer is added as a reference to use all its methods.
The code is given below for checking model is valid or not.
Here, if the condition satisfied, then the model state will be valid, else the data will not save properly.
Here, I added the show details view page name as soon as the data is inserted successfully, the page will show you the list of inserted data.
In the ShowAllCustomerDetails action result method, the Selectalldata of the DataAccessLayer class is used.
In the Details action result method, the SelectDatabyID of the DataAccessLayer class is used.
The passed parameter value with the related data will be shown in the corresponding view page.
The edit action result method has two attributes httpget and httppost.
For the HTTP get attribute In the “Edit” action result method, the “SelectDatabyID” of the DataAccessLayer class is used to step update data by using this particular data.
The passed parameter value with the related data will be shown in the corresponding view page.
For the HTTP post attribute, the edit controller action method takes the customer model class object, and the UpdateData of the DataAccessLayer class is used.
In the Delete action result method, the DeleteData of the DataAccessLayer class is used.
The passed parameter value with the related data will be shown to perform a delete operation in the corresponding view page.
![Controller]()
Step7. Now, create a view cshtml file called ShowAllCustomerDetails.cshtml, InsertCustomer.cshtml.
Code ref. of InsertCustomer.cshtml
Code description
In this view page, I have added a customer class reference or namespace.
To make the validation summary active, use this code.
Now, I have added some code to make textbox and label control according to customer model class entities.
To add label control, the code is given below.
To add textbox control, the code is given below.
To add validation messages, as defined in the customer model class and customized model validation class, the code is given below.
Here, two types of buttons are used to save the data.
Here, two types of buttons are used; where one is to reset the data.
After saving data, the details view page will come with all the saved data.
Here, ShowAllCustomerDetails is the name of the controller action method as well as the view name.
Here, I have added one hyperlink to redirect to another page.
Code ref. of Edit.cshtml
Code description
In this view page, the editor and label controls will bind existing data to update it. Hence, the data as in the insert view page will load in the corresponding HTML helper control and the user will update, as per requirement.
After the update process is completed, the view details page will come.
Here, I used multiple submit buttons for different actions.
Here, I have added a hidden field control associated with customer id to perform an edit operation.
Code ref. of Details.cshtml
Code description
In this view page, the data inserted and updated data will show for reporting purposes.
Here, no submit button is required to take action in the page event.
Afterwards, the page will redirect to the view details page.
Code ref. of Delete. cshtml
Code description
In this view page, the delete confirmation text message is added in the header.
In the button event, a JavaScript message was added and the user will decide whether it will be deleted or not.
The data is loaded and is based on the selection of customer ID and data associated with the entities defined in the customer model class, which will be deleted.
Here, I have added a hidden field control associated with the customer id to perform the delete operation.
After this, the page will redirect to the view details page.
Code ref. of ShowAllCustomerDetails.cshtml
Code description On this page, all the data will be visible along with the EDIT/ DELETE/ DETAILS link to perform the Crud operation.
The data will be shown, using the “@Html.DisplayFor” HTML helper control in looping.
Here, I added the namespace of the customer model class.
The title of the page will be written here.
To go to the new customer insertion view page, the code is given below.
Here,
Link name: "New Customer",
The method defined in the customer control class file as well as the data access layer class file is InsertCustomer,
Controller Name: "Customer"
Here, I am using the temp data method mechanism to transfer the data from one page to another.
To show the insertion successful message, the code is given below.
To show an update successful message, the code is given below.
To show a delete successful message, the code is given below.
To get current data time for better visualization to the client, the code is given below.
![Views]()
Step 8. Add connection string in Web. config file.
Code Ref
Code description
Here, “mycon” is the connection string name to be mentioned in the Data Access Layer class file to make connection to the database as well as make a CRUD operation.
Now, put your correct connection string.
![String]()
Step 9. Set the start page when the MVC page loads the first time.
Code Ref
Code description
Here, I have mentioned the set start page.
Here, the Controller's name is Customer.
Now, the view name/ controller action method is ShowAllCustomerDetails.
![ASP.NET]()
Step 10. You can customize the style of your own view design by using Site.css.
Here, you can add color, font size, font style, and margin, etc.
![Style]()
Step 11. Add and check reference Dll/ Assembly files to check the version and other information.
In the References folder, you can check all DLL file information by right-clicking and going to properties.
![DLL file]()
OUTPUT
The set start page URL is given below.
http://localhost:62159/Customer/ShowAllCustomerDetails
Load data details with CRUD functionalities
http://localhost:62159/Customer/ShowAllCustomerDetails
![Details]()
Insert page
http://localhost:62159/Customer/InsertCustomer
![Insert page]()
Update page
http://localhost:62159/Customer/Edit/93
![Update page]()
Details page for report requirement
http://localhost:62159/Customer/Details/93
![Report requirement]()
Delete page
For delete confirmation, it is, as shown below.
![Delete page]()
Total Operations in one flow
Show all the data on the page given below.
![Total Operations]()
Insert some data
![Data]()
![OK]()
![MVC]()
Update some data
![Update some data]()
![Localhost]()
Details of some data
![Report]()
Delete some data
![Cancel]()
![Deleted]()
Now, the deleted data is not showing that it is empty now.
![Empty]()
To insert new records, click the New Customer link.
![Link]()
Check the date and time at the footer of the show details view page.
![View page]()
Like above-mentioned methods, you can implement CRU operation, using MVC in your real-time scenario.
Summary
- What is CRUD?
- How to set code to implement CRUD in MVC.
- The backend setup is the same as real-time scenario.
- Output steps.