PIAPS_CW/WebApp/Pages/Index.cshtml

79 lines
3.6 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@page
@model WebApp.Pages.IndexModel
@{
ViewData["Title"] = "Catalog Page";
}
<!-- Шапка -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Catalog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Category
</a>
@* МОЖНО РЕАЛИЗОВАТЬ ПОЗЖЕ *@
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Pistols</a></li>
<li><a class="dropdown-item" href="#">Rifles</a></li>
<li><a class="dropdown-item" href="#">Hard Weapons</a></li>
</ul>
</li>
</ul>
<form class="d-flex" method="get">
<input asp-for="ProductsModel" type="search" placeholder="Поиск" name="search" value="">
<button class="btn btn-outline-success" type="submit"><i class="fas fa-search"></i></button>
</form>
<div class="form-group ms-3">
<div class="d-flex align-items-center">
<input type="range" step="1000" min="0" max="10000" value="" class="custom-range me-2" id="priceFrom">
<label for="priceFrom">От: <span id="priceLabelFrom">50 000</span> руб.</label>
</div>
<div class="d-flex align-items-center">
<input type="range" step="1000" min="0" max="100000" value="" class="custom-range me-2" id="priceTo">
<label for="priceTo">До: <span id="priceLabelTo">50 000</span> руб.</label>
</div>
</div>
</div>
</div>
</nav>
@* КАРТОЧКИ ТОВАРОВ *@
<div id="Row">
<div class="row row-cols-1 row-cols-md-3 g-5">
@foreach (var weapon in @Model.ProductsModel)
{
<div class="col mb-4">
<div class="card h-100">
<img src="data:image/png;base64,@Convert.ToBase64String(Model.GetMediaByProduct(weapon))" class="card-img-top" alt="@weapon.Name">
<div class="card-body">
<h5 class="card-title">@weapon.Name</h5>
<p class="card-text">Цена: @weapon.Price руб.</p>
<a href="#" class="btn btn-primary">В корзину</a>
<a href="#" class="btn btn-secondary">Просмотр</a>
</div>
</div>
</div>
}
</div>
</div>
@section Scripts {
<script>
// СЛАЙДЕРЫ
document.getElementById("priceFrom").addEventListener("input", function () {
var price = this.value;
document.getElementById("priceLabelFrom").textContent = price + " р.";
});
document.getElementById("priceTo").addEventListener("input", function () {
var price = this.value;
document.getElementById("priceLabelTo").textContent = price + " р.";
});
</script>
}