如何使用带有 ViewComponent 的模式弹出窗口（Asp Net Core 5）答案

【问题标题】：How to use a modal popup with ViewComponent (Asp Net Core 5)如何使用带有 ViewComponent 的模式弹出窗口（Asp Net Core 5）
【发布时间】：2022-01-21 11:32:46
【问题描述】：

您好，我想在 Asp Net Core 5 (mvc) 中使用模式弹出窗口来创建用户视图。我想将此模式用作 ViewComponent 在用户索引视图中（显示用户列表）。我添加了一个与 Create User 方法相关的按钮。

我希望当我单击该按钮时，作为 ViewComponent 的模态弹出窗口会打开。

但运行应用程序后我无法进入索引用户页面，因为一个异常显示 Index.cshtml 中使用的模型（即 IEnumerable）与 ViewComponent View 中使用的模型（即 UserViewModel）之间存在冲突。

我会上传异常。

ViewConponent 类：

    public class CreateViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        return View("Default");
    }
}

ViewComponent 视图：

    @model UserViewModel 
    @{
        Layout = "_LayoutAdmin";
        ViewData["Title"] = "Create";
    }
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <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>
                <h4 class="modal-title">افزودن کاربر جدید</h4>
            </div>**
            <div class="modal-body">
                <form asp-action="Create" method="post" class="form-horizontal">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">اسم کاربر</label>

                            <div class="col-xs-5">
                                <input type="text" asp-for="Name" class="form-control" placeholder="اسم کاربر">
                                <span asp-validation-for="Name" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">

                            <label class="col-sm-3 control-label">نام کاربری</label>

                            <div class="col-xs-5">
                                <input type="text" asp-for="UserName" class="form-control" placeholder="نام کاربری">
                                @if (ViewBag.UserNameExistence != null)
                                {
                                    <p class="text-red small"> @ViewBag.Message </p>
                                }
                                <span asp-validation-for="UserName" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">

                            <label class="col-sm-3 control-label">رمز عبور</label>

                            <div class="col-xs-5">
                                <input type="text" asp-for="Password" class="form-control" placeholder="رمز عبور">
                                <span asp-validation-for="Password" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">

                            <label class="col-sm-3 control-label">ایمیل</label>

                            <div class="col-xs-5">
                                <input type="text" asp-for="Email" class="form-control" placeholder="ایمیل">
                                @if (ViewBag.EmailExistence != null)
                                {
                                    <p class="text-red small"> @ViewBag.Message </p>
                                }
                                <span asp-validation-for="Email" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">شماره تلفن</label>

                            <div class="col-xs-5">
                                <input type="text" asp-for="PhoneNumber" class="form-control" placeholder="شماره تلفن">
                                @if (ViewBag.PhoneNumberExistence != null)
                                {
                                    <p class="text-red small"> @ViewBag.Message </p>
                                }
                                <span asp-validation-for="PhoneNumber" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <!--<div class="box-footer">
                        <button asp-action="Index" class="btn btn-default">انصراف</button>
                        <button type="submit" class="btn btn-info pull-right">افزودن</button>
                    </div>-->
                    <!-- /.box-footer -->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">خروج</button>
                <button type="button" asp-action="Create" class="btn btn-primary">تأیید</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

Index.cshtml 视图：

    @model IEnumerable<ShopOnline.Domain.Entites.User>
@{
    Layout = "_LayoutAdmin";
    ViewData["Title"] = "Index";
}
<div class="box mt-3">
<div class="box-header">
    <h3 class="box-title">لیست کاربران</h3>
</div>
<div>
    <button class="btn bg-olive margin" action=("@await Component.InvokeAsync("Create")")
         data-toggle="modal" data-target="#modal-default">
        <i class="fa fa-fw fa-plus-square"></i>
        افزودن کاربر جدید
    </button>
</div>

