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，在按钮上点击一个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>

UserPartial：

  @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);
}

就是这样。

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

1 个答案: