Vâng, e xem giúp em với ạ
@model PagedList.IPagedList<Models.ViewModel.FoodViewModel>
@using PagedList.Mvc
@{
ViewBag.Title = "Index";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
@section header{
Đồ uống/ Món ăn
}
@section jsFooter{
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Assets/Admin/libs/js/Controller/FoodController.js"></script>
}
<div class="row">
<div class="col-lg-12">
<div class="card">
<h4 class="card-header fas fa-coffee"> Danh sách đồ uống/ món ăn</h4>
<div class="card-body">
@using (Html.BeginForm("Index", "Food", FormMethod.Get))
{
<div class="row">
<div class="col-md-4">
<input type="text" value="@ViewBag.seaching" placeholder="Tìm kiếm theo tên" class="form-control" name="seaching" />
</div>
<div class="col-md-4 ">
<div class="col-lg-10">
@Html.DropDownList("idCategory", null, "--Chọn danh mục--", new { @class = "nav-link dropdown-toggle" })
</div>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-info active btn-sm"><i class="fas fa-search"></i> Tìm kiếm</button>
</div>
</div>
}
<br />
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">STT</th>
<th scope="col">Tên đồ</th>
<th scope="col">Danh mục</th>
<th scope="col">Giá</th>
<th scope="col">Tình trạng</th>
<th scope="col">Thao tác</th>
</tr>
</thead>
<tbody>
@{
var dem = 1;
var count = ViewBag.rowStart + dem;
foreach (var item in Model)
{
<tr id="[email protected]_id">
<th scope="col">@(count++)</th>
<td scope="col">@item.Food_name</td>
<td scope="col">@item.FoodCate_name</td>
<td scope="col">@item.Price</td>
<td scope="col">
<a href="#" class="btn-active" data-id="@item.Food_id">@(item.status ? "Kích hoạt" : "Khóa")</a>
</td>
<td>
<a name="CapNhat" class="btn btn-success btn-sm update" onclick="UpdateFood(@item.Food_id)" style="color:white" data-id="@item.Food_id">
<i class="fas fa-edit"></i> Cập nhập</a>
|
<a class="btn btn-warning btn-sm" id="@item.Food_id" onclick="clik(@item.Food_id)" style="color:white;"><i class="fas fa-trash-alt"></i> Xóa</a>
</td>
</tr>
}
}
</tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("Index", new { page = @page, seaching = @ViewBag.seaching, idCategory = @ViewBag.idCategory }))
</div>
</div>
</div>
@*-----POPUP-----------------------------------------------------------------------------------*@
<div id="modal-wrapper" class="modal">
@using (Html.BeginForm("Update", "Food", FormMethod.Post, new { @class = "modal-content animate" }))
{
var m = Model.FirstOrDefault(q=>q.status);
@Html.AntiForgeryToken()
<div class="imgcontainer">
<span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">×</span>
<h1 style="text-align:center;color:#007bff">Cập nhật món ăn</h1>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="form-group row">
<label for="inputEmail2" class="col- col-lg-3 col-form-label text-right">Tên món <span>*</span></label>
<div class="col-9 col-lg-8">
<input type="text" placeholder="Enter Username" id="FoodName" class="text" name="Food_name">
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group row">
<label for="inputWebSite" class="col-3 col-lg-3 col-form-label text-right">Danh mục *</label>
<div class="col-9 col-lg-6 ">
@Html.DropDownList("idCategory", null, "--Chọn danh mục--", new { @class = "nav-link dropdown-toggle", @id = "DanhMuc", @style = "margin-left:26px;padding: 5px 81px 5px 16px;" })
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group row">
<label for="inputEmail2" class="col- col-lg-3 col-form-label text-right">Giá<span>*</span></label>
<div class="col-9 col-lg-6">
<input type="text" placeholder="Enter Password" id="Price" class="text" name="price">
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group row">
<div class="col-3 col-lg-6 col-form-label text-left">
<div class="form-check">
<label class="form-check-label">
Trạng thái *
</label>
<input type="checkbox" name="status" class="checkbox" id="ckStatus" />
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="button" id="submit" >Save</button>
</div>
}
</div>
</div>
@*Popup Update*@
<script>
//Bind giữ liệu lên popup
function UpdateFood(id) {
document.getElementById('modal-wrapper').style.display = 'block';
$.ajax({
url: '@Url.Action("Edit", "Food")',
data:
{ id: id },
type: 'GET',
dataType: 'json',
success: function (response) {
var data = response.data;
$('#FoodName').val(data.Food_name);
$('#Price').val(data.price);
$('#ckStatus').prop('checked', data.status);
$('#DanhMuc').val(data.idCategory);
},
error: function () {
alert('Lỗi rồi');
}
})
}
//Update dữ liệu
$('#submit').click(function (e) {
debugger
var list = $(".update");
list.addClass("selected");
//call ajax
var foodName = $('#FoodName').val();
var price = $('#Price').val();
var stt = $('#ckStatus').prop('checked');
var danhmuc = $('#DanhMuc').val();
var food_id = $('.update.selected').data("id");
var url = 'Admin/Food/Index';
var Food = {
Food_id: food_id,
Food_name: foodName,
price: price,
status: stt,
idCategory: danhmuc
}
$.ajax({
url: '@Url.Action("Update", "Food")',
type: 'POST',
data: Food ,
success: function () {
alert("Update success");
document.getElementById('modal-wrapper').style.display = 'none';
window.location.reload();
},
error: function () {
alert('error');
}
})
list.removeClass("selected");
e.preventDefault();
})
</script>