I have the following view component:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace InfinityVS22N6.Views.Users.Components
{
    public class CreateUserFormViewComponent : ViewComponent
    {
        public CreateUserFormViewComponent()
        {
        }

        public IViewComponentResult Invoke()
        {
            return View();
        }
    }
}

And this is the view that uses this view component:

@model InfinityVS22N6.Models.User

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" ></div>
    <div >
        <label asp-for="UserId" ></label>
        <input asp-for="UserId"  />
        <span asp-validation-for="UserId" ></span>
    </div>
    <div >
        <label asp-for="UserName" ></label>
        <input asp-for="UserName"  />
        <span asp-validation-for="UserName" ></span>
    </div>
    <div >
        <label asp-for="UserLogin" ></label>
        <input asp-for="UserLogin"  />
        <span asp-validation-for="UserLogin" ></span>
    </div>
    <div >
        <label asp-for="MailList" ></label>
        <input asp-for="MailList"  />
        <span asp-validation-for="MailList" ></span>
    </div>
    <div >
        <label asp-for="Status" ></label>
        <input asp-for="Status"  />
        <span asp-validation-for="Status" ></span>
    </div>
</form>

And where I'm trying to render it in a bootstrap modal, I want to do this to bind the model in this form using the directive @modal, for that reason I created that view component

<div  id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5  id="exampleModalLabel">Añadir nuevo usuario</h5>
                    <button type="button"  data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div >
                    @await Component.InvokeAsync("CreateUserForm");
                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Cancelar</button>
                    <button type="button"  onclick="addNewUser()">Añadir</button>
                </div>
            </div>
        </div>
    </div>

I'm using the directive to render it but when I run the code on the server, I get this error:

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List`1[InfinityVS22N6.Models.User]', but this ViewDataDictionary instance requires a model item of type 'InfinityVS22N6.Models.User'.

Can someone please help me? I just want to show this form to proceed with the creation of a new user

CodePudding user response：

You return empty View() in Invoke method. Try this:

public IViewComponentResult Invoke()
{
    return View(new InfinityVS22N6.Models.User());
}