Build web sites with ASP.NET Core

Objective

Scenario

Virtual Machines

1. 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.

1. Login to the VM
   Login to the lab VM with the user Administrator and the password Passw0rd!
2. Task 1: Creating the project
   Launch an instance of Visual Studio 2015 from the taskbar.
3. Select File
   Select File | New | Project and then select the Visual C# | Web node.
4. 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.
   
5. Name the project MvcMovie
   Name the project MvcMovie.
6. Click OK
   Click OK to launch the new ASP.NET Core Web Application wizard.
7. 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.
   
8. 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.
9. 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.
   
10. 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.

Exercise 2 : Task 2: Adding a Controller

1. In the Solution Explorer
   In the Solution Explorer, right-click Controllers and select Add|New Item.
2. 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.
   
3. Name the controller HelloWorldController
   Name the controller HelloWorldController and press Add.
4. 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...";
   
           }
   
       }
   
   }
5. Press Ctrl+F5 to build
   Press Ctrl+F5 to build and run the application in non-debug mode.
6. 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.
   
7. 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...”.
8. Return to Visual Studio
   Return to Visual Studio. You can leave the application running in the browser.
9. 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}");
   
   }
10. Save your changes
    Save your changes.
11. 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.
12. 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}");
    
    }
13. Save your changes
    Save your changes.
14. 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.

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.

1. 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.
   
2. Right click on the Views folder
   Right click on the Views folder and select Add|New Folder. Name the folder HelloWorld.
3. Right click on the HelloWorld folder
   Right click on the HelloWorld folder and select Add|New Item.
4. In the Add New Item dialog
   In the Add New Item dialog, select the MVC View Page template.
5. Accept the default name and click Add
   Accept the default name and click Add.
6. 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!
7. Save all of your changes
   Save all of your changes.
8. 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.
9. Open Views/Shared/_Layout.cshtml
   Open Views/Shared/_Layout.cshtml.
10. Change the anchor text in the layout template
    Change the anchor text in the layout template.
    
       
    
       
11. Change the controller from Home to Movies
    Change the controller from Home to Movies.
    
    MvcMovie
12. Save all of your changes.
    Save all of your changes.
13. 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.
    
14. Open Views/HelloWorld/Index.cshtml
    Open Views/HelloWorld/Index.cshtml.
15. 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

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.

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();

}

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";

}

Welcome

    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)

    {

       
• @ViewData["Message"]


    }

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.

1. Return to Visual Studio
   Return to Visual Studio
2. Select File | New | Project
   Select File | New | Project and then select the Visual C# | Web node.
3. In the New Project dialog
   In the New Project dialog, select ASP.NET Core Web Application (.NET Core).
4. Name the project MvcMovie
   Name the project MvcMovie. Make sure you select a different location for this project.
5. Click OK
   Click OK to launch the new ASP.NET Core Web Application wizard.
6. Select the Web Application template
   Select the Web Application template.
7. Click Change Authentication
   Click Change Authentication
8. 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.
   
9. Click OK twice to create the project
   Click OK twice to create the project.
10. 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.
11. In the Solution Explorer
    In the Solution Explorer, right click the Models folder and select Add|Class. Name the class Movie.
12. 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; }
13. Build the project
    Build the project.
14. In the Solution Explorer
    In the Solution Explorer, right-click the Controllers folder and select Add|Controller.
15. 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.
    
16. 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.
    
17. Click Add
    Click Add.
18. 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.
19. Open a file in the root of the project
    Open a file in the root of the project, for example Startup.cs.
20. 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.
    
21. 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.
    
22. 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
23. 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.
    
24. Click Create New. Add a new movie
    Click Create New. Add a new movie.
25. Test the Edit, Details and Delete links
    Test the Edit, Details and Delete links.

Click Continue to advance to the next exercise.

Exercise 5 : Additional Tasks

1. 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.