如何从 JS 函数调用 Bootstrap 弹出模型？

Question

我想从 JS 函数调用引导弹出模型，如果用户按下更新然后返回到 JS 函数，则使用我的函数中的值，如果按下取消则没有更新值。

@using (Html.BeginForm("BulkUpdate", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
<div class="container col-md-12">
    <table id="myTable" class="cell-border compact hover">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(m => m.First().Id)</th>
                <th>@Html.DisplayNameFor(m => m.First().TagName)</th>
                <th>@Html.DisplayNameFor(m => m.First().TagCategory)</th>
                <th>@Html.DisplayNameFor(m => m.First().TagValue)</th>
                <th> Action</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.Count(); i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => Model[i].Id)
                        @Html.HiddenFor(m => Model[i].Id)
                    </td>
                    <td>
                        @Html.DisplayFor(m => Model[i].TagName)
                    </td>
                    <td>
                        @Html.DisplayFor(m => Model[i].TagCategory)
                    </td>
                    <td>
                        @Html.EditorFor(m => Model[i].TagValue, new { htmlAttributes = new { @id = "TagVaule_" + Model[i].Id, @class = "form-control" } })
                    </td>
                    <td>
                        <button type="button" class="btn btn-secondary" onclick="UpdateRow(@Model[i].Id)">Update</button>
                    </td>
                </tr>
            }

        </tbody>
    </table>
    <div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <button onclick="Cancel()">cancel</button>
                <button onclick="Confirm()">confirm</button>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Bulk Update" class="btn btn-secondary" />
        </div>
    </div>
</div>

}
@section Scripts{
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>


    <script>
        debugger;
            function UpdateRow(id)
            {
                var tagvalue = $("#TagVaule_" + id).val();
                DisplayModal();
            }

            function DisplayModal()
            {
                $("#myModal").modal('show')
            }

            function Cancel()
            {
                $("#myModal").modal('hide')
            }

            function Confirm()
            {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Update","Home")',
                    data: {
                        id: id,
                        value: tagvalue
                    },
                });
                $("#myModal").modal('hide')
            }

    </script>
}

目前我使用内置的确认功能，但我想调用引导模型并希望在弹出模型上针对该标签值显示标签值和旧值，而不是这个确认功能，然后如果用户按下更新，我想提交它。 谢谢

Answer 1

一种方法是在模态上单击确认时只执行需要完成的操作

javascript:

var bootStrapId=0;
var tagvalue = 0
function UpdateRow(id)
{
    tagvalue=$("#TagVaule_" + id).val();
    bootStrapId=id;
    DisplayModal();
}

function DisplayModal()
{
    $("#myModal").modal('show')
}

function Cancel()
{
    $("#myModal").modal('hide')
}

function Confirm()
{
    $.ajax({
        type: "POST",
        url: '@Url.Action("Update","Home")',
        data: {
            id: bootStrapID,
            value: tagvalue
        },
    });
    $("#myModal").modal('hide')
}

html：

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <button onclick="Cancel()">cancel</button>
        <button onclick="Confirm()">confirm</button>
    </div>
  </div>
</div>