如何在MVC的局部视图中使用模式弹出窗口

Question

我想加载 Modal 作为按钮单击时的弹出窗口，用户可以通过该窗口将信息保存到数据库中。我面临的问题是由该按钮组成的部分视图具有 IEnumerable 模态和模态形式由诸如 @model Key 之类的常规模型组成，因此一个模型与其他模型重叠，因此无法正常工作。

这是我的观点

@model IEnumerable<RoomTypeView>

<div class="card border rounded DropShadow" style="border-top-right-radius:50%;">
    <div class="card-body">
        @foreach (var item in Model)
        {
            @Html.DisplayFor(modelItem => item.RoomNo)
            @Html.DisplayFor(modelItem => item.GuestName)
            @($"{item.CheckIn:dd/MMM} - {item.CheckOut:dd/MMM}")
            @Html.DisplayFor(modelItem => item.Status)
            <div class="form-inline">
                <button type="button" class="btn btn-default modalkey" data-toggle="modal" data-target="#myModal"><i class="fas fa-key" style="@(item.Status.HasFlag(EnumHkStatus.Repair) ? "color:red;": "")"></i></button>
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"><i class="fas fa-broom" style="@(item.Status.HasFlag(EnumHkStatus.Cleaning) ? "color:red;": "")"></i></button>
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"><i class="fas fa-clipboard-list" style="@(item.Status.HasFlag(EnumHkStatus.InventoryCheck) ? "color:red;": "")"></i></button>
            </div>
            @Html.DisplayFor(modelItem => item.Comments)
        }
    </div>
</div>

@model KeyLog
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Key Log</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                @using (Html.BeginForm())
                {
                    @Html.AntiForgeryToken()
                    <div class="form-horizontal">
                        <hr />
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @if (Model?.KeyLogId > 0)
                        {
                            @Html.HiddenFor(model => model.KeyLogId)
                        }

                        <div class="form-group">
                            @Html.LabelFor(model => model.UserId, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.UserId, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.NameOfPerson, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.TextAreaFor(model => model.NameOfPerson, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.NameOfPerson, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.PurposeForGiven, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.TextAreaFor(model => model.PurposeForGiven, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.PurposeForGiven, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.DateKeyGiven, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.TextAreaFor(model => model.DateKeyGiven, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.DateKeyGiven, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.DateKeyReturned, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.TextAreaFor(model => model.DateKeyReturned, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.DateKeyReturned, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input type="submit" value="Save" class="btn btn-default" />
                            </div>
                        </div>
                    </div>
                }
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

还有另一种方法可以将该模式放入另一个视图中