Question

我必须在项目中使用模态。但不幸的是，它不能很好地工作。在页面上，当我单击“添加新角色”按钮时，一切正常。但是，当我单击角色编辑按钮时，模态显示为空白值。将ID成功发送到操作。之后，当您重新加载页面并首先单击“编辑角色”按钮时，模式将根本不会显示。同时，如果再次单击“添加新角色”按钮，将成功显示模式，并且一切正常。同时，如果再次单击角色编辑按钮，则模式将再次显示为空白。（就像将ID成功发送到操作但未找到之前一样）。我认为这个问题与两件事有关：

问题出在动作上（也许我写的代码没有发送值很好）
问题可能是以下JQuery代码不正确表现良好：

jQuery（文件名：application-role-index.js）：

(function ($) {
    function RoleList() {
        var $this = this;

        function initilizeModel() {
            $("#modal-action-application-role").on('loaded.bs.modal', function (e) {

            }).on('hidden.bs.modal', function (e) {
                $(this).removeData('bs.modal');
            });
        }
        $this.init = function () {
            initilizeModel();
        }
    }
    $(function () {
        var self = new RoleList();
        self.init();
    })
}(jQuery))

无论如何，我希望你能帮助我。这是我将在本节中使用的代码：

'RoleListController'中的操作：

[HttpGet]
    public async Task<IActionResult> AddEditRole(string Id)
    {
        RoleListViewModel model = new RoleListViewModel();
        if (!string.IsNullOrEmpty(Id))
        {
            ApplicationRole applicationRole = await _roleManager.FindByIdAsync(Id);
            if (applicationRole != null)
            {
                model.Id = applicationRole.Id;
                model.Name = applicationRole.Name;
                model.Explanation = applicationRole.Explanation;
            }
            return PartialView("_AddAndEditAppRole", model);
        }
        else
        {
            return PartialView("_AddAndEditAppRole");
        }
    }

我正在使用“模式”的“查看”页面：

<div class="btn-group">
    <a class="btn btn-primary" id="showaddrole" data-toggle="modal" asp-action="AddEditRole" data-target="#modal-action-application-role">افزودن نقش جدید</a>
</div>

<table dir="rtl" class="table table-bordered table-striped myTable table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>@Html.DisplayNameFor(Model => Model.Name)</th>
            <th>@Html.DisplayNameFor(Model => Model.Explanation)</th>
            <th>@Html.DisplayNameFor(Model => Model.NumberOfUsers)</th>
            <th>عملیات</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var role in Model)
        {
            <tr>
                <td>@role.Id</td>
                <td>@role.Name</td>
                <td>@role.Explanation</td>
                <td>@role.NumberOfUsers</td>
                <td>
                    <a class="btn btn-info myTableIC" asp-route-id="@role.Id" asp-action="AddEditRole" data-target="#modal-action-application-role" data-toggle="modal">
                        <i class="glyphicon glyphicon-pencil"></i>
                    </a>
                    <a class="btn btn-danger myTableIC" asp-route-id="@role.Id" asp-action="DeleteRole">
                        <i class="glyphicon glyphicon glyphicon-remove"></i>
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>
@Html.Partial("_Modal", new BootstrapModel { ID = "modal-action-application-role", Size = ModalSize.Medium })
@section Scripts{
    <script src="~/js/modal-js/application-role-index.js"></script>
}

我已经准备了一段简短的视频，介绍我的程序的工作原理，以便您可以更好地了解以下内容： You can find that by this link...

Answer 1

我建议一个解决方案，首先创建一个具有唯一ID的div块

<div id="popup"></div>

比使用ajax调用这样的操作：

$("#btnAdd").click(function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("AddEditRole")',
            success: function (result) {
                $("#popup").html(result);
                $("#popup-addRole").modal("show");
            }
        });

    });

然后使用模型id为popup-addRole创建弹出窗口的partiel视图

       <div class="modal" id="popup-edt" role="dialog">
                <div class="modal-dialog" role="document" style="width:50%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
//add your form here 
                      </div>
                    </div>
            </div>
        </div>

别忘了添加您要使用的模型我希望可以解决问题

模态不包含输入值

1 个答案: