编辑Modal PopUp同屏显示

Question

我有一个需要显示模态弹出窗口的要求。当用户单击网格内的 link 时，必须打开一个模态弹出窗口，相应的 values.This 是局部视图 code.I 我在其中使用了编辑按钮单击它后，它应该显示 PopUp 以编辑详细信息并将其保存到数据库中。有人可以帮我解决这个问题吗？

@model IEnumerable<LMS.ViewModels.TemporaryStaff.VMTemporaryStaffResponse>


<div class="card mt-4 mb-5 ml-3 mr-3">
    <div class="card-body">
        <p class="card-title">View TemporaryStaff</p>
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <table id="order-listing" class="table">
                        <thead>
                            <tr>
                                <th class="label">Stafftemp ID</th>
                                <th class="label">StaffName</th>
                                <th class="label">Created On</th>
                                <th class="label">Status</th>
                                <th class="label">Edit</th>
                                <th class="label">View QR Code</th>
                            </tr>
                        </thead>
                        <tbody class="table-body">
                            @foreach (var item in Model)
                            {
                                <tr class="table-row">
                                    <td>
                                        @Html.DisplayFor(modelItem => item.StafftempID)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.StaffName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Createdon)
                                    </td>
                                    <td>
                                        @if (item.Status)
                                        {
                                            <label class='badge badge-success'>Active</label>
                                        }
                                        else
                                        {
                                            <label class='badge badge-danger'>In-Active</label>
                                        }
                                    </td>
                                    <td>

                                        <a href="@Url.Action("GetTemporaryStaffById", "TemporaryStaff", item)">
                                            <i class="fa fa-edit"></i>
                                        </a>

                                         @*<a onclick="showInPopup('@Url.Action("GetTemporaryStaffById", "TemporaryStaff", item)'" 
                                            class="btn btn-info text-white"><i class="fa fa-edit"></i></a>*@
                                    </td>
                                    <td>
                                        <button type="submit" class="btn btn-success mr-2">QR Code</button>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

function OpenModal(recordId) {
    $.ajax({
        type: "GET",
        url: "/TemporaryStaff/GetTemporaryStaffById",
        datatype: "Json",
        data: { id: recordId },
        success: function (data) {
            $('body').append($('<div id="divPopup"></div>'));
            $("#divPopup").html(data);
            $('#popupScreen').modal('show');
            event.preventDefault();
            return false;
        },
        error: function (error) {
            event.preventDefault();
            return false;
        }
    });
};

通过这个 AJAX 调用，您可以制作一个带有对象值的弹出页面，您可以将 id 作为参数发送，之后在控制器中，您可以 return 部分视图，但是您将使用名称和 ID popupScreen 设计局部视图。在控制器中，您必须使用名称为 id 的参数。模态页面如下所示

@model Project.Models.TemporaryStaffModel
@{
    //Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Ajax.BeginForm("StaffSave", "TemporaryStaff", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "OperationSuccess", OnFailure = "OperationFail" }, new { id = "StaffForm", name = "StaffForm" }))
{
    <div class="modal draggable fade" id="popupScreen" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-popin modal-l">
            <div class="modal-content">
                <div class="block block-bordered">
                    <div class="block-header bg-gray-lighter">
                        <ul class="block-options">
                            <li>
                                <button data-dismiss="modal" data-toggle="tooltip" data-placement="right" title="Close" class="closePopupButton" type="button"><i class="si si-close"></i></button>
                            </li>
                        </ul>
                        <h3 class="block-title">@ViewBag.Header</h3>
                    </div>
                    <div class="block-content">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-3 control-label">@Html.LabelFor(m => m.SaveDate)</label>
                                <div class="col-md-9">
                                    @Html.DatePickerFor(m => m.SaveDate).HtmlAttributes(new { @Id = "dtpSaveDateIslem", style = "width:100%", required = "required", validationMessage = "Field Required" })
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-sm btn-primary" type="button" id="btnSave" name="btnSave" value="Save" onclick="ValidationControl()">
                            <i class="fa fa-save"></i> Save
                        </button>
                        <button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
                            <i class="fa fa-save"></i> Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

编辑Modal PopUp同屏显示

Edit Modal PopUp to be displayed on the same screen

c#

jquery

asp.net-mvc

model-view-controller

popupwindow