Add pizza markup

Add form markup to the Pizza Razor page

Replace the contents of Pages/Pizza.cshtml with the following markup. Save your changes.

@page
@using RazorPagesPizza.Models
@model RazorPagesPizza.Pages.PizzaModel

@{
    ViewData["Title"] = "Pizza List";
}

<h1>Pizza List 🍕 </h1>

<form method="post" class="card p-3">
    
    <div class="row">
        <div asp-validation-summary="All"></div>
    </div>
    
    <div class="form-group mb-0 align-middle">
        
        <label asp-for="NewPizza.Name">Name</label>
        <input type="text" asp-for="NewPizza.Name" class="mr-5">
        
        <label asp-for="NewPizza.Size">Size</label>
        <select asp-for="NewPizza.Size" asp-items="Html.GetEnumSelectList<PizzaSize>()" class="mr-5"></select>
        
        <label asp-for="NewPizza.Price"></label>
        <input asp-for="NewPizza.Price" class="mr-5" />
        
        <label asp-for="NewPizza.IsGlutenFree">Gluten Free</label>
        <input type="checkbox" asp-for="NewPizza.IsGlutenFree" class="mr-5">
        
        <button class="btn btn-primary">Add</button>
        
    </div>
</form>
<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    
    @foreach (var pizza in Model.pizzas)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@Model.GlutenFreeText(pizza)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
</table>

@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

• The Pizza Razor page uses HTML and Razor to support a product creation form.

• The form accepts Name and Price values for the product to be created.

• With relatively little markup, dynamic features have been provided through Razor Tag Helpers.

• Client-side form input validation is enabled via the inclusion of the Pages/Shared/_ValidationScriptsPartial.cshtml partial view.

• The partial view's contents are injected into the layout page's Scripts section.

At this stage, the project will have compilation errors as the NewPizza object does not exists yet, we will be adding this a little later.