CRUD Application In ASP.NET MVC With Entity Framework

Today, we’ll explore how to make a CRUD application in ASP.NET MVC. In this application, we’ll explore how to write the code manually for each action. So, CRUD stands for (Create, Read, Update, Delete).

• Let’s make an ‘MVC’ application named ‘CRUDDemo’.
• Change Authentication set to ‘No Authentication’.
• ‘MVC Template’ with ‘MVC References’.
• First of all, let’s us add ‘Employee’ model class in our project.

We’ve already discussed when we’re working with Entity Framework (which actually helps us to make the database under the hood), then it is important that our model class should have a primary key.

Entity Framework converts our model class into the database table. So, think like you’re making the database.

Approaches To Make Primary Key in Model Class

We have 3 different approaches to make the primary key in our class.

• Just make a property named ‘Id’ in your class. Entity Framework will automatically detect it and make it primary key for the database.
  
  1. namespace CRUDDemo.Models
  2. {
  3. public class Employee
  4. {
  5. public int Id { get; set; }
  6. }
  7. }

• Let’s say you named your property anything, now you want to make it primary key for the table. Then you need to add [Key] attribute for this property. And [Key] attribute needs ‘System.ComponentModel.DataAnnotations’ assembly.
  
  1. using System.ComponentModel.DataAnnotations;
  3. namespace CRUDDemo.Models
  4. {
  5. public class Employee
  6. {
  7. [Key]
  8. public int EmpId { get; set; }
  9. }
  10. }

• But this third approach is more preferable. Make the property named as
  
  1. namespace CRUDDemo.Models
  2. {
  3. public class Employee
  4. {
  5. public int EmployeeId { get; set; }
  6. }
  7. }

Here, in this case, EF also detects it and automatically set this property as primary key in the table.

Now let’s come to the point. And make our final model class.

Now we need to make our bridge class which means ‘context class’ to make the connection between our model and database.

• Right-click on the Models folder and add context class ‘CrudContext’
• Now we’ll inherit this class from ‘DbContext’ but as we can see Visual Studio has no reference to this base class.
  
  
  

So we need to add the Entity Framework manually in our project. Right Click on your project and ‘Manage NuGet Packages’

Now, we can inherit our Context class with DbContext.

• And create the property of our model class.

Now open the Application’s Web.config file which is at root level. And write the connection string. These configurations file are actually in the form XML.

We can set connection string inside ‘configuration’ XML tag wherever we want. But we normally place connection string after ‘system.web’ XML tag.

Look if you see the IntelliSense support in any file like C#, XML, HTML then it means that you’re working correctly.

And finally, this is our connection string.

Let me tell you one more important thing about connection string if you’ve installed standalone SQL server in your machine then if you write only dot (.) anywhere else in the visual studio environment where you need to input SQL server name then it will ok, no need to worry about that. It will work fine.

Purpose of Connection String Name Attribute

You might be thinking about what is actually the purpose of name attribute here. Actually, we might have multiple connection strings. And we write them for our local application, for the server, and for different databases. So, we can name the connection string and use it in our application we want.

Another thing, if the context class name and connection string name matches then the application automatically detects this connection string and uses it.

But in our case, we named our connection string ‘CrudContextDemo’ which is different than our context class name. Then we need to manually write it into our context class.

Now, build the application. And press Visual Studio Key

Alt + /, Alt + . (To Open Package Manager Console)

And write the command to enable the migration in the project.

PM> Enable-Migrations

It will generate the folder ‘Migrations’ and ‘Configuration.cs’ class in it. We’ll discuss it later on.

Why Do We Enable the Migrations?

Actually, we need to update our database during development on the basis of our requirements. So we need to change our model and apply it to the database and it would have happened if we are using migrations. We need to enable the migrations once in our project.

We’ve already discussed in our previous tutorial that to make the database on the application running is not the good approach. The database should be ready before running the application. So, with the help of migrations, we can make our database ready for our application.

Now, it is the time to make the table with the help of migrations. So, write in the Package Manager Console and name the migration which you want to save thos changes into your project, it will become easy for you to know which changes are important and what was the purpose of the changes later in the project.

