Friday, March 17, 2017

Build websites with ASP.NET Core

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.

       

        @ViewData["Title"] – <strong>Movie App</strong>
  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 EditDetails 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.

    2 comments:

    Vcom Infotech Company said...

    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

    Ancy merina said...
    This comment has been removed by the author.