Question

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

我不想加载记录细节，除非他们被要求;涉及的数据元素太多（1000 +）。

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

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

我如何让它工作？这段代码在我的Index.cshtml中： × 帐号：@ Html.DisplayFor（model =＆gt; 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);
    }

修改

尝试从模态部分视图中删除它并放入_Layout.cshtml
中的某个位置
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true"> </div>

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

1 个答案: