Question

如果用户按下update然后返回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>
}

当前，我使用内置的确认函数，但我想调用引导程序模型，而不是此确认函数，并希望在弹出模型中显示tagvalue和针对该tagvalue的旧值，然后如果用户按update，则要提交它。谢谢

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>

Answer 2

您是否尝试过创建像这样的模态

<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" role="document">
     <div class="modal-content">
       <input id="idhere" type="number" value="" />
     </div>
   </div>
</div>

并添加一个切换按钮，如下所示：

function updateRow(id){
   $('#idhere').val(id);
   $('#myModal').modal('show');

   //your other codes here
}

或尝试在此处阅读有关引导程序MODALS以及如何使用它们的文档：https://getbootstrap.com/docs/4.4/components/modal/

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

2 个答案: