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";
|
ViewData["Title"] = "New Order";
|
||||||
}
|
}
|
||||||
<div class="brand-header-block">
|
|
||||||
<ul class="container">
|
@Html.Partial("_Header", new Header() { Controller = "Cart", Text = "Back to cart" })
|
||||||
<li class="brand-header-back"><a asp-area="" asp-controller="Cart" asp-action="Index">Back to cart</a></li>
|
|
||||||
</ul>
|
<div class="container">
|
||||||
</div>
|
|
||||||
<div class="container order-create-container">
|
|
||||||
<form method="post" asp-controller="Order" asp-action="Create">
|
<form method="post" asp-controller="Order" asp-action="Create">
|
||||||
<div asp-validation-summary="All" class="text-danger"></div>
|
<section class="esh-orders_new-section">
|
||||||
<h4 class="order-create-section-title">SHIPPING ADDRESS</h4>
|
<h4>SHIPPING ADDRESS</h4>
|
||||||
<div class="form-horizontal row">
|
<div class="row">
|
||||||
<div class="form-group col-sm-6">
|
<div class="col-md-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" />
|
|
||||||
</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>
|
|
||||||
</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" />
|
|
||||||
</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>
|
|
||||||
</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="form-group">
|
||||||
<div class="col-md-offset-8 col-md-4">
|
<label asp-for="Street">ADDRESS</label>
|
||||||
<input type="submit" value="[ Place Order ]" name="action" class="btn btn-default btn-brand btn-cart" />
|
<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>
|
</div>
|
||||||
|
<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>
|
||||||
|
</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="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>
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,70 +1,48 @@
|
|||||||
@model Microsoft.eShopOnContainers.WebMVC.Models.Order
|
@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>
|
<section class="esh-orders_new-section">
|
||||||
<th>
|
<article class="esh-orders_new-titles row">
|
||||||
BRAND
|
<section class="esh-orders_new-title col-xs-12">Order details</section>
|
||||||
</th>
|
</article>
|
||||||
<th>
|
|
||||||
PRICE
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
QUANTITY
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
COST
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@for (int i = 0; i < Model.OrderItems.Count; i++)
|
@for (int i = 0; i < Model.OrderItems.Count; i++)
|
||||||
{
|
{
|
||||||
var item = Model.OrderItems[i];
|
var item = Model.OrderItems[i];
|
||||||
|
|
||||||
<tr>
|
<article class="esh-orders_new-items esh-orders_new-items--border row">
|
||||||
<td class="cart-product-column">
|
<section class="esh-orders_new-item col-md-4 hidden-md-down">
|
||||||
<img class="cart-product-image" src="@item.PictureUrl" />
|
<img class="esh-orders_new-image" src="@item.PictureUrl">
|
||||||
<input type="hidden" value="@item.PictureUrl" name=@("orderitems[" + i + "].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>
|
</section>
|
||||||
</div>
|
<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