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

Question

I use Asp.net core 2.1 and create View Component:

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

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

and try to use this in 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 });

but get error: NullReferenceException: Object reference not set to an instance of an object.

by adding this code to RazorPage above error solved:

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

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

on viewcomponent user select an images and by submit form OnPost method of razorpage fired but a catnt access to postedfile in Onpost:

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

this error: System.NullReferenceException

Answer 1

Here is the part of the code in the demo I made ,check the difference

CreateUserViewModel.cs

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

Note that the type of AvatarFile in CreateUserViewModel.cs must be consistent with the type of the object arguments in the InvokeAsync method of UploadFileViewComponent.

Default.cshtml of the UploadFileViewComponent.cs

@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>

Note : the value of asp-for and the name attribute of the input should be the same to what you want get in the post method .