CRUD Operation With ASP.NET Core MVC Using Visual Studio Code and EF

Introduction

In this article I am going to explain how to create a basic web application using ASP.Net Core MVC and Visual Studio Code in Windows System. We are going to create a sample Employee database management system.

We will be using ASP.Net Core 2.0,Entity Framework and SQLite.

Prerequisites

1. Install .Net Core 2.0.0 SDK from here
2. Download and install Visual Studio Code from here.
3. Familiarize yourself with Visual Studio Code from here

Source Code

Before proceeding further i would recommend to download the source code from Github.

Now we are ready to proceed for creation of our first web app.

Create the MVC Web App

Press Window+R , it will open Run window. Type ‘cmd’ and press ‘OK’. It will open command prompt in your system,

Type following Commands. It will create our mvc application “MvcDemo”

1. Mkdir MvcDemo
2. Cd MvcDemo
3. Dotnet new mvc

Open this “MvcDemo” application using visual studio code. If it prompts the message “Required assets to build and debug are missing from ‘MvcDemo’. Add them?”, Select Yes.

Add data Model Class

Right click on Models folder and select New File. Give name as Employees.cs.It will create a file inside Model folder.

 

 Open Employees.cs file and paste the following code in it to create Employee class

using System;

using System.ComponentModel.DataAnnotations;

namespace MvcDemo.Models

{

public class Employees

{

public int Id { get; set; }

[Required]

public string Name { get; set; }

[Required]

public string City { get; set; }

[Required]

public string Department { get; set; }

[Required]

public int Salary {get;set;}

}

}

Since we are adding Required validators to the fields of Employee class. So we need using System.ComponentModel.DataAnnotation at the top

Add references for scaffolding

Now our data model class is created, we will create Views and Controller using scaffolding.

For scaffolding we need to add NuGet package refences in MvcDemo.csproj file by adding following code

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>

<TargetFramework>netcoreapp2.0</TargetFramework>

</PropertyGroup>

<ItemGroup>

<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />

<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" />

</ItemGroup>

<ItemGroup>

<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />

<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />

</ItemGroup>

</Project>

Save the file and select “Restore” to the Info message “There are unresolved dependencies”.

Now your MvcDemo.csproj will look like this.

Next step is to add MVCEmployeeContext.cs file in our Model folder. Open the file and add following lines of code.

using Microsoft.EntityFrameworkCore;

namespace MvcDemo.Models

{

public class MvcEmployeeContext : DbContext

{

public MvcEmployeeContext (DbContextOptions<MvcEmployeeContext> options)

: base(options)

{

}

public DbSet<MvcDemo.Models.Employees> Employee { get; set; }

}

}

Now your MVCEmployeeContext.cs file looks like this.

Now open Startup.cs file and add following two using statements at the top

using Microsoft.EntityFrameworkCore;

using MvcDemo.Models

Add database context to Startup.cs file by adding following line in ConfigureServices method

services.AddDbContext<MvcEmployeeContext>(options =>options.UseSqlite("Data Source=MvcEmployee.db"));

This line of code tells Entity Framework which model classes are included in the data model. You’re defining one entity set of Employee object, which will be represented in the database as an Employee table.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.EntityFrameworkCore;

using MvcDemo.Models;

namespace MvcDemo

{

public class Startup

{

public Startup(IConfiguration configuration)

{

Configuration = configuration;

}

public IConfiguration Configuration { get; }

public void ConfigureServices(IServiceCollection services)

{

services.AddMvc();

services.AddDbContext<MvcEmployeeContext>(options =>options.UseSqlite("Data Source=MvcEmployee.db"));

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

else

{

app.UseExceptionHandler("/Home/Error");

}

app.UseStaticFiles();

app.UseMvc(routes =>

{

routes.MapRoute(

name: "default",

template: "{controller=Home}/{action=Index}/{id?}");

});

}

}

}

Scaffold the Employee Controller

Now we are going to Scaffold the controller and Razor view files. Navigate to MvcDemo project folder in your system.

Press and hold Shift and right click, it will give you the option to “open PowerShell window here “as shown in image below. Click and it will open a PowerShell window.

Here I am using Windows PowerShell but you can use command prompt also. It will give the same results.

Run the following command:

dotnet restore

Again run the following command:

dotnet aspnet-codegenerator controller -name EmployeeController -m Employees -dc MvcEmployeeContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries

Refer to the image below:

This will create following in our project

