[英]2 actions in 1 modal window for different controllers
在创建购物篮时，如果用户改变了购买的想法，如何在结帐前从列表中删除一个项目，生成的购物篮被发送到地址
//BasketViewModel
public class BasketViewModel
{
public string ClientName { get; set; }
public string Phone { get; set; }
public BasketDetailViewModel[] Details { get; set; }
}
public class BasketDetailViewModel
{
public int ProductId { get; set; }
public string Name { get; set; }
public string Image { get; set; }
public byte Count { get; set; }
public decimal Price { get; set; }
}
我将收集的订单发送到 controller
//OrderController
[HttpPost]
public async Task<IActionResult> Create(BasketViewModel viewModel)
{
some logic
}
它工作正常 - 创建了一个订单。
但是，如果客户改变了购买产品的想法，并且想在注册前将其从购物篮中删除，如何实施。 我知道我不能在表单中使用表单，但是，当使用 jquery 时，问题出现了，因为篮子是模态 window 并以 ViewComponent 的角色附加到中央模板（_Layout）
_Layout.cshtml
<head />
....
<div class="body">
@RenderBody()
</div>
<div class="modalViewBasket>
@await Component.InvokeAsync("BasketDetail");
</div>
....
<footer/>
在这个模态 window 中，我有一个从篮子中删除商品的按钮
<div class="mr-4">
<a class="btn btn-primary btn-sm" id="btnDelete" data-value="@Model.Details[i].ProductId">
<i class="fa fa-times"></i>
</a>
</div>
我如何确保当我点击它时，ID 是从这个模态 window 发送到 controller 的？
可能有某种 ajax 选项，但是，脚本需要在 Layout 上实现，但是如果篮子里有很多产品，那么如何传递按下了哪个按钮呢？ 因为它使用 for 循环来显示所有产品
//BasketController
[HttpDelete("{id}")]
public async Task<IActionResult> Delete(int id)
{
...some logic
}
模态篮子
@model BasketViewModel
@{
Layout = null;
}
@if (Model.Details.Sum(x => x.Count) > 0)
{
<div class="modal fade cart-modal" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Корзина (@Model.Details.Sum(x => x.Count))</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Order" asp-action="Create" method="post" class="col-12">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label asp-for="ClientName" class="control-label">Покупатель</label>
<input asp-for="ClientName" class="form-control" placeholder="Укажите имя" />
<span asp-validation-for="ClientName" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label asp-for="Phone" class="control-label">Телефон</label>
<input asp-for="Phone" id="phone-number" value="+7" class="form-control" placeholder="Укажите Телефон" />
<span asp-validation-for="Phone" class="text-danger"></span>
</div>
</div>
</div>
<hr />
@for (int i = 0; i < Model.Details.Length; i++)
{
<div>
<div class="row align-items-center">
<div class="col-5 d-flex align-items-center">
<div class="mr-4">
<a class="btn btn-primary btn-sm" id="btnDelete" data-value="@Model.Details[i].ProductId">
<i class="fa fa-times"></i>
//here need send to /Basket/Delete/id
</a>
</div>
<!-- Image -->
<a asp-controller="Product" asp-action="Get" asp-route-id="@Model.Details[i].ProductId">
@{
var image = $"~/images/{Model.Details[i].Image ?? "No_pic.png"}";
<img src="@Url.Content(image)" alt="..." width="auto" height="100">
}
</a>
</div>
<div class="col-7">
@Html.EditorFor(x => x.Details[i].ProductId, new { htmlAttributes = new { @class = "form-control", @style = "display: none" } })
@Html.EditorFor(x => x.Details[i].Price, new { htmlAttributes = new { @class = "form-control", @style = "display: none" } })
@Html.EditorFor(x => x.Details[i].Count, new { htmlAttributes = new { @class = "form-control", @style = "display: none" } })
<!-- Title -->
<h6><a class="link-title" asp-controller="Product" asp-action="Get" asp-route-id="@Model.Details[i].ProductId" asp-for="@Model.Details[i].ProductId">@Model.Details[i].Name</a></h6>
<div class="product-meta">
<span class="mr-2 text-primary">@Model.Details[i].Price.ToString("n2")</span><span class="text-muted">x @Model.Details[i].Count</span>
</div>
</div>
</div>
</div>
<br />
}
<hr class="my-5">
<div class="d-flex justify-content-between align-items-center mb-8">
<span class="text-muted">Итого к оплате:</span> <span class="text-dark">@Model.Details.Sum(x => x.Count * x.Price).ToString("n2")</span>
</div>
<button type="submit" class="btn btn-primary btn-animated mr-2">
<i class="fa fa-shopping-cart mr-1"></i>Заказать
</button>
</form>
</div>
</div>
</div>
</div>
}
您可以this传递给 function 以获取您按下的按钮。这是一个演示如何将 ajax 的 id 传递给 controller：
_布局：
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
<div>
@await Component.InvokeAsync("BasketDetail",new BasketViewModel { ClientName= "ClientName",Phone="1111",Details=new BasketDetailViewModel[] { new BasketDetailViewModel { ProductId=1, Name="p1",Count=1}, new BasketDetailViewModel { ProductId = 12, Name = "p2", Count = 1 }, new BasketDetailViewModel { ProductId = 3, Name = "p3", Count = 2 } } })
</div>
<button id="runButton" type="button" class="btn btn-sm btn-outline-secondary">Run</button>
</div>
_layout中的点击方法：
<script type="text/javascript">
$('#runButton').click(function () {
$("#cartModal").modal('show');
});
function deleteProduct(s) {
var id = $(s).attr("data-value");
$.ajax({
url: "Tests/Delete/"+id,
type: 'post',
success: function (newItem) {
//$(newItem).appendTo($('#items'))
}
})
}
</script>
从购物篮中删除商品的按钮：
<div class="mr-4">
<a class="btn btn-primary btn-sm" id="btnDelete" data-value="@Model.Details[i].ProductId" onclick="deleteProduct(this)">
<i class="fa fa-times"></i>
//here need send to /Basket/Delete/id
</a>
</div>
Controller：
[HttpPost]
public void Delete(int id)
{
var id1 = id;
}
结果：
AngularJS $ compiling模态窗口内容创建孤立的控制器
[英]Angularjs $compiling modal window contents creates orphaned controllers
在angularJS中使用模态窗口时，在控制器之间共享对象数组
[英]Sharing object array between controllers while working with modal window in angularJS
如何为Bootstrap模式窗口指定主要和辅助操作？
[英]How do you specify the primary and secondary actions for a Bootstrap modal window?
在 Angular 中启用诸如单击、选择等操作...
[英]Enable actions like click, selecting etc… outside modal window in Angular
如何通过单击不同的图像来启动具有不同内容的模态窗口
[英]How fire up modal window with different content by clicking different images
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.