ActionLink 将参数传递给 Bootstrap Modal

Question

从头开始，我的 MVC5 应用程序中有一个列表视图。我有编辑和删除等操作的链接。如果我单击删除，我想显示我已经拥有的 Bootstrap 模态弹出窗口。但问题是我有 Html.ActionLink，它可以正确地将我的 Modal Popup 重定向到我在 ActionLink 中指定的方法。我只想显示弹出窗口，然后单击提交或其他内容，然后执行操作。但是还有另一个问题 - 我可以通过什么方式将参数从列表视图传递到模式弹出窗口？

下面的一些代码：

@model IEnumerable<SupportStudentSystem.Models.Category>

@{
    ViewBag.Title = "List of Categories";
}

<h1 class="text-center">Categories</h1>

<div style="margin-top:1%">
    <a href="AddCategory" type="button" class="btn btn-lg btn-success"><i class="glyphicon glyphicon-plus"></i> Add Category</a>
</div>
<table class="table" style="margin-top:2%">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CategoryName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RequiredAge)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CategoryName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RequiredAge)
            </td>
            <td>
                @Html.ActionLink("Edit", "EditCategory", "Admin", new { item.CategoryID }, null) |
                 @Html.ActionLink("Delete", "DeleteCategory", "Admin", new { item.CategoryID }, new {data_toggle = "modal", data_target = "#Delete" })                </td>
        </tr>
    }
</table>

这是我的模态：

<div class="modal active" id="Delete" role="dialog" style="overflow-y:auto">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 style="text-align:center">Delete Category</h3>
    </div>
<div class="modal-body">
    <p style="text-align:center"><strong> Do you want to delete this category ? </strong> </p>
</div>
<div class="modal-footer">
    <button type="submit" onclick="location.href='@Url.Action("DeleteCategory", "Admin")'" class="btn btn-default">Delete category</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>

在 DeleteCategory 方法中，我删除了具有像参数一样传递的指定 CategoryID 的类别，然后也将其从数据库中删除。

谁能帮我解决这个问题？

Answer 1

如果您不介意使用 jQuery，您可以为 onclick 事件定义一个处理程序，以捕获对您的删除 ActionLink 的点击。所以，首先给你的 ActionLink 一个 id 并在 data 属性中存储一个参数：

@Html.ActionLink("Delete", "DeleteCategory", "Admin", new { item.CategoryID }, new {data_toggle = "modal", data_target = "#Delete", id="deleteActionLink", data_parameter="<here goes your parameter>" })

然后在 jQuery 代码中为您的参数和事件处理程序添加一个变量：

var parameter;
$("#deleteActionLink").on("click", function(){
    //save your parameter in variable
    parameter = $("#deleteActionLink").data("parameter"); 
});

然后再添加一个处理程序，仅用于模式上的提交按钮，并从这里发送一个发布请求（使用 ajax）