<!-- /.box-header -->
<div class="box-body">
    <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
        <div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row">
            <div class="col-sm-12">
                <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                    <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending" aria-label="موتور رندر: activate to sort column descending">نام</th>
                            <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="نام کاربری: activate to sort column ascending">نام کاربری</th>
                            <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="ایمیل: activate to sort column ascending">ایمیل</th>
                            <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="شماره تلفن: activate to sort column ascending">شماره تلفن</th>
                            <th>عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model != null)
                        {
                            @foreach (var item in Model)
                            {
                                <tr role="row" class="odd">
                                    <td class="sorting_1">
                                        @Html.DisplayFor(modelItem => item.DisplayName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Email)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.PhoneNumber)
                                    </td>
                                    <td>
                                        <a class="btn btn-warning waves-effect waves-light m-b-5" data-toggle="tooltip" data-placement="top" title="ویرایش کاربر"
                                           asp-action="Edit" asp-route-id="@item.Id">
                                            <i class="fa fa-user-circle"></i>
                                        </a>
                                        <a class="btn btn-danger waves-effect waves-light m-b-5" data-toggle="tooltip" data-placement="top" title="حذف کاربر"
                                           asp-action="Delete" asp-route-id="@item.Id">
                                            <i class="fa fa-remove"></i>
                                        </a>
                                        <a class="btn btn-info waves-effect waves-light m-b-5" data-toggle="tooltip" data-placement="top" title="سطح دسترسی"
                                           asp-action="Access" asp-route-id="@item.Id">
                                            <i class="fa fa-universal-access"></i>
                                        </a>
                                    </td>
                                </tr>
                            }
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <th rowspan="1" colspan="1">نام</th>
                            <th rowspan="1" colspan="1">نام کاربری</th>
                            <th rowspan="1" colspan="1">ایمیل</th>
                            <th rowspan="1" colspan="1">شماره تلفن</th>
                            <th rowspan="1" colspan="1">عملیات</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-5">
                <div class="dataTables_info" id="example2_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div>
            </div><div class="col-sm-7">
                <div class="dataTables_paginate paging_simple_numbers" id="example2_paginate">
                    <ul class="pagination">
                        <li class="paginate_button previous disabled" id="example2_previous">
                            <a href="#" aria-controls="example2" data-dt-idx="0" tabindex="0">Previous</a>
                        </li>
                        <li class="paginate_button active"><a href="#" aria-controls="example2" data-dt-idx="1" tabindex="0">1</a></li>
                        <li class="paginate_button "><a href="#" aria-controls="example2" data-dt-idx="2" tabindex="0">2</a></li>
                        <li class="paginate_button "><a href="#" aria-controls="example2" data-dt-idx="3" tabindex="0">3</a></li>
                        <li class="paginate_button "><a href="#" aria-controls="example2" data-dt-idx="4" tabindex="0">4</a></li>
                        <li class="paginate_button "><a href="#" aria-controls="example2" data-dt-idx="5" tabindex="0">5</a></li>
                        <li class="paginate_button "><a href="#" aria-controls="example2" data-dt-idx="6" tabindex="0">6</a></li>
                        <li class="paginate_button next" id="example2_next">
                            <a href="#" aria-controls="example2" data-dt-idx="7" tabindex="0">Next</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.box-body -->

例外情况：

处理请求时发生未处理的异常。

InvalidOperationException：传递到 ViewDataDictionary 的模型项的类型为“System.Collections.Generic.List`1[ShopOnline.Domain.Entites.User]”，但此 ViewDataDictionary 实例需要“ShopOnline.Web”类型的模型项.ViewModel.UserViewModel'。

Microsoft.AspNetCore.Mvc.ViewFeatures.ViewDataDictionary.EnsureCompatible(对象值)

在异常页面的堆栈部分：
Index.cshtml 中的 AspNetCore.Areas_Admin_Views_User_Index.ExecuteAsync()

现在我该怎么办。

抱歉有任何语法错误，我不是英国人或美国人。

【问题讨论】：

你能分享你的Controller的代码吗？您的模型不匹配，您可能会将不合适的模型传递给 ViewComponent 视图。
@QingGuo 我想要这个。我从这个模态弹出窗口中获得了一些属性，例如 (Name, Email , ...)。所以我需要一个视图模型来将这些信息传递给控制器并将它们保存到数据库中。

标签： c# asp.net .net asp.net-mvc asp.net-core

【解决方案1】：

InvalidOperationException：传入的模型项 ViewDataDictionary 是类型 'System.Collections.Generic.List`1[ShopOnline.Domain.Entites.User]', 但是这个 ViewDataDictionary 实例需要一个类型的模型项 'ShopOnline.Web.ViewModel.UserViewModel'。

上面的异常很明显，当你显示默认视图组件时，它需要一个用户视图模型，而不是用户列表。

要解决上述问题，您可以修改 CreateViewComponent 如下：

public class CreateViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        return View("Default", new ShopOnline.Web.ViewModel.UserViewModel());
    }
}

【讨论】：

即使我无法显示模态。这就是我想要的：当我进入索引用户视图时，1：点击添加新用户，2：然后应该显示一个模式弹出窗口，3：添加新用户信息，4：保存.
嗨@AliHasani1IR，我了解你。但是，由于在Index页面中直接调用ViewComponent，在加载index页面时，如果我们没有给Default页面赋值一个UserViewModel对象，它会使用Index页面的视图模型来渲染页面，所以会显示上述错误。为了解决这个问题，我们必须将一个 UserViewModel 对象分配给默认视图。
关于你的工作流程，点击AddNewUser时，可以使用JQuery Ajax调用action方法，将ViewComponent页面返回给ajax成功函数。然后，在成功函数中，您可以使用响应数据填充模态的主体，然后显示弹出模态以添加用户信息。由于这是一个新问题，如果答案解决了原来的问题，请接受它-见What should I do when someone answers my question，对于新问题，尝试使用上述方法，如果遇到任何问题，您可以发布新线程。
谢谢...我的错误解决了...在 ViewComponent 类中，我创建了我的 ViewModel 类的新对象并将其传递给默认页面