【问题标题】:cshtml modal calling JS function on closecshtml模态调用JS函数关闭
【发布时间】:2020-04-08 14:42:32
【问题描述】:

我正在使用这个点击事件来打开一个允许用户编辑表单的模式。它可以很好地打开用户更新数据,但是一旦他们关闭模式,我喜欢调用一个将构建数据的函数。我有办法调用父 cshtml 页面上的 JS 函数吗?

主页

$(".references-list").on("click", ".edit-reference", function () {
    var index = $(this).data('index');
    var versionKey =  '@Model.VersionKey'

    $.ajax({
        url: '/References/Edit',
        method: 'GET',
        data: { index: index, VersionKey: versionKey }, 
        begin: function () {
        },
        success: function (data) {
            $("#add-reference-modal .modal-body").html(data);
            $("#add-reference-modal").modal('show');
        }
    });
    return false;
});

编辑cshtml页面

<div id="container" style="@(Model.Type == "Pubmed" ? "display:block" : "display:none")">
    <form id="form" class="form-horizontal" data-sortorder="@Model.SortOrder">
        <div id="search-grid-container" style="text-align:center;margin: 20px 0;">
            @(Model.Text)
        </div>
        <hr />
        <div class="form-group">
            <label class="col-sm-2 control-label" style="font-size:smaller">Regimen References</label>
            <div class="col-sm-10" style="font-size:smaller">
               @Html.Partial("RegimenReferences", (ReferencesModel)Model)
            </div>
        </div>
        <div class="text-center">
            <button type="submit" class="btn btn-primary modal-submit-btn">Save</button>
            <button type="button" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
        </div>
    </form>
</div>

【问题讨论】:

  • 请包含模态html。为了澄清,编辑页面在模态内部正确吗?
  • 是的,我有模态的 edit.cshtml 页面

标签: jquery asp.net-mvc razor


【解决方案1】:

由于模式是在父页面中定义的,您可以将事件附加到模式关闭。从那里,您可以使用模式作为起点,并在输入字段上使用 .find() 来获取数据。

只需将此添加到您的父页面脚本;

$('#add-reference-modal').on('hidden.bs.modal', function () {
   var property1 = $(this).find("#yourElementId1").val();
   var property12 = $(this).find("#yourElementId2").val();
   callFunction();

   // ... do something else
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-25
    • 1970-01-01
    • 1970-01-01
    • 2021-11-26
    相关资源
    最近更新 更多