Question

从头开始，我在MVC5应用程序中有一个列表视图。我有链接到编辑和删除等操作。如果我点击删除我想要显示我已经拥有的Bootstrap Modal Popup。但问题是我有Html.ActionLink，它会将我的模态弹出窗口重定向到我在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并在数据属性中存储一个参数：

@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）

ActionLink将参数传递给Bootstrap Modal

1 个答案: