Edit Modal PopUp to be displayed on the same screen

Question

I have a requirement where I need to display a Modal popup. When the user clicks on the link inside a grid, then that has to open a modal popup with the respective values.This is the partial view code.I am using in this i have placed the edit button after clicking on it it should show PopUp to edit the details and should save it to the database. can some one help me with this?

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

With this AJAX call, you can make a popup page with the values of object, you can send id as parameter, after that in controller, you can return a partial view, but you will design the partial view with name and id popupScreen. In controller you will have to use a parameter which name is id. Modal page looks like something below

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