• An Employee controller (Controllers/EmployeeController.cs)
• Razor view files for Create, Delete, Details, Edit and Index pages (Views/Employee/\.cshtml)

This process of automatically creating CRUD(Create, Read, Update, Delete) action methods and views is called scaffolding

Initial Migration of Database

Open PowerShell in Project folder.

Run the following commands

• dotnet ef migrations add InitialCreate
• dotnet ef database update

The “dotnet ef migrations add InitialCreate” command generates code to create the initial database schema. The schema is based on the model specified in the DbContext (In the Models/MVCEmployeeContext.cs file)

After running the second command you will get a message at end “Done”.

And that’s it. We have created our first ASP.Net Core MVC application.

Before running the application ,open launch.json and ensure that the ‘Program’ path is set correctly as

"program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/MvcDemo.dll"

Now your launch.json will look like this,

{

// Use IntelliSense to find out which attributes exist for C# debugging

// Use hover for the description of the existing attributes

// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md

"version": "0.2.0",

"configurations": [

{

"name": ".NET Core Launch (web)",

"type": "coreclr",

"request": "launch",

"preLaunchTask": "build",

// If you have changed target frameworks, make sure to update the program path.

"program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/MvcDemo.dll",

"args": [],

"cwd": "${workspaceRoot}",

"stopAtEntry": false,

"internalConsoleOptions": "openOnSessionStart",

"launchBrowser": {

"enabled": true,

"args": "${auto-detect-url}",

"windows": {

"command": "cmd.exe",

"args": "/C start ${auto-detect-url}"

},

"osx": {

"command": "open"

},

"linux": {

"command": "xdg-open"

}

},

"env": {

"ASPNETCORE_ENVIRONMENT": "Development"

},

"sourceFileMap": {

"/Views": "${workspaceRoot}/Views"

}

},

{

"name": ".NET Core Attach",

"type": "coreclr",

"request": "attach",

"processId": "${command:pickProcess}"

}

]

}

Now press F5 to debug the application. It will open the browser, navigate to http://localhost:xxxx/employee.

You can see the below page.

 

Now we will proceed with our CRUD operations.

Click on CreateNew to create a new Employee record. Add a new Employee record as shown in image below.

If we miss data in any fields then we will get a required field validation message.

After You click on Create button in Create View it will redirect to Index view where we can see all the employees added by us. Here we can also see action methods Edit, Details and Delete.

If we want to edit any existing employee record, then click Edit action link, it will open Edit view as below where we can change the employee data.

Here we have changed the Salary of employee with name Dhiraj from 200000 to 250000. Click on Save to return to Index view to see the updated changes as highlighted in image below.

If we miss any fields while editing employee records, then edit view will also throw required field validation error message.

If you want to see the details of any Employee, then click on Details action link, which will open the Details view as shown in image below.

Click on Back to List to go back to Index view.Now we will perform Delete operation on Employee with name Dhiraj. Click on Delete action link which will open Delete view asking for a confirmation to delete

Once we click on Delete button the employee record gets deleted and we will be redirected to Index view. Here we can see that the employee with name Dhiraj has been removed from our record.

An Insight into Delete method

Open EmployeeController.cs and scroll down to Delete method. You can observe that we have two Delete method, one each for HTTP Get and HTTP Post

// GET: Employee/Delete/5

public async Task<IActionResult> Delete(int? id)

{

if (id == null)

{

return NotFound();

}

var employees = await _context.Employee

.SingleOrDefaultAsync(m => m.Id == id);

if (employees == null)

{

return NotFound();

}

return View(employees);

}

// POST: Employee/Delete/5

[HttpPost, ActionName("Delete")]

[ValidateAntiForgeryToken]

public async Task<IActionResult> DeleteConfirmed(int id)

{

var employees = await _context.Employee.SingleOrDefaultAsync(m => m.Id == id);

_context.Employee.Remove(employees);

await _context.SaveChangesAsync();

return RedirectToAction(nameof(Index));

}

Note that the HTTP GET Delete method doesn’t delete the specified employee record, it returns a view of the employee where you can submit (HttpPost) the deletion. Performing a delete operation in response to a GET request (or for that matter, performing an edit operation, create operation, or any other operation that changes data) opens up a security hole.

The [HttpPost] method that deletes the data is named DeleteConfirmed to give the HTTP POST method a unique signature.

Conclusion

We have learned about creating a sample web application using ASP .Net Core MVC and   perform CRUD operations on it. We have used Entity Framework and SQLite for our Demo. Please post your valuable feedback in comment section.

Download the source code from Github.