Build web sites with ASP.NET Core
Objective
Scenario
Virtual Machines
- TR22 Base Windows 10
Exercise 1 : Creating Your First ASP.NET Core 1.0 Project
In this exercise, you will create your first ASP.NET project in Visual Studio 2015.
-
Login to the VM
Login to the lab VM with the user Administrator and the password Passw0rd!
-
Task 1: Creating the project
Launch an instance of Visual Studio 2015 from the taskbar.
-
Select File
Select File | New | Project and then select the Visual C# | Web node.
-
In the New Project dialog
In the New Project dialog, select ASP.NET Core Web Application (.NET Core).
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Name the project MvcMovie
Name the project MvcMovie.
-
Click OK
Click OK to launch the new ASP.NET Core Web Application wizard.
-
Select the Web Application template
Select the Web Application template, which is designed for Web applications that use MVC. Make sure the option to Host in the cloud is not selected and then click OK.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Press F5 to build and run the Web application
Press F5 to build and run the Web application. This experience should feel pretty familiar, and the resulting browser window will produce the default Web application. Close the browser window when satisfied. Note that you may need to press Shift+F5 in Visual Studio to force stop debugging.
-
In Solution Explorer
In Solution Explorer, note that the root folder for all source is now the src folder. Also note how the project is structured differently than in previous versions of Visual Studio.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Expand the wwwroot folder
Expand the wwwroot folder. This folder is designed to contain all static content for the Web site, such as CSS files and images. If you have source content, such as LESS files, their final output should ultimately be copied to the appropriate path in this wwwroot folder for proper deployment.
Click Continue to advance to the next exercise.
Login to the VM
Login to the lab VM with the user Administrator and the password Passw0rd!
Task 1: Creating the project
Launch an instance of Visual Studio 2015 from the taskbar.
Select File
Select File | New | Project and then select the Visual C# | Web node.
In the New Project dialog
In the New Project dialog, select ASP.NET Core Web Application (.NET Core).
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Name the project MvcMovie
Name the project MvcMovie.
Click OK
Click OK to launch the new ASP.NET Core Web Application wizard.
Select the Web Application template
Select the Web Application template, which is designed for Web applications that use MVC. Make sure the option to Host in the cloud is not selected and then click OK.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Press F5 to build and run the Web application
Press F5 to build and run the Web application. This experience should feel pretty familiar, and the resulting browser window will produce the default Web application. Close the browser window when satisfied. Note that you may need to press Shift+F5 in Visual Studio to force stop debugging.
In Solution Explorer
In Solution Explorer, note that the root folder for all source is now the src folder. Also note how the project is structured differently than in previous versions of Visual Studio.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Expand the wwwroot folder
Expand the wwwroot folder. This folder is designed to contain all static content for the Web site, such as CSS files and images. If you have source content, such as LESS files, their final output should ultimately be copied to the appropriate path in this wwwroot folder for proper deployment.
Exercise 2 : Task 2: Adding a Controller
-
In the Solution Explorer
In the Solution Explorer, right-click Controllers and select Add|New Item.
-
In the Add New Item dialog
In the Add New Item dialog, select the MVC Controller Class item template.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Name the controller HelloWorldController
Name the controller HelloWorldController and press Add.
-
Replace the contents of the file
Replace the contents of the file with the following:
using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
//
// GET: /HelloWorld/
public string Index()
{
return "This is my default action...";
}
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}
-
Press Ctrl+F5 to build
Press Ctrl+F5 to build and run the application in non-debug mode.
-
Append HelloWorld to the path in the address bar
Append HelloWorld to the path in the address bar.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Browse to http://localhost:xxxx/HelloWorld/Welcome
Browse to http://localhost:xxxx/HelloWorld/Welcome. The Welcome method runs and returns the string “This is the Welcome action method...”.
-
Return to Visual Studio
Return to Visual Studio. You can leave the application running in the browser.
-
Replace the Welcome method with the following
Replace the Welcome method with the following:
public string Welcome(string name, int numTimes = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, id: {numTimes}");
}
-
Save your changes
Save your changes.
-
Return to the browser
Return to the browser. Browse to http://localhost:xxxx/HelloWorld/Welcome?name={your name}&numtimes=4.
Note: In Visual Studio 2015, when you are running in IIS Express without debugging (Ctl+F5), you don’t need to build the app after changing the code. Just save the file, refresh your browser and you can see the changes.
-
Replace the Welcome method with the following
Replace the Welcome method with the following:
public string Welcome(string name, int ID = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, id: {ID}");
}
-
Save your changes
Save your changes.
-
Return to the browser
Return to the browser. Browse to http://localhost:xxxx/HelloWorld/Welcome/3?name={your name}.
Note: This time the third URL segment matched the route parameter id. The Welcome method contains a parameter id that matched the URL template in the MapRoute method. The trailing ? (in id?) indicates the id parameter is optional.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
Click Continue to advance to the next exercise.
In the Solution Explorer
In the Solution Explorer, right-click Controllers and select Add|New Item.
In the Add New Item dialog
In the Add New Item dialog, select the MVC Controller Class item template.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Name the controller HelloWorldController
Name the controller HelloWorldController and press Add.
Replace the contents of the file
Replace the contents of the file with the following:
using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
//
// GET: /HelloWorld/
public string Index()
{
return "This is my default action...";
}
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}
using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
//
// GET: /HelloWorld/
public string Index()
{
return "This is my default action...";
}
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}
Press Ctrl+F5 to build
Press Ctrl+F5 to build and run the application in non-debug mode.
Append HelloWorld to the path in the address bar
Append HelloWorld to the path in the address bar.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Browse to http://localhost:xxxx/HelloWorld/Welcome
Browse to http://localhost:xxxx/HelloWorld/Welcome. The Welcome method runs and returns the string “This is the Welcome action method...”.
Return to Visual Studio
Return to Visual Studio. You can leave the application running in the browser.
Replace the Welcome method with the following
Replace the Welcome method with the following:
public string Welcome(string name, int numTimes = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, id: {numTimes}");
}
public string Welcome(string name, int numTimes = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, id: {numTimes}");
}
Save your changes
Save your changes.
Return to the browser
Return to the browser. Browse to http://localhost:xxxx/HelloWorld/Welcome?name={your name}&numtimes=4.
Note: In Visual Studio 2015, when you are running in IIS Express without debugging (Ctl+F5), you don’t need to build the app after changing the code. Just save the file, refresh your browser and you can see the changes.
Replace the Welcome method with the following
Replace the Welcome method with the following:
public string Welcome(string name, int ID = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, id: {ID}");
}
public string Welcome(string name, int ID = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, id: {ID}");
}
Save your changes
Save your changes.
Return to the browser
Return to the browser. Browse to http://localhost:xxxx/HelloWorld/Welcome/3?name={your name}.
Note: This time the third URL segment matched the route parameter id. The Welcome method contains a parameter id that matched the URL template in the MapRoute method. The trailing ? (in id?) indicates the id parameter is optional.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
Note: This time the third URL segment matched the route parameter id. The Welcome method contains a parameter id that matched the URL template in the MapRoute method. The trailing ? (in id?) indicates the id parameter is optional.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
Exercise 3 : Task 3: Adding a View
In this section you’re going to modify the HelloWorldController class to use Razor view template files to cleanly encapsulate the process of generating HTML responses to a client.
-
Modify the Index method to return a View object
Modify the Index method to return a View object.
public IActionResult Index()
{
return View();
}
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Right click on the Views folder
Right click on the Views folder and select Add|New Folder. Name the folder HelloWorld.
-
Right click on the HelloWorld folder
Right click on the HelloWorld folder and select Add|New Item.
-
In the Add New Item dialog
In the Add New Item dialog, select the MVC View Page template.
-
Accept the default name and click Add
Accept the default name and click Add.
-
Replace the contents of the Views/HelloWorld/Index
Replace the contents of the Views/HelloWorld/Index.cshtml Razor view file with the following:
@{
ViewData["Title"] = "Index";
}
Index
Hello from our View Template!
-
Save all of your changes
Save all of your changes.
-
Navigate to http://localhost:xxxx/HelloWorld
Navigate to http://localhost:xxxx/HelloWorld.
The Index method in the HelloWorldController didn’t do much work; it simply ran the statement return View();, which specified that the method should use a view template file to render a response to the browser. Because you didn’t explicitly specify the name of the view template file to use, MVC defaulted to using the Index.cshtml view file in the /Views/HelloWorld folder.
-
Open Views/Shared/_Layout.cshtml
Open Views/Shared/_Layout.cshtml.
-
Change the anchor text in the layout template
Change the anchor text in the layout template.
@ViewData["Title"] – Movie App
-
Change the controller from Home to Movies
-
Save all of your changes.
Save all of your changes.
-
Select the About link in the browser
Select the About link in the browser. Notice how each page displays the title.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Open Views/HelloWorld/Index.cshtml
Open Views/HelloWorld/Index.cshtml.
-
Change the text
Change the text that appears in the title of the browser and the secondary header (
element).
@{
ViewData["Title"] = "Movie List";
}
My Movie List
Modify the Index method to return a View object
Modify the Index method to return a View object.
public IActionResult Index()
{
return View();
}
Please click on the camera icon on the lower left hand side to view the screenshot.
public IActionResult Index()
{
return View();
}
Please click on the camera icon on the lower left hand side to view the screenshot.
Right click on the Views folder
Right click on the Views folder and select Add|New Folder. Name the folder HelloWorld.
Right click on the HelloWorld folder
Right click on the HelloWorld folder and select Add|New Item.
In the Add New Item dialog
In the Add New Item dialog, select the MVC View Page template.
Accept the default name and click Add
Accept the default name and click Add.
Replace the contents of the Views/HelloWorld/Index
Replace the contents of the Views/HelloWorld/Index.cshtml Razor view file with the following:
@{
ViewData["Title"] = "Index";
}
Hello from our View Template!
@{
ViewData["Title"] = "Index";
}
Index
Hello from our View Template!
Save all of your changes
Save all of your changes.
Navigate to http://localhost:xxxx/HelloWorld
Navigate to http://localhost:xxxx/HelloWorld.
The Index method in the HelloWorldController didn’t do much work; it simply ran the statement return View();, which specified that the method should use a view template file to render a response to the browser. Because you didn’t explicitly specify the name of the view template file to use, MVC defaulted to using the Index.cshtml view file in the /Views/HelloWorld folder.
The Index method in the HelloWorldController didn’t do much work; it simply ran the statement return View();, which specified that the method should use a view template file to render a response to the browser. Because you didn’t explicitly specify the name of the view template file to use, MVC defaulted to using the Index.cshtml view file in the /Views/HelloWorld folder.
Open Views/Shared/_Layout.cshtml
Open Views/Shared/_Layout.cshtml.
Change the anchor text in the layout template
Change the anchor text in the layout template.
@ViewData["Title"] – Movie App
Change the controller from Home to Movies
Save all of your changes.
Save all of your changes.
Select the About link in the browser
Select the About link in the browser. Notice how each page displays the title.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Open Views/HelloWorld/Index.cshtml
Open Views/HelloWorld/Index.cshtml.
Change the text
Change the text that appears in the title of the browser and the secondary header (
element).
element).
@{
ViewData["Title"] = "Movie List";
}
My Movie List
Save all of your changes
Save all of your changes and navigate to http://localhost:xxxx/HelloWorld. Notice that the browser title, the primary heading, and the secondary headings have changed.
Please click on the camera icon on the lower left hand side to view the screenshot.Currently, the Welcome method in the HelloWorldController class takes a name and a ID parameter and then outputs the values directly to the browser. Rather than have the controller render this response as a string, let’s change the controller to use a view template instead.
Please click on the camera icon on the lower left hand side to view the screenshot.Currently, the Welcome method in the HelloWorldController class takes a name and a ID parameter and then outputs the values directly to the browser. Rather than have the controller render this response as a string, let’s change the controller to use a view template instead.
Return to the HelloWorldController.cs
Return to the HelloWorldController.cs file and change the Welcome method to add a Message and NumTimes value to the ViewData dictionary and to then return a View.
public IActionResult Welcome(string name, int numTimes = 1)
{
ViewData["Message"] = "Hello " + name;
ViewData["NumTimes"] = numTimes;
return View();
}
public IActionResult Welcome(string name, int numTimes = 1)
{
ViewData["Message"] = "Hello " + name;
ViewData["NumTimes"] = numTimes;
return View();
}
To create a Welcome view template
To create a Welcome view template, right click on the HelloWorld folder and select Add|New Item.
In the Add New Item dialog
In the Add New Item dialog, select the MVC View Page template.
Name the view page Welcome
Name the view page Welcome and click Add.
Replace the contents
Replace the contents of Welcome.cshtml with the following:
@{
ViewData["Title"] = "About";
}
@{
ViewData["Title"] = "About";
}
Welcome
- @ViewData["Message"]
@for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
{
}
Save all of your changes
Save all of your changes and browse to http://localhost:xxxx/HelloWorld/Welcome?name={your name}&numtimes=4.
Click Continue to advance to the next exercise.
Exercise 4 : Task 4: Adding a Model
In this section you’ll add some classes for managing movies in a database. You’ll use a .NET Framework data-access technology known as the Entity Framework Core to define and work with these data model classes.
In the current version of the ASP.NET Core MVC tools for Visual Studio, scaffolding a model is only supported when you create a new project with individual user accounts. We hope to have this fixed in the next tooling update. Until that’s fixed, you’ll need to create a new project with the same name. Because the project has the same name, you’ll need to create it in another directory.
-
Return to Visual Studio
Return to Visual Studio
-
Select File | New | Project
Select File | New | Project and then select the Visual C# | Web node.
-
In the New Project dialog
In the New Project dialog, select ASP.NET Core Web Application (.NET Core).
-
Name the project MvcMovie
Name the project MvcMovie. Make sure you select a different location for this project.
-
Click OK
Click OK to launch the new ASP.NET Core Web Application wizard.
-
Select the Web Application template
Select the Web Application template.
-
Click Change Authentication
Click Change Authentication
-
In the Change Authentication dialog
In the Change Authentication dialog, set the authentication to Individual User Accounts.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Click OK twice to create the project
Click OK twice to create the project.
-
Repeat steps 9-11 in the previous task
Repeat steps 9-11 in the previous task to change the title and menu link in the layout file. That way, you can tap the MvcMovie link to invoke the Movie controller. We’ll scaffold the movies controller in this project.
-
In the Solution Explorer
In the Solution Explorer, right click the Models folder and select Add|Class. Name the class Movie.
-
Add the following properties:
Add the following properties:
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
-
Build the project
Build the project.
-
In the Solution Explorer
In the Solution Explorer, right-click the Controllers folder and select Add|Controller.
-
In the Add Scaffold dialog
In the Add Scaffold dialog, select MVC Controller with views, using Entity Framework and click Add.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
In the Add Controller dialog
In the Add Controller dialog, set the Model class to Movie and the Data context class to MvcMovie.Data.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Click Add
Click Add.
-
To get the database ready
To get the database ready, first make sure IIS Express is stopped. If it is running, right click the IIS Express system tray icon and select Exit or MvcMovie|Stop Site.
-
Open a file in the root of the project
Open a file in the root of the project, for example Startup.cs.
-
Right-click the file’s tab
Right-click the file’s tab and select Open Containing Folder.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Shift-right-click and select Open
Shift-right-click and select Open command window here.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Run the following commands in the command prompt:
Run the following commands in the command prompt:
dotnet ef migrations add Initial
dotnet ef database update
-
Run the app and click the MVCMovie link
Run the app and click the MVCMovie link.
Please click on the camera icon on the lower left hand side to view the screenshot.
-
Click Create New. Add a new movie
Click Create New. Add a new movie.
-
Test the Edit, Details and Delete links
Test the Edit, Details and Delete links.
Click Continue to advance to the next exercise.
In the current version of the ASP.NET Core MVC tools for Visual Studio, scaffolding a model is only supported when you create a new project with individual user accounts. We hope to have this fixed in the next tooling update. Until that’s fixed, you’ll need to create a new project with the same name. Because the project has the same name, you’ll need to create it in another directory.
Return to Visual Studio
Return to Visual Studio
Select File | New | Project
Select File | New | Project and then select the Visual C# | Web node.
In the New Project dialog
In the New Project dialog, select ASP.NET Core Web Application (.NET Core).
Name the project MvcMovie
Name the project MvcMovie. Make sure you select a different location for this project.
Click OK
Click OK to launch the new ASP.NET Core Web Application wizard.
Select the Web Application template
Select the Web Application template.
Click Change Authentication
Click Change Authentication
In the Change Authentication dialog
In the Change Authentication dialog, set the authentication to Individual User Accounts.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Click OK twice to create the project
Click OK twice to create the project.
Repeat steps 9-11 in the previous task
Repeat steps 9-11 in the previous task to change the title and menu link in the layout file. That way, you can tap the MvcMovie link to invoke the Movie controller. We’ll scaffold the movies controller in this project.
In the Solution Explorer
In the Solution Explorer, right click the Models folder and select Add|Class. Name the class Movie.
Add the following properties:
Add the following properties:
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
Build the project
Build the project.
In the Solution Explorer
In the Solution Explorer, right-click the Controllers folder and select Add|Controller.
In the Add Scaffold dialog
In the Add Scaffold dialog, select MVC Controller with views, using Entity Framework and click Add.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
In the Add Controller dialog
In the Add Controller dialog, set the Model class to Movie and the Data context class to MvcMovie.Data.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Click Add
Click Add.
To get the database ready
To get the database ready, first make sure IIS Express is stopped. If it is running, right click the IIS Express system tray icon and select Exit or MvcMovie|Stop Site.
Open a file in the root of the project
Open a file in the root of the project, for example Startup.cs.
Right-click the file’s tab
Right-click the file’s tab and select Open Containing Folder.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Shift-right-click and select Open
Shift-right-click and select Open command window here.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Run the following commands in the command prompt:
Run the following commands in the command prompt:
dotnet ef migrations add Initial
dotnet ef database update
dotnet ef migrations add Initial
dotnet ef database update
Run the app and click the MVCMovie link
Run the app and click the MVCMovie link.
Please click on the camera icon on the lower left hand side to view the screenshot.
Please click on the camera icon on the lower left hand side to view the screenshot.
Click Create New. Add a new movie
Click Create New. Add a new movie.
Test the Edit, Details and Delete links
Test the Edit, Details and Delete links.
Exercise 5 : Additional Tasks
-
Additional Tasks
You now have a simple MVC app that works with a database. You also have pages to display, edit, update and delete data. If you would like to continue working with this project and explore additional tasks, refer to the following tutorial steps on the ASP.NET website:
- Working with SQL Server LocalDB: https://docs.asp.net/en/latest/tutorials/first-mvc-app/working-with-sql.html
- Controller methods and views: https://docs.asp.net/en/latest/tutorials/first-mvc-app/controller-methods-views.html
- Adding Search: https://docs.asp.net/en/latest/tutorials/first-mvc-app/search.html
- Adding a New Field: https://docs.asp.net/en/latest/tutorials/first-mvc-app/new-field.html
- Adding Validation: https://docs.asp.net/en/latest/tutorials/first-mvc-app/validation.html
- Examining the Details and Delete methods: https://docs.asp.net/en/latest/tutorials/first-mvc-app/details.html
Congratulations!
Click Continue to close and finalize this lab.
Additional Tasks
You now have a simple MVC app that works with a database. You also have pages to display, edit, update and delete data. If you would like to continue working with this project and explore additional tasks, refer to the following tutorial steps on the ASP.NET website:
- Working with SQL Server LocalDB: https://docs.asp.net/en/latest/tutorials/first-mvc-app/working-with-sql.html
- Controller methods and views: https://docs.asp.net/en/latest/tutorials/first-mvc-app/controller-methods-views.html
- Adding Search: https://docs.asp.net/en/latest/tutorials/first-mvc-app/search.html
- Adding a New Field: https://docs.asp.net/en/latest/tutorials/first-mvc-app/new-field.html
- Adding Validation: https://docs.asp.net/en/latest/tutorials/first-mvc-app/validation.html
- Examining the Details and Delete methods: https://docs.asp.net/en/latest/tutorials/first-mvc-app/details.html
Click Continue to close and finalize this lab.
2 comments:
A very huge set of information within your post sharing and also within the snaps of handling it, which is very much helpful. Thanks a lot. Best IT company in coimbatore | Best web site developer
Post a Comment