ASP.NET Core MVC Problem with a View Component

Question

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" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="UserId" class="control-label"></label>
        <input asp-for="UserId" class="form-control" />
        <span asp-validation-for="UserId" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="UserName" class="control-label"></label>
        <input asp-for="UserName" class="form-control" />
        <span asp-validation-for="UserName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="UserLogin" class="control-label"></label>
        <input asp-for="UserLogin" class="form-control" />
        <span asp-validation-for="UserLogin" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="MailList" class="control-label"></label>
        <input asp-for="MailList" class="form-control" />
        <span asp-validation-for="MailList" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Status" class="control-label"></label>
        <input asp-for="Status" class="form-control" />
        <span asp-validation-for="Status" class="text-danger"></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 class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Añadir nuevo usuario</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @await Component.InvokeAsync("CreateUserForm");
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" 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

Answer 1

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

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