如何在单击按钮时调用JS函数，然后在该调用上打开一个弹出窗口？

Question

我正在使用JS函数将值发送到控制器，我想在将值提交给控制器之前显示一个弹出窗口，如果按下了弹出窗口确认按钮，则将值保存到控制器，否则没有发送。当前，当按下更新按钮时，我正在显示确认警报。

//Bootstrap and JS Code

@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 class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="BulkUpdate" class="btn btn-default" />
        </div>
    </div>
</div>

///Dilog Box
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Confirm Update</button>
            </div>
        </div>
    </div>
</div>
}

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

        <script>
        //Confirmation Function
        function confirmupdate(id) {


            }

        //Update Row Function
        function UpdateRow(id)
        {
            var tagvalue = $("#TagVaule_" + id).val();
            var done = confirm('Do you want to update the Tag Value To '+tagvalue)
            if (done) {
                $.ajax(
                    {
                        type: "POST",
                        url: '@Url.Action("Update","Home")',
                        data: {
                            id: id,
                            value: tagvalue
                        },
                    });
            }
            else {
            }
        }
        </script>
    }