Steps in Creating Simple But Dynamic Powerful Web App using ASP.NET Core MVC connected to a Database

What is ASP.NET Core?

“ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-based, Internet-connected applications.” - Intro to ASP.NET Core

Just to give you an idea

On June 26, 2016, Microsoft introduced a new way in building small to enterprise powerful web app. This is “ASP.NET Core.” Hearing ASP.NET is not new for most developers. If you’ve been developing web app for so long, I’m sure you already heard about the ASP.NET. Just to give you a history tip, ASP.NET was first released in January 2002 with it’s .Net Framework version 1.0. For the past decade and half, ASP.NET evolved until it reached the version 4.6 and 5 that turned to dead version and renamed to ASP.NET Core 1.0.

Why should I choose ASP.NET Core?

As you can notice, ASP.NET doesn’t stop in involving and updating. It has been here for so long and the team in Microsoft who handles this is so busy bringing every developer a more wider scope and range.

Here are some cool benefits you can get in using ASP.NET Core:

Image Ref.

I already introduced to you what is ASP.NET Core. If you’re ready, let’s get started!

FTF (First Things First)

It’s important that you have a good environment with installed:

Visual Studio Community (Free) or Visual Studio Code (FREE) for IDE. Download here (Choose your OS platform).
Installed .NET SDK. Download here (Choose your OS platform)
Git. (Optional) Download here (Choose your OS platform)
SQL Server 2017 Express Edition (FREE with 10 GB Database Storage) or any other server. Download SQL Server here here

Overview of what we’re going to create:

Target Output: “ASP.NET Core App connected to Database”

Aim: After you finish this simple steps, you are already know how to create your first ASP.NET Core Web App connected to a MS SQL Server database.

If you’re ready, let’s get started!

Setting Up the Environment

1.0 Create Your ASP.NET Core MVC Project

1.1 Open your Visual Studio then choose “File -> New -> Project” or “Ctrl+Shift+N”

1.2 Choose “Installed -> Visual C# -> Web” then look for “ASP.NET Core Web Application” and name your application.

1.3 When the white dialog box appears, choose “Web Application (Model-View-Controller) and click “Okay”

In the image, 1.) Make sure it’s .NET Core and 2.) Make sure you use the stable version of ASP.NET Core.

You can run the created project by clicking “IIS Express” or by simply clicking “F5”

2.0 Edit the Project .csproj

2.1 Right click your project and choose “Edit ‘YourProjectName’.csproj

2.2 Below the <DotNetCliToolReference … /> Add this code snippet,

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

Similar to this image

We include this DotNeCliToolReference because we’ll rely on git bash, or powershell or cmd in our code first entity commands. This is also a best practice as far as I know.

2.3 Save the file.

3.0 Create Your Model Class

3.1 Right click the “Model” folder, choose “Add -> Class…” then name it, in our example, it’s “Students” and click “Add”

Our Model class “Students” represents our table in mind where it has different properties like string, int etc.. Don’t get confused, model is just a class.

3.2 Add these following properties inside the Students class:

public int Id { get; set; } // this represents our primary key in the table that we're going to migrate.
public string Firstname { get; set; }
public string Lastname { get; set; }
public string Section { get; set; }

3.3 Save the File.

4.0 Create Controller and Generate Views using Scaffolding

4.1 Right click the “Controllers” folder, choose “Add -> Controller…” then choose “MVC Controller with views, using Entity Framework” and click “Add”

Similar to the image above.

4.2 When the white dialog appears, choose the class name you’ve created which is “Students”

4.3 Since we haven’t created yet the our Data context class, simply click the “+” and then click “Add” (You can name your Db Context class like the image below)

4.4 When you’re done, click the “Add”

Folders and files were generated in just a seconds.

This is the power of Scaffolding. It generates different files and folders that are connected with each other.

You can re-view each file and folder that are created.

5.0 Establish Database Connection inside the Db Context Class file.

5.1 Open your DbContext file, and put this code snippet

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
    optionsBuilder.UseSqlServer(@"Server=YOUR_HOST;Database=YOUR_DATABASE;User id=YOUR_USERID;Password=YOUR_PASSWORD;Integrated Security=false;MultipleActiveResultSets=true");
}

Similar to this image above.

6.0 Update Startup.cs

6.1 Look for Startup.cs in your project and open it.

6.2 Look for this codes,

services.AddDbContext<MyDbContext>(options=>options.UseSqlServer(Configuration.GetConnectionString("MyDbContext)));

and replace it with this,

services.AddDbContext<MyDbContext>();

Since our connection string was created in our db context.

7.0 Locate your Project using Command Line

7.1 Open your installed git bash by searching in our windows “Git Bash” (You can use Windows PowerShell)

7.2 Locate your project with this following commands until you reach the main project files.

"cd" for change directory
"ls" for viewing as lists

8.0 Prepare Your Model Class for Migration

8.1 Enter this code snippet (below) and hit enter.

dotnet ef migrations add initialcreate

This will create a snapshot file ready for migration. You can use different filename in the “initialcreate” just avoid spaces and other illegal characters.

After you hit enter, you’ll notice it created a folder with a name of “Migrations” and files with with a name of …_initialcreate.cs and also MyDbContextModelSnapShot.cs

If you open the …_initialcreate.cs file, you’ll notice this codes.

Basically, what it saying, “Hey, I’m going to CreateTable with a name of “Students” this table has a columns of Id which is nullable isn’t allowed (false) and IdentityColumn(Primary Key and Auto Increment). I’m going to create other columns too, the Firstname, Lastname and Section that allows string values.

9.0 Update Your Database

9.1 Go back to your command line then enter this code snippet (below) and hit enter.

dotnet ef database update

This will update your database. Since you haven’t created yetyour database in Sql Server, it will automatically create together with your table and columns.

After you received a “Done.” message, everything works fine.