模型绑定Null异常在Razor页面中为View组件

Question

我使用Asp.net core 2.1并创建View Component：

public class UploadFileViewComponent:ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(IFormFile formFile)
    {

        return await Task.FromResult((IViewComponentResult) View("Default", formFile));
    }
}

并尝试在razorpage中使用它：

@page
@using Mi24.Core.ViewMolde
@model Mi24.Web.Pages.Admin.Users.CreateUserModel
@{
   ViewData["Title"] = "Title"
}

    @await Component.InvokeAsync("UploadFile",new{ formFile=Model.CreateUserViewModel.AvatarFile });

但得到错误：NullReferenceException：对象引用未设置为对象的实例。

通过将此代码添加到RazorPage上面的错误已解决：

[BindProperty]
    public CreateUserViewModel CreateUserViewModel { get; set; }

    public async Task OnGetAsync()
    {
        CreateUserViewModel=new CreateUserViewModel();
    }

在viewcomponent用户上选择一个图像，并通过提交razorpage的OnPost方法，触发了Onpost方法，但是对Onpost中的postfile进行了访问：

public async void OnPostAsync()
    {
      string fileName=  CreateUserViewModel.AvatarFile.FileName;
    }

此错误：System.NullReferenceException

Answer 1

这是我制作的演示中的代码部分，请检查其中的区别

CreateUserViewModel.cs

 public class CreateUserViewModel
{
    public Microsoft.AspNetCore.Http.IFormFile AvatarFile { get; set; }
}

请注意，CreateUserViewModel.cs中AvatarFile的类型必须与UploadFileViewComponent的InvokeAsync方法中的对象参数的类型一致。

UploadFileViewComponent.cs的Default.cshtml

@model RazorPage2_1Project.Models.CreateUserViewModel

<h2> Upload File</h2>

<form method="post" enctype="multipart/form-data" >
<div class="form-group">
    <div class="col-md-10">
        <input type="file" name="AvatarFile" asp-for="AvatarFile"/>
    </div>
</div>
<div class="form-group">
    <div class="col-md-10">
        <input type="submit" value="Upload" />
    </div>
</div>
</form>

注意： asp-for的值和输入的name属性应与您希望在post方法中获得的相同。