PM> Add-Migration AnyNameYouWant

Apply

PM> Add-Migration EmployeeAdded

Now a new class ‘EmployeeAdded’ has been added to our Migrations folder which is actually the script to generate the table.

We’ll discuss it in depth later.

Now we’ve just generated the script. Now we need to implement this script to generate our ‘Employee’ table. So,

Write in Package Manager Console

PM> Update-Database

And now we’ve successfully created our ‘Employee’ table and our database is ready to use.

Package Manager Console uses the commands of Windows PowerShell. They are not case sensitive. You can write as

add-migrations

Add-Migrations

Whatever way you want.

Let’s open SQL Server Management Studio and try to find out our generated database.

Look our database has been generated.

Now, it is the time of development.

Now, add the Empty ‘EmployeesController’ into the project. Here we have by default ‘Index’ action.

Now, create the context class object.

Index

As we already know that ‘Index’ action is used to show all the records on the screen. So, we’re using linq to retrieve all the methods and render it into the view.

We’re passing our employees list into the view and we’ll use this list into our ‘Index’ view.

Now, click on ‘Add’ Button and the view has been created.

Now, first of all, catch the list into our this new ‘Index’ view.

And now add the ‘Create’ hyperlink after ‘Index’ heading.

And now let’s add the table to display the data on the screen.

But these are just the headings. Now, let’s add the records but these are more than 1 so we should foreach loop here. And we already know how foreach loop and lambda expression works. So, don’t get confused about how these HTML helper lambda expressions are working.

Every property which comes from the header statement can be accessed through ‘Model’. So think like, ‘Model’ is an object of your header class statement (view).

Now, one thing still remains in our view. We need to ‘Edit’, ‘Delete’ and ‘Detail’ hyperlinks in our view. So,

This is the way we pass the data from our view to our Controller actions.

Now, make sure that you should use ‘id’ named parameter in your actions.

You might be worried about .DisplayFor() and .DisplayNameFor()

Actually these are 2 different things.

And finally our ‘Index’ view looks like,

• Our Actions [Edit, Details, Delete] has no heading. And we don’t need any heading there. So just add blank <th></th> tags there.
  
  1. <tr>
  2. <th>
  3. @Html.DisplayNameFor(x => x.Name)
  4. </th>
  5. <th>
  6. @Html.DisplayNameFor(x => x.Email)
  7. </th>
  8. <th>
  9. @Html.DisplayNameFor(x => x.Phone)
  10. </th>
  11. <th>
  12. @Html.DisplayNameFor(x => x.Addres)
  13. </th>
  14. <th></th>
  15. </tr>

Create

Now it is the time to Create action. As we already know that Create GET Request is all about showing the form on the screen and when user fills in the form then it comes to the POST request of Create action

We don’t need to pass any data to our ‘Create’ form. Because we get data from the form. Now again create the empty view for Create action.

Here, we need to bind our textboxes with our class properties. So, we again use the header statement.

Let’s create the form.

Here, we should be good enough in bootstrap 3 or 4. Visual Studio by default is using bootstrap 3. Read

We’ve written this code, first of all let’s discuss it and then we’ll make our next fields.

Why do we use using statement for forms?

Actually, BeginForm() renders into just opening <form> tag but as we know that when we open any tag then we also need to close the tag as well. And when we use using() statement and use the HTML.BeginForm() into using() statement then our using() statement automatically closes the form tag.

Validation Messages

There are 2 ways to display the validation message on the screen.

• ValidationSummary
  It is used to print all the validation messages at once. It displays the error messages in an unordered list.

• ValidationMessage, ValidationMessageFor
  These HTML helpers are responsible to display the validation messages individually of the specified field.

Now, you might be confused about the parameters of ValidationSummary() and ValidationMessageFor(). Actually, sometimes when we want to specify the special parameter of any function then we need to completely follow the overloaded function parameters.

Like in our scenario, actually the intent is we need to set the CSS class of our validation messages but we need also to specify the other parameters as well which comes before. And you can know the purpose of these parameters with the help of IntelliSense.