在 Jquery 模式弹出窗口中渲染部分视图（2 个不同的模型）

Question

我的项目是房间预订。我有 View 在房间模型上显示房间的 id 和她在 foreach 上的特征：

@model IEnumerable<Room>

<div class="roomConteiner">
        @foreach (Room room in Model)
        {
                <table class="simple-little-table" cellspacing='0'>
                    <tr>
                        <td> @room.NumberRoom </td>
                        <td>@room.Categoryid</td>
                        <td> @room.NumberOfSeats </td>
                        <td> @room.CostPerNight </td>
                        <td>

                            <button class="roomBookingButton" data-roomid="@room.Id">Booking</button>
                        </td>
                    </tr>
                </table>
            </div>
        }
    </div>

我有 JS，它在 buttonClick 上呈现一个 Jquery 模式弹出窗口内的部分视图：

</script>

<div id="dialog-modal" > @Html.Partial("UserPartial", new Client()) </div>

<script type="text/javascript">
$(function () {
    $("#dialog-modal").dialog({
        autoOpen: false,
        width: 400,
        height: 400,
        resizable: false
    });

    $('.roomConteiner').on("click", ".roomBookingButton", function () {

        $("#dialog-modal").dialog("open");
    });
});
</script>

用户部分：

  @model Client
    <div class="editor-label">
                @Html.Label("Surname")
                @Html.TextBoxFor(model => model.Surname)
            </div>
            <div class="editor-label">
                @Html.Label("Name")
                @Html.TextBoxFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
<input type="submit" id="submit" value="Booking" />

如何在foreach的弹出窗口中传输NumberRoom？例如，在弹出窗口中给我的信息：“您选择了 5 号房间”请填写您的数据：姓名、姓氏......

控制器：

[HttpGet]
        public PartialViewResult UserPartial()
        { 
            return PartialView("UserPartial" , new Client());
        } 

Answer 1

这与用户“Alex Da”发布的问题完全相同。

Render a partial view inside a Jquery modal popup

要回答有关获取 ID 的问题，您可以获取该值：

$(".roomBookingButton").on("click", function () {
  var id = $(this).data("roomid");

  // make call to your partial action
  $.get('@Url.Action("UserPartial", "Home")', { id: id }, function (view) {
    $("dialog-modal").html(view);
  });
});

然后调整你的局部视图动作：

[HttpGet]
public PartialViewResult UserPartial(int id)
{
  var client = db.Clients.Single(id);

  return PartialView("UserPartial" , client);
} 

就是这样。