Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
Lab 4: Get started with ASP.NET Core and Visual Studio
Prerequisites
This tutorial teaches the basics of building an ASP.NET Core Razor Pages web app. Razor Pages is the recommended way to build UI for web apps in ASP.NET Core.
Visual Studio 2017 version 15.7.3 or later with the following workloads:
ASP.NET and web development
.NET Core cross-platform development
.NET Core 2.1 SDK or later
a.
1. 2.
3.
Create a new project for web application (Revision) Estimation time for this section A: 10 Minutes
From Visual Studio, select File > New > Project. Complete the New Project dialog:
Complete the New ASP.NET Core Web Application (.NET Core) – MVCFlowerShop dialog:
In the left pane, tap .NET Core
In the center pane, tap ASP.NET Core Web Application (.NET Core)
Name the project “MVCFlowerShop” (It’s important to name the project
“MVCFlowerShop ” so when you copy code, the namespace will match.)
TapOK
In the version selector drop-down box select ASP.NET Core 2.1
Select Web Application
Tap OK.
Tap F5 to run the app in debug mode or Ctrl-F5 in non-debug mode.
The default template gives you working Home, About and Contact links. The browser
image above doesn’t show these links. Depending on the size of your browser, you might need to click the navigation icon to show them.
If you were running in debug mode, tap Shift-F5 to stop debugging.
Level 3
Asia Pacific University of Technology & Innovation
Page 1 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
b. Use F7 to toggle between a Razor Page and the PageModel.
Estimation time for this section B: 5 Minutes
1. To enable F7 toggling between a Razor Page (*.cshtml file) and the C# file
(*.cshtml.cs):
Select Tools > Options > Environment > Keyboard
Enter ToggleRazorView in Show commands containing.
Select EditorContextMenus.CodeWindow.ToggleRazorView
In the Press shortcut keys entry box, press F7.
Select Assign > OK
2. Now, when you press on the F7 button, you can directly toggling between a Razor Page and its C# file.
Level 3
Asia Pacific University of Technology & Innovation Page 2 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
c.
Add a model to a Razor Pages app in ASP.NET Core.
Estimation time for this section C: 45 Minutes
In this section, you add classes for managing flowers in a database. You use these classes with Entity Framework Core (EF Core) to work with a database. EF Core is an object-relational mapping (ORM) framework that simplifies the data access code that you have to write.
The model classes you create are known as POCO classes (from “plain-old CLR objects”) because they don’t have any dependency on EF Core. They define the properties of the data that are stored in the database.
In this tutorial, you write the model classes first, and EF Core creates the database.
1.
Add a data model
In Solution Explorer, right-click the MVCFlowerShop project > Add > New
Folder. Name the folder Models.
Level 3
Asia Pacific University of Technology & Innovation Page 3 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
Right click the Models folder. Select Add > Class. Name the class Flower and
replace the contents of the
Flower
class with the following code:
using using
namespace MVCFlowerShop.Models
{
public class Flower
public int
public string
public
public string
public decimal
get set
ID {
;
;}
FlowerName {
get set
;
;}
DateTime FlowerProducedDate {
get; set; }
}
System;
System.ComponentModel.DataAnnotations.Schema;
{
Type {
get set
get set
;
;}
Price {
;
;}
}
Level 3
Asia Pacific University of Technology & Innovation Page 4 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
2. Scaffold the flower model
In this section, the flower model is scaffolded. That is, the scaffolding tool produces pages for Create, Read, Update, and Delete (CRUD) operations for the flower model.
Create a Pages/Flowers folder:
In Solution Explorer, right click on the Pages folder > Add > New Folder.
Name the folder Flowers
In Solution Explorer, right click on the Pages/Flowers folder > Add > New Scaffolded Item.
Level 3 Asia Pacific University of Technology & Innovation Page 5 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
In the Add Scaffold dialog, select Razor Pages using Entity Framework
(CRUD) > Add.
Complete the Add Razor Pages using Entity Framework (CRUD) dialog:
In the Model class drop down, select Flower (MVCFlowerShop.Models).
In the Data context class row, select the + (plus) sign and accept the generated
name MVCFlowerShop.Models.MVCFlowerShopContext.
Select Add.
The scaffold process creates and updates the following files:
Level 3
Asia Pacific University of Technology & Innovation Page 6 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
Notes:
Files created
Pages/Flowers: Create, Delete, Details, Edit, Index. These pages are detailed in the next tutorial.
Data/ MVCFlowerShopContext.cs
File updated
Startup.cs: Changes to this file are detailed in the next section.
appsettings.json: The connection string used to connect to a local database is added.
Level 3 Asia Pacific University of Technology & Innovation Page 7 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
3. Examine the context registered with dependency injection
ASP.NET Core is built with dependency injection. Services (such as the EF Core DB context) are registered with dependency injection during application startup. Components that require these services (such as Razor Pages) are provided these services via constructor parameters. The constructor code that gets a DB context instance is shown later in the tutorial.
The scaffolding tool automatically created a DB context and registered it with the dependency injection container.
Examine the Startup.ConfigureServices method. The highlighted line was added by the scaffolder:
The main class that coordinates EF Core functionality for a given data model is the DB context class. The data context is derived from Microsoft.EntityFrameworkCore.DbContext.
The data context specifies which entities are included in the data model. In this project, the class is named MVCFlowerShopContext.
The preceding code creates a DbSet
The name of the connection string is passed in to the context by calling a method on a DbContextOptions object. For local development, the ASP.NET Core configuration system reads the connection string from the appsettings.json file.
Level 3 Asia Pacific University of Technology & Innovation Page 8 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
4.
Perform initial migration
In this section, you use the Package Manager Console (PMC) to:
Add an initial migration.
Update the database with the initial migration.
From the Tools menu, select NuGet Package Manager > Package Manager Console.
In the PMC, enter the following commands:
Add-Migration Initial
Update-Database
5.
Test the app
Run the app and append /Flowers to the URL in the browser (http://localhost:port/flowers).
Test the Create link.
Level 3
Asia Pacific University of Technology & Innovation Page 9 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
Level 3
Asia Pacific University of Technology & Innovation Page 10 of 18
Test the Delete link.
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
Test the Edit link.
Test the Details link.
If you get a SQL exception, verify you have run migrations and updated the database.
Level 3
Asia Pacific University of Technology & Innovation Page 11 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
d. Work with SQL Server LocalDB and ASP.NET Core.
Estimation time for this section D: 20 Minutes
1. Go to the View > SQL Server Object Explorer (SSOX). A local database named “MVCFlowerShopContext” will be auto generated via the entity framework (CRUD).
LocalDB is a lightweight version of the SQL Server Express Database Engine that’s targeted
for program development. LocalDB starts on demand and runs in user mode, so there’s no complex configuration. By default, LocalDB database creates “*.mdf” files in the C:/Users/
Level 3 Asia Pacific University of Technology & Innovation Page 12 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
2. Right click on the Flower table and select View Designer:
Note the key icon next to ID. By default, EF creates a property named ID for the primary key.
3. Right click on the Flower table and select View Data:
Level 3 Asia Pacific University of Technology & Innovation Page 13 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
4. Beside, you also can access and manage these local database through the Microsoft SQL Server Management Studio. The access steps as below:
Server type: Database Engine
Server name: (localdb)\MSSQLLocalDB
Authentication: Windows Authentication
5. Follow the below steps to read your current data from the Microsoft SQL Server Management Studios as below:
6. Now, link the Flowers CRUD Pages into the current homepage:
Level 3 Asia Pacific University of Technology & Innovation Page 14 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
i. Go to the \Shared folder and open the _Layout.cshtml. Add the below code into this page:
ii. Re-run the application again, now you can directly access the CRUD pages from the Flower List button. e.g.
iii. Click the edit button and update some of the data inside the database.
iv. Now, you rerun the select statement in the Microsoft SQL Server Management Studio, you will see the data have been changed.
Level 3
Asia Pacific University of Technology & Innovation Page 15 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC)
Get started with ASP.NET Core and Visual Studio
e.
Seed the database.
Estimation time for this section C: 30 Minutes
1. Create a new class named SeedData in the Models folder.
2. Replace the generated code with the following:
Microsoft.EntityFrameworkCore;
Microsoft.Extensions.DependencyInjection;
System;
System.Linq;
using
using
using
using
namespace MVCFlowerShop.Models
{
public static class SeedData
public static void Initialize(IServiceProvider serviceProvider)
{
{
using (var context = new MVCFlowerShopContext(
// Look for any movies.
if (context.Flower.Any())
return; // DB has been seeded
serviceProvider.GetRequiredService
()))
{
{
}
context.Flower.AddRange(
new
Flower
{
FlowerName =
“Chrysanthemum”,
“Asteraceae”,
2.49M
“2018-2-12″),
FlowerProducedDate = DateTime.Parse(
Type =
Price =
Level 3
Asia Pacific University of Technology & Innovation
Page 16 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC)
Get started with ASP.NET Core and Visual Studio
},
new Flower
1.69M
” Arum-lily”, ” Araceae”,
“2018-8-12”),
{
FlowerName =
FlowerProducedDate = DateTime.Parse(
Type =
Price =
}
);
context.SaveChanges();
}
}
}
}
If there are any flowers in the DB, the seed initializer returns and no flowers are added.
3. Add the seed initializer
Open the Program.cs and modify the
Get a DB context instance from the dependency injection container.
Call the seed method, passing to it the context.
Dispose the context when the seed method completes.
Main
method to do the following:
Add the highlighted code into the current Program.cs. The following code
shows the final updated code in the Program.cs file.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
namespace MVCFlowerShop
{
public class Program
{
public static void Main(string[] args)
{
var host = CreateWebHostBuilder(args).Build();
using (var scope = host.Services.CreateScope())
{
var services = scope.ServiceProvider;
try
{
var context =
services.GetRequiredService
context.Database.Migrate();
SeedData.Initialize(services);
}
catch (Exception ex)
{
Level 3
Asia Pacific University of Technology & Innovation
Page 17 of 18
using Microsoft.Extensions.Logging;
using Microsoft.EntityFrameworkCore;
using MVCFlowerShop.Models;
using Microsoft.Extensions.DependencyInjection;
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio
var logger =
services.GetRequiredService
DB.”);
}
logger.LogError(ex, “An error occurred seeding the
}
host.Run();
Finally, the app shows the seeded data:
}
public static IWebHostBuilder CreateWebHostBuilder(string[]
args) =>
WebHost.CreateDefaultBuilder(args)
.UseStartup
} }
4. Test the app
Delete all the records in the DB. You can do this with the delete links in the browser or from SSOX.
Force the app to initialize (call the methods in the Startup class) so the seed method runs. To force initialization, IIS Express must be stopped and restarted.
Summary:
In this tutorial, we learned how to build a simple CRUD functions in an application by using the EF core framework. We also learned how to access the local database by using the software such as Visual Studio and Microsoft SQL Server Management Studio.
In next tutorial, we will learn how to modify and updates the current ASP .Net Core pages using Visual Studio.
Level 3 Asia Pacific University of Technology & Innovation Page 18 of 18