как использовать модальное всплывающее окно в моем частичном представлении в MVC - PullRequest
Новая
       18

как использовать модальное всплывающее окно в моем частичном представлении в MVC

0 голосов
/ 03 января 2019

Я хочу загрузить Модальное как всплывающее окно при нажатии кнопки, через которое пользователь может сохранить информацию в проблеме с базой данных, с которой я сталкиваюсь - это мое частичное представление, состоящее из этой кнопки, IEnumerable модальноеи модальная форма состоит из нормальной модели, такой как @ 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>

Есть ли другой способ добиться этого, поместив этот мод в другое представление

...