Question

我在Web开发方面有点新手。我有一个带有许多索引站点的应用程序，这些站点显示带有元素的列表。这些元素可通过HtmlAction删除。我想做一个通用的吗？用户单击按钮时出现的模态。该模式请求用户确认以从列表中删除所选元素。如果我是对的，我必须将一些数据传递给该模式，例如（哪个控制器，哪个动作，哪个elementId）。如何以某种方式创建参数化模态？你能给我一些起点吗？

<div class="row ">
    <div class="card">
        <table class="table">

            <tr>
                <td>
                    <h5>@Html.DisplayNameFor(item => item.SupplyTypeName)</h5>
                </td>
                <td></td>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.SupplyTypeName)
                    </td>
                    <td>
                        <i class='material-icons'>
                            @Html.ActionLink("mode_edit", "Edit", new { id = item.Id })
                        </i>
                        <i class='material-icons' data-toggle="modal" data-target="#myModal">
                            *
                        </i>
                    </td>
                </tr>
            }

        </table>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
            </div>
            <div class="modal-body">
                Are you sure want to delete this item?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

Answer 1

无需编写JavaScript，您必须为每行创建自己的模式。同样很高兴向用户显示与模式行相关的内容，以便用户知道他们单击了“删除”以获取正确的行。

如果您打算使用JavaScript，那么最简单的方法是添加单击事件处理程序，并使用confirm函数显示浏览器自己的确认弹出窗口，然后在未单击“确定”的情况下取消事件。像<a href="/delete/item/56" onclick="return confirm('Are you sure?')">Delete</a>

如果您为Bootstrap模式编写JavaScript，则需要添加自己的click事件处理程序，该模式在显示数据之前使用该数据获取删除按钮和补丁（可能在确认按钮所在的URL设置ID）的数据属性。

参数化删除确认Modal .NET Core 2.1

1 个答案: