如何为引导模式对话框重新绑定 mvc 模型？

Question

我有一个 MVC 4 应用程序，其中包含一个带有链接按钮的网格，用于触发记录详细信息的显示。当用户选择网格行时，我正在使用引导模式对话框来显示记录详细信息。

除非有人要求，否则我不想加载记录详细信息；涉及的数据元素太多（1000 多个）。

网格页面使用包含部分页面（带有 ViewModel 引用）的模态 div。

我需要在显示对话框之前刷新部分页面的 ViewModel。因此，当用户单击链接时，我从网格中获取记录 id 并使用它来创建控制器方法的 url - 这似乎有效，但似乎在显示对话框之后发生。

如何让它工作？ 这段代码在我的 Index.cshtml 中： × 帐号：@Html.DisplayFor(model => model.AccountNumber)

@{Html.RenderPartial("_KeyTable");} @{Html.RenderPartial("_LoanTable");}

关闭

$(document).ready(function () {
    $("#divDialog").hide();

    $("#btnClose").hide();
    $("#lblAcceptAll").show();
    $("#OnHoldsGrid").focus();

    pageGrids.OnHoldsGrid.onRowSelect(function (e) {
        accountNumber = e.row.AccountNumber;
    });

    $(".modal-link").click(function (event) {
        event.preventDefault();
        $('#detailsModal').removeData("modal");
        var url = '@(Url.Action("_DetailsForModal", "Home", null, Request.Url.Scheme))?accountNumber=' + accountNumber;
        $('#detailsModal').load(url);
        $('#detailsModal').modal('show');
        //alert(url);
    });
});

// This code is in my Controller:
public ActionResult _DetailsForModal(string accountNumber)
{   // This refreshes the data in the ViewModel:
    LOIHoldsViewModel model = new LOIHoldsViewModel();
    model.GetLOIHoldExtended(accountNumber);
    return PartialView("_DetailsForModal", model);
}

// This code is in my partial page _KeyTable.cshtml:
@model LOIHolds.Models.LOIHoldsViewModel
<div id="divKeyTable">
    <br />
    <hr />
    <div class="KeyTableExpandContent">
        <h2><a href="#">Show/Hide Key Table Information</a></h2>
    </div>

    <label>Provider Date:</label>
    @Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.ProviderDate)
    <label>PFI Date:</label>
    @Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.PFIDate)
    <label>User Accept Date:</label>
    @Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.UserAcceptDate)
    <label>User Deny Date:</label>
    @Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.UserDenyDate)
    <label>Process Date:</label>
    @Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.ProcessDate)
    <label>Fiserv Accept Date:</label>
    @Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.FiservAcceptDate)
</div>

<script>
    $('.KeyTableExpandContent').click(function () {
        $('.divKeyTable').toggle();
    });
</script>

// This is the partial _DetailsForModal.cshtml:
@model LOIHolds.Models.LOIHoldsViewModel

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="detailsModalLabel"><label>Account Number: </label>@Html.DisplayFor(model => model.AccountNumber) </h4>
            </div>
            <div class="modal-body">
                <p>
                    @{Html.RenderPartial("_KeyTable");}
                    @{Html.RenderPartial("_LoanTable");}
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" id="CancelModal" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

当您单击 .modal-link 时，您必须使用 Ajax：

$(".modal-link").click(function (event) {

var mUrl = '@(Url.Action("DetailsForModal", "Home", null, Request.Url.Scheme))?accountNumber=' + accountNumber;

   $.ajax({
    url: mUrl,
    success:function(result){
         // result should contain PartialView from Controller
        //Assign Modal DIV the PartialView
         $('#detailsModal').html(result);
         $('#detailsModal').modal('show');
         }
});
}

将你的模态逻辑放在部分视图中，然后在 Home Controller 中创建一个函数：像这样：

  public ActionResult DetailsForModal(int accountNumber){

var model = new PartialModalDialogViewModel();
    //   Load Modal  Data

     return PartialView("PartialViewName", model);
    }

编辑：

尝试从 Modal Partial View 中删除它并放入 _Layout.cshtml 中的某个位置

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
</div>