Introduction

In this article, I am going to show you how to build CRUD Operations MVC web application using Entity Framework.

Also I'll show how to:

• Push the code on to GIT repository and do version controlling
• Publish the site to Azure (in future...)

You can download the complete source code for this tutorial from GitHub

Prerequisites

• .NET Core 2.1 SDK Download
• Visual Studio 2017 Download
• SQL Server 2008 (or above) 

Checking the installed versions

Run bellow commands to check out the versions:

Cmd to check .Net version:
dir %windir%\Microsoft.NET\Framework /AD

Creating SQL table

Next we’ll get the table created in SQL Server called “tblCustomer”.

Create table tblCustomer (      
    ID int IDENTITY(1,1) NOT NULL,      
    Name varchar(50) NOT NULL,      
    Country varchar(50) NOT NULL,      
    Email varchar(50) NOT NULL,      
    Gender varchar(6) NOT NULL      
) 

Create .Net Core MVC Application

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

On the next window select “ASP.NET Core Web Application”


On the next window select “Web Application (MVC)” template

It will create the project with bellow folder structure:

Run the project

Clean Build Solution
Rebuild Solution
Run The Solution

Adding the source code to GIT

Make sure you have a GIT account created from here if you don't have an account.

Log in to GIT.

Click right hand corner icon. On the menu click on "Your Repositories"

Click on "New" to create a new repository.

Provide a Name and Description and click "Create Repository".

It will create a new repository.

In my case, the URL of the newly created repository is:
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations


In this tutorial I'm using SourceTree as my GIT GUI tool.

You can download the SourceTree for Windows from here.

You can find out how to install and configure SourceTree here.

Next open SourceTree.

Click on "Create" button.

Provide the path of the project which we created earlier and click Create.

Since it's already exists, click "Yes" to proceed.

It will redirect you to window like bellow.

Click on "Remote" icon. (Notice red exclamation next to Remote icon)

Click on "Settings" button.

Click on "Add" button.

Provide your repository details as shown bellow and click OK.
Now you can notice red exclamation mark no longer exists next to Remote icon.

Now we are going to do the initial check in to the GIT repository.

Click on "Stage All" button. 

Since this is the initial check in we are going to check in all the files. Let's say if you want to check in only certain set of files, select those files separately and click "Stage Selected".

It will take some time to stage the files.

Files will be added to "Staged Files" section.

Next add a comment and click "Commit".

Go to GIT Repository on the browser and refresh the page. Still we cannot see the checked in files. That is because we have only done the Commit.

Go to SourceTree again and click "Push" button to push the changes to the repository.

Set the correct details as shown bellow and click "Push".

You will be prompted to enter your GIT Repository credentials.
It will take some time to push data to GIT Repository.



Go to GIT Repository on the browser and refresh the page. You will get to see the source code for the "NET-Core-CRUD-Operations" project.

To check out the check in details on GIT repository, click on "Commit" icon






On SourceTree also you can view the details relating to initial check in.

Adding Model

Inside the "Model" folder create a new Class called "Customer.cs"

Customer.cs
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Models/Customer.cs

Create a new Folder called "EF" and under that create new Class called "DataContext.cs"

DataContext.cs
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/EF/DataContext.cs



Create a new Folder called "DataAccessLayer" and under that create new Class called "CustomerDataAccessLayer.cs"

CustomerDataAccessLayer.cs
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/DataAccessLayer/CustomerDataAccessLayer.cs

Adding Controllers

Adding Views

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

Under View folder create a new Folder called "Customer".

To add views, right click on the particular Action Method and click "Add View"



It will generate a Razor page like bellow.

Index.cshtml
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Views/Customer/Index.cshtml


Like wise add views for rest of the Action Methods.

• Index
• Create
• Edit
• Details
• Delete

Create.cshtml
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Views/Customer/Create.cshtml

Delete.cshtml
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Views/Customer/Delete.cshtml

Details.cshtml
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Views/Customer/Details.cshtml

Edit.cshtml
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Views/Customer/Edit.cshtml

Do bellow shown small change in "_Layout.cshtml" page to add a link to "Customer/Index" view.

_Layout.cshtml
https://github.com/patricksameerajayalath/NET-Core-CRUD-Operations/blob/master/NETCoreCRUDOperations/Views/Shared/_Layout.cshtml

Run the project

Clean Build Solution
Rebuild Solution
Run The Solution

UI Functionality

Customers Page - https://localhost:44372/Customer

Create New Customer Page - https://localhost:44372/Customer/Create

Edit Customer Page - https://localhost:44372/Edit/7

Details Customer Page - https://localhost:44312/Customer/Details/7

Delete Customer Page - https://localhost:44312/Customer/Delete/7

Validations

How to Debug the code

You can add debug points on code behind.

How to Inspect data

You can inspect the data through Chrome Developer Tool.

Pushing pending changes to GIT

Click "Stage All" button.

It will stage all the files.

Add a comment and click "Commit" button. 

Remember this won't check in the code in to GIT Repository. It will sit and wait on a pre push stage until we Push the code.

Basically we can we can keep on Committing, and we can Push all those Commits at once.

Enter your GIT credentials.

Now the pending changes are Pushed on to GIR Repository. We can inspect the changes from the SourceTree tool.

Also we can inspect those changes from GIT Repository.





That's it. Enjoy !!