CRUD APP USING ASP.NET

Piyush Kumar
9 min readJun 13, 2022

Process

  • Open Visual Studio 2022
  • Click on Create New Project.
  • Then search for, ASP.NET Core Web App(Models-Views-Controllers) — for C#
  • Click on that project and press NEXT.
  • Then on configuration page, name the solution name that resembles your work, Likewise do for the Project name.
  • Then Choose the proper framework for the latest it is .NET 6.0(Preview) and then leave the rest and click on CREATE.
  • It will take a while and load all the necessary dependency files for the project.
  • In the Solution Explorer tab, click on your Project name and the right click and it shows various options, click on “Edit Project File”.

Keypoints

make your file looks like this
  • The ItemGroup will contain all the new git packages that we are using in the project. We selected the runtime compilation and that’s why that package has been installed.
  • In the Solution Explorer tab, wwwroot folder only contains the static files/folders which we are going to need in building our project. It doesn’t contains any C# files inside it. When we need to use any css, js file or any other static library we need to use this folder. This will be the root folder of the project.
  • In the appsettings.json folder, here you can put your production json files which are going to be needed in the project. And start configuring when in need.
  • We are using this service in Program.cs as we are working on with MVC, If we are working with Razor Pages then the builder service will be different.
  • pipeline specifies how the application should respond to a web request. When your application receives a request from the browser, that request goes back and forth through the pipeline. It is present in Program.cs file.
How Pipeline works
  • Middlewares used in the project stays in Program.cs, these are
used for various works related for the project

MVC ARCHITECTURE

  • Controller is the Heart of the application while View will be the User Interface.
  • Now we will see the Routing in MVC,
controller route for MVC which includes the pattern of how a routing works
  • In this way Routing in MVC works, in the following manner
  • In the Controller, first it contains HomeController class which directly implies to the Home Route of the application and the terms present as IActionResult Index and Privacy are ActionResult of the controllers. It determines the Action of the application, here in this case Index and Privacy are two Actionpresent in the application.
  • return View() will target the view file present with the same name as per the controllers and when this return code is triggered, it directly strike the necessary view file of your project.
  • The Controller-View relation will be, by right click on the view of actionResult, we will see various option and then by clicking on Go To View we will redirect to the view file in our project.
  • In this way, the Controllers and Views are related and being redirect to one another. Thus the interaction between MVC and Routing works.
  • In the Solution Explorer “/Views/Shared/_Layout.cshtml” is the default master file of the project, it contains all the cdn links(css, script files) involves in the project. If we need to add any more css or script files globally we need to add here for so.
  • In the _ViewStart.cshtml, it shows the default master page for the application i.e., _Layout.cshtml
  • More about Action Results,
  • The IActionResult return type is appropriate when multiple ActionResult return types are possible in an action.
  • At last, right click on your project name and select NuGet Package Manager and search for “Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation” and install it.

Process (Continues)-

Database Setup

  • In the Solution Explorer, right click on models , there you can see “Add” option, click on it choose “class” from it and name it “Category”.
  • Then how you want to make your database depends on model i.e.,
the code looks like this
  • These are the category present in our database as a tabular form i.e., in mysql.
  • Now in-order to make the Id primary and Name attribute required we will add some entity framework, by doing so the code throws error. So to make the code work put the cursor on the error-code and press “ctrl+.” and add the suggested namespace.
from this….
to this…
  • This is how we manage to prepare the category model which tunes into database for our project in mysql.

For SQL server

  • Now open Microsoft SQL Server Management Studio in your laptop.
  • Now leave the form as there and just select the server name to your understanding and click connect.
  • In order to make the database for our project we have to make a connection string inside the appsetting.json file in our main project.
  • So by adding the required code appsetting.json will look like this,
  • But still our project didn’t know that we are using sql as our database, so in-order to make it know we have to create an object called DbContext in our project folder. So for this right click on our project, choose Add and create a new folder(this folder contains all the data related items).
  • In there add a class called ApplicationDbContext.cs file
  • Now when the file is created the add “:DbContext” after the class name but that shows error so by clicking “ctrl+.” we can install the required namespace of entity framework. So it seems like this,
  • Now we have add a single line of code or we can say that a general syntax to establish the connection with Entity Framework. So we have to make a constructor by pressing “ctor and press tab twice”-it automatically create a constructor.
  • Finally the code looks like this, this will be the required syntax.
  • Now the code still doesn’t know that we are using sql database, we just add entity framework with the code and set our category class in this DbContext.
  • So in-order to ensure the existence of database we will write some code in Program.cs in the services part.
  • Then we have to install “Microsoft.EntityFrameworkCore.SqlServer” using NuGet Package Manager inorder to make the code work for sql server.
  • After code, so all the configuration is done that was needed for the Db Context.
  • Now that the Program.cs has been configured, the next step that we have to actually create a database and the table. As we are using Entity Framework we need Migrations in-order to push the changes to database.
  • So in-order to run the migrations, you will to Tools present in upper explorer, select NuGet package Manager and click the package manager console.
  • Migration is nothing but a track of all the DB changes that are needed.
  • But first we have to install a namespace called “Microsoft.EntityFrameworkCore.Tools”.
  • After that opening the package manager console run the code “add-migration AddCategoryToDatabase”. and wait for the build to success.
  • After that a migration folder is created in your project folder.
  • Now in package manager console run the code “update-database”.
  • After that our code connects with the database.

Category CRUD Operations

  • First of all select the IIS Express, so that the command prompt not open all the time.
  • Now right click on Controller from your project folder and create an empty controller and name that file(Note- Always add controller term after the name of your file).
  • Now that the controller is created we have to make a view file by right click on Action method (in this case it is, Index) then click Add a View, after that select razer pages and fill the form eventually.
  • Now a folder named Category is formed inside the View folder where this index view lies and the folder structure looks like this.
  • Now that we just have to change the _Layout.cshtml file for the Category one. (changing the controller and action attribute name)
  • Now in-order to retrieve all the data from the table of the database, we have to write some code on CategoryController.cs for so
  • Now the index file of category folder under the view will look like this after coding,
  • After running the code, the UI looks like this
  • Now to make it more decorative, we will use BootsWatch.com and install the SOLAR Theme.
  • Now the CRUD Properties-

CREATE

EDIT (GET)

EDIT (POST)

DELETE (GET)

DELETE (POST)

  • These code will present in Category.cs file.
  • Now the Category.cs file in Models folder will look like this
  • Lets discuss about the view folder, inside it a Category folder is their and make a view called Create, Edit and Delete which contains.

Create.cshtml

Edit.cshtml

Delete.cshtml

  • Finally our work comes to an end and we create an CRUD App using ASP.Net and the UI looks like this

You can Edit, Delete and Create the one you want…

Thank You

--

--