传递参数时不显示部分视图

Question

我有一个创建函数的局部视图，该函数使用一个对话框，每当我单击索引页面中的特定按钮时就会弹出（索引和创建页面的控制器不同）。每当我尝试将参数从索引传递到创建并单击按钮以显示对话框时，它都不会显示局部视图。但是当我删除参数时，对话框会显示部分视图，尽管它的发布操作不起作用，因为我需要索引页面中的参数。

以下是传递参数的索引中的行和用于显示对话框的按钮：

<input type="button" class="btnPartial" />
                    <div id="@item.RoomCode" style ="visibility:hidden;">@Url.Action("CallPartial", "RoomReservation", new { roomId = item.Id })</div>                  
                </div>

这是从索引页面接收参数并显示部分视图的控制器：

 public ActionResult CallPartial(int roomId) {
            var model = _db.Rooms.Single(r => r.Id == roomId);
            ViewBag.roomCode = model.RoomCode;
            return PartialView("_Create", model.Customers );
        }

这是部分视图：

@model ROOMRESERVATION.CORE.Model.RoomReservation

@{
    ViewBag.Title = "Create";
}
<h3>@ViewBag.roomCode</h3>
@Html.DisplayFor(model => model.Rooms.RoomName)
<h2>Create</h2>
@using (Html.BeginForm("Create", "RoomReservation", new {roomid = model.Rooms.Id}))
{
    @Html.ValidationSummary(true)
<fieldset>
     <legend>RoomReservation</legend>
@Html.Partial("_CreateEdit", Model)
<div class="editor-label">
    @Html.LabelFor(model => model.Remarks)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Remarks)
    @Html.ValidationMessageFor(model => model.Remarks)
</div>
<p>
    <input id="btnReserve" type="submit" value="Create" />
</p>
</fieldset>
}

最后，JS：

$('.btnPartial').click(function () {

        var url = $(this).parent("div").children("div").text();

        $('#dialog').load(url,
                function (response, status, xhr) {
                    $('#dialog').dialog('open');
                });

        $("body").toggleClass("dialogIsOpen");

        $("#dialogContainer").css("visibility", "visible");
    });

它的模型都可以，因为其他控制器和视图会响应它，当我仍在使用视图进行创建时，参数工作正常，程序运行顺利，所以我有预感问题出在局部视图和对话框的使用。任何帮助将不胜感激，谢谢:)

编辑

我尝试使用 viewdata 传递给局部视图并且它起作用了，但是如果有更多这样做的方法，这样做似乎很奇怪，请发布任何方法:)。

Answer 1

我只是认为因为 AJAX 调用而无法显示您的对话框。那么你为什么不认为我们可以使用 AJAX 调用并将部分内容放在一个 HTML 元素中，比如 div，完成后我们会将该元素附加到对话框中。

Answer 2

试试这个方法：

 $('.btnPartial').click(function () {
    $(this).preventDefault();
    var url = $(this).parent("div").children("div").text();
    var dialogWindow = $('#dialog');
    var opt = {
        autoOpen: false,
        resizable: false,
        width: 'auto',
        height: 'auto'
    }

    $.get(url, function (data) {
        //
        // Loads the data into the div
        //
        $(dialogWindow).html(data);
    }).done(function () {
        //
        // Show the Dialog when all data comes from the server
        //
        $(dialogWindow).dialog(opt).dialog('open');
    });

    $("body").toggleClass("dialogIsOpen");

    $("#dialogContainer").css("visibility", "visible");
});

希望对您有所帮助！