ASP .NET 5.0 Step by step 3

 View components

• Components/ShoppingCartSummary.cs
• Client-side library
• Provider: cdnjs
• Library: font-awesome
• Location: wwwroot/lib/font-awesome/
• Views/Shared/_Layout.cshtml
• <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
• Views/Shared/Components/ShoppingCartSummary/Default.cshtml

@model ShoppingCartViewModel

@if (Model.ShoppingCart.ShoppingCartItems.Count > 0)

{

    <li>

        <a asp-controller="ShoppingCart" asp-action="Index">

            <i class="fas fa-cart-plus"></i>

            <span id="cart-status">

                @Model.ShoppingCart.ShoppingCartItems.Count

            </span>

        </a>

    </li>

} 

• Views/Shared/_Layout.cshtml
• @await Component.InvokeAsync("ShoppingCartSummary")

Run

• Components/CategoryMenu.cs
• Views/Shared/Components/CategoryMenu/Default.cshtml
• Views/Shared/_Layout.cshtml
• @await Component.InvokeAsync("CategoryMenu") 

Run

• Controllers/CarController.cs
• public ViewResult List(string category)
• Views/Shared/Components/CategoryMenu/Default.cshtml

@model IEnumerable<Category>

<li class="dropdown">

    <a class="dropdown-toggle" data-toggle="dropdown">Categories</a>

    <ul class="dropdown-menu">

        @foreach (var category in Model)

        {

            <li>

                <a class="dropdown-item" asp-controller="Car" asp-action="List" asp-route-category="@category.CategoryName">@category.CategoryName</a>

            </li>

        }

        <li class="dropdown-divider"></li>

        <li>

            <a asp-controller="Car" asp-action="List" asp-route-category="">View all cars</a>

        </li>

    </ul>

</li>

• Views/Shared/_Layout.cshtml
• bootstrap.bundle.js

<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

<script src="~/lib/jquery/jquery.js"></script>

<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>

<link href="~/content/site.css?11" rel="stylesheet" />

<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />

Run

Custom Tag Helper

• Controllers/ContactController.cs
• TagHelpers/EmailTagHelper.cs
• Views/_ViewImports.cshtml
• @addTagHelper CarShop.TagHelpers.*, CarShop

Build the solution so it can know there is a new tag helper

• Views/Contact/Index.cshtml
• <email address="info@carshop.com" linke-text="contact us"></email>
• Views/Shared/_Layout.cshtml

<li><a asp-controller="Contact" asp-action="Index">Contact</a></li>

Run

Order Form

• Models/Order.cs
• Model/OrderDetail.cs
• Model/AppDbContext.cs

public DbSet<Order> Orders { get; set; }

public DbSet<OrderDetail> OrderDetails { get; set; }

• Model/IOrderRepository.cs
• Model/OrderRepository.cs
• Startup.cs

services.AddScoped<IOrderRepository, OrderRepository>();

• Controllers/OrderController.cs
• Views/Order/Checkout.cshtml
• Views/ShoppingCart/Index.cshtml

<div class="text-center">

    <a class="btn btn-primary" asp-controller="ShoppingCart" asp-action="ClearCart">Clear Cart</a>

    <a class="btn btn-primary" asp-controller="Order" asp-action="Checkout">Checkout</a>

</div>

• Views/Order/CheckoutComplete.cshtml
• Database
• Add-Migration -Name AddingAttributes
• Update-Database -Migration AddingAttributes

Run

Authentication, authorization

• Install Nuget Package
• Microsoft.AspNetCore.Identity.EntityFrameworkCore
• Microsoft.AspNetCore.Identity.UI
• Models/AppDbContext.cs

public class AppDbContext : IdentityDbContext<IdentityUser>

• Package Manager Console
• Add-Migration -Name AddingIdentity
• Update-Database -Migration AddingIdentity
• Startup.cs
• After app.UseRouteing()

app.UseAuthentication();

app.UseAuthorization();

• Add -> New Scaffolded item -> Identity
• Account\Login
• Account\Logout
• Account\Register
• Data context class: AppDbContext
• Startup.cs

services.AddDefaultIdentity<IdentityUser>().AddEntityFrameworkStores<AppDbContext>();

services.AddRazorPages();

endpoints.MapRazorPages();

• Views/Shared/_Layout.cshtml

<partial name="_LoginPartial" />

@RenderSection("Scripts", required: false)

• Views/Shared/_LoginPartial.cshtml

@using Microsoft.AspNetCore.Identity

@inject SignInManager<IdentityUser> SignInManager

@inject UserManager<IdentityUser> UserManager

@if (SignInManager.IsSignedIn(User))

{

    <li class="nav-item">

        <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>

    </li>

    <li class="nav-item">

        <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">

            <button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button>

        </form>

    </li>

}

else

{

    <li class="nav-item">

        <a id="register" asp-area="Identity" asp-page="/Account/Register">Register</a>

    </li>

    <li class="nav-item">

        <a id="login" asp-area="Identity" asp-page="/Account/Login">Login</a>

    </li>

}

Run

• Controllers/OrderController.cs

[Authorize]