update new orders layout on MVC
This commit is contained in:
Quique Fernandez
parent
9bd73c42cb
commit
827d6ff0f5
@ -5,79 +5,92 @@
|
||||
@{
|
||||
ViewData["Title"] = "New Order";
|
||||
}
|
||||
<div class="brand-header-block">
|
||||
<ul class="container">
|
||||
<li class="brand-header-back"><a asp-area="" asp-controller="Cart" asp-action="Index">Back to cart</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container order-create-container">
|
||||
|
||||
@Html.Partial("_Header", new Header() { Controller = "Cart", Text = "Back to cart" })
|
||||
|
||||
<div class="container">
|
||||
<form method="post" asp-controller="Order" asp-action="Create">
|
||||
<div asp-validation-summary="All" class="text-danger"></div>
|
||||
<h4 class="order-create-section-title">SHIPPING ADDRESS</h4>
|
||||
<div class="form-horizontal row">
|
||||
<div class="form-group col-sm-6">
|
||||
<label asp-for="Street" class="control-label form-label">Address</label>
|
||||
<input asp-for="Street" class="form-control form-input" />
|
||||
<span asp-validation-for="Street" class="text-danger" />
|
||||
</div>
|
||||
<div class="form-group col-sm-6">
|
||||
<label asp-for="City" class="control-label form-label">City</label>
|
||||
<input asp-for="City" class="form-control form-input" />
|
||||
<span asp-validation-for="City" class="text-danger" />
|
||||
</div>
|
||||
<div class="form-group col-sm-6">
|
||||
<label asp-for="State" class="control-label form-label">State</label>
|
||||
<input asp-for="State" class="form-control form-input" />
|
||||
<span asp-validation-for="State" class="text-danger" />
|
||||
</div>
|
||||
<div class="form-group col-sm-6">
|
||||
<label asp-for="Country" class="control-label form-label">Country</label>
|
||||
<input asp-for="Country" class="form-control form-input" />
|
||||
<span asp-validation-for="Country" class="text-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<br /><br />
|
||||
<div class="order-create-section-payment">
|
||||
<h4 class="order-create-section-title">PAYMENT METHOD</h4>
|
||||
<div class="form-horizontal row">
|
||||
<div class="form-group col-sm-6">
|
||||
<label asp-for="CardNumber" class="control-label form-label">Card Number</label>
|
||||
<input asp-for="CardNumber" class="form-control form-input" />
|
||||
<span asp-validation-for="CardNumber" class="text-danger" />
|
||||
<section class="esh-orders_new-section">
|
||||
<h4>SHIPPING ADDRESS</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="Street">ADDRESS</label>
|
||||
<input asp-for="Street" class="form-control form-input" type="text" placeholder="Street"/>
|
||||
<span asp-validation-for="Street" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-sm-6">
|
||||
<label asp-for="CardHolderName" class="control-label form-label">Cardholder Name</label>
|
||||
<input asp-for="CardHolderName" class="form-control form-input" />
|
||||
<span asp-validation-for="CardHolderName" class="text-danger" />
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="City">CITY</label>
|
||||
<input asp-for="City" class="form-control form-input" type="text" placeholder="City"/>
|
||||
<span asp-validation-for="City" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="State">STATE</label>
|
||||
<input asp-for="State" class="form-control form-input" type="text" placeholder="State"/>
|
||||
<span asp-validation-for="State" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="Country">COUNTRY</label>
|
||||
<input asp-for="Country" class="form-control form-input" type="text" placeholder="Country"/>
|
||||
<span asp-validation-for="Country" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-horizontal row">
|
||||
<div class="form-group col-sm-3">
|
||||
<label asp-for="CardExpirationShort" class="control-label form-label">Expiration Date</label>
|
||||
<input asp-for="CardExpirationShort" placeholder="MM/YY" class="form-control form-select" />
|
||||
<span asp-validation-for="CardExpirationShort" class="text-danger" />
|
||||
</section>
|
||||
<section class="esh-orders_new-section">
|
||||
<h4>PAYMENT METHOD</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="CardNumber">CARD NUMBER</label>
|
||||
<input asp-for="CardNumber" class="form-control form-input" type="text" placeholder="000000000"/>
|
||||
<span asp-validation-for="CardNumber" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-sm-3">
|
||||
<label asp-for="CardSecurityNumber" class="control-label form-label">Security Code</label>
|
||||
<input asp-for="CardSecurityNumber" class="form-control form-input form-input-small" />
|
||||
<span asp-validation-for="CardSecurityNumber" class="text-danger" />
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="CardHolderName">CARDHOLDER NAME</label>
|
||||
<input asp-for="CardHolderName" class="form-control form-input" type="text" placeholder="Cardholder"/>
|
||||
<span asp-validation-for="CardHolderName" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="CardExpirationShort">EXPIRATION DATE</label>
|
||||
<input asp-for="CardExpirationShort" class="form-control form-input" type="text" placeholder="00/00"/>
|
||||
<span asp-validation-for="CardExpirationShort" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label asp-for="CardSecurityNumber">SECURITY CODE</label>
|
||||
<input asp-for="CardSecurityNumber" class="form-control form-input" type="text" placeholder="000"/>
|
||||
<span asp-validation-for="CardSecurityNumber" class="alert alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br /><br />
|
||||
<div class="col-md-12 order-create-section-items">
|
||||
<section>
|
||||
@*@await Component.InvokeAsync("CartList", new { user = UserManager.Parse(User) })*@
|
||||
@await Html.PartialAsync("_OrderItems")
|
||||
</section>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-md-offset-8 col-md-4">
|
||||
<input type="submit" value="[ Place Order ]" name="action" class="btn btn-default btn-brand btn-cart" />
|
||||
</section>
|
||||
|
||||
@await Html.PartialAsync("_OrderItems")
|
||||
|
||||
<section class="esh-orders_new-section">
|
||||
<div class="form-group">
|
||||
<div class="col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="submit" value="[ Place Order ]" name="action" class="btn esh-orders_new-placeOrder" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
||||
}
|
||||
|
||||
@ -1,70 +1,48 @@
|
||||
@model Microsoft.eShopOnContainers.WebMVC.Models.Order
|
||||
|
||||
<div class="col-md-12">
|
||||
<section>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cart-product-column">
|
||||
PRODUCT
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
<th>
|
||||
BRAND
|
||||
</th>
|
||||
<th>
|
||||
PRICE
|
||||
</th>
|
||||
<th>
|
||||
QUANTITY
|
||||
</th>
|
||||
<th>
|
||||
COST
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (int i = 0; i < Model.OrderItems.Count; i++)
|
||||
{
|
||||
var item = Model.OrderItems[i];
|
||||
<section class="esh-orders_new-section">
|
||||
<article class="esh-orders_new-titles row">
|
||||
<section class="esh-orders_new-title col-xs-12">Order details</section>
|
||||
</article>
|
||||
|
||||
<tr>
|
||||
<td class="cart-product-column">
|
||||
<img class="cart-product-image" src="@item.PictureUrl" />
|
||||
<input type="hidden" value="@item.PictureUrl" name=@("orderitems[" + i + "].PictureUrl") />
|
||||
</td>
|
||||
<td class="cart-product-column">
|
||||
<span class="cart-product-column-name">@item.ProductName</span>
|
||||
<input type="hidden" value="@item.ProductName" name=@("orderitems[" + i + "].ProductName") />
|
||||
</td>
|
||||
<td class="cart-product-column">ROSLYN</td>
|
||||
<td class="cart-product-column">$ @item.UnitPrice
|
||||
<input type="hidden" value="@item.UnitPrice" name=@("orderitems[" + i + "].UnitPrice") />
|
||||
</td>
|
||||
<td class="cart-product-column">@item.Units
|
||||
<input type="hidden" value="@item.Units" name=@("orderitems[" + i + "].Units") />
|
||||
</td>
|
||||
<td class="cart-product-column cart-total-value">$ @Math.Round(item.Units * item.UnitPrice, 2)</td>
|
||||
</tr>
|
||||
}
|
||||
<tr class="cart-totals">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cart-total-value">
|
||||
<div class="cart-total-label"><span>TOTAL</span></div>
|
||||
<span>$ @Model.Total</span>
|
||||
<input type="hidden" value="@Model.Total" name="Total"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
@for (int i = 0; i < Model.OrderItems.Count; i++)
|
||||
{
|
||||
var item = Model.OrderItems[i];
|
||||
|
||||
<article class="esh-orders_new-items esh-orders_new-items--border row">
|
||||
<section class="esh-orders_new-item col-md-4 hidden-md-down">
|
||||
<img class="esh-orders_new-image" src="@item.PictureUrl">
|
||||
<input type="hidden" value="@item.PictureUrl" name=@("orderitems[" + i + "].PictureUrl") />
|
||||
</section>
|
||||
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">
|
||||
@item.ProductName
|
||||
<input type="hidden" value="@item.ProductName" name=@("orderitems[" + i + "].ProductName") />
|
||||
</section>
|
||||
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">
|
||||
$ @item.UnitPrice
|
||||
<input type="hidden" value="@item.UnitPrice" name=@("orderitems[" + i + "].UnitPrice") />
|
||||
</section>
|
||||
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">
|
||||
@item.Units
|
||||
<input type="hidden" value="@item.Units" name=@("orderitems[" + i + "].Units") />
|
||||
</section>
|
||||
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ @Math.Round(item.Units * item.UnitPrice, 2)</section>
|
||||
</article>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="esh-orders_new-section esh-orders_new-section--right">
|
||||
<article class="esh-orders_new-titles row">
|
||||
<section class="esh-orders_new-title col-xs-10"></section>
|
||||
<section class="esh-orders_new-title col-xs-2">Total</section>
|
||||
</article>
|
||||
|
||||
<article class="esh-orders_new-items row">
|
||||
<section class="esh-orders_new-item col-xs-10"></section>
|
||||
<section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">
|
||||
$ @Model.Total
|
||||
<input type="hidden" value="@Model.Total" name="Total"/>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user