ASP.NET Core Razor Pages でファイルを送信

ASP.NET Core Razor Pages でファイルを送信する手順です。

IFormFile 型のプロパティを用意する。

PageModel 側に Avatar という IFormFile 型のプロパティを用意します。

public class InputModel
{
    [Display(Name = "User ID")]
    public string UserId { get; set; }
    [Phone]
    [Display(Name = "Phone number")]
    public string PhoneNumber { get; set; }
    [Display(Name = "Avatar")]
    [BindProperty]
    public IFormFile Avatar { get; set; }
}

private async Task LoadAsync(IdentityUser user)
{
    var userName = await _userManager.GetUserNameAsync(user);
    var phoneNumber = await _userManager.GetPhoneNumberAsync(user);
    IFormFile avatar = null;

    Input = new InputModel
    {
        UserId = userName,
        PhoneNumber = phoneNumber,
        Avatar = avatar
    };
}

Razor Page 側の設定

Razor Page 側に IFormFile 型プロパティ(Avatar) をバインドします。また、form タグには、enctype="multipart/form-data" を指定します。この指定がないと、PageModel にポストした際に、Avatar プロパティへのモデルバインドが行われません。

<form id="profile-form" method="post" enctype="multipart/form-data">
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Input.UserId"></label>
        <input asp-for="Input.UserId" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Input.PhoneNumber"></label>
        <input asp-for="Input.PhoneNumber" class="form-control" />
        <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Input.Avatar"></label>
        <input asp-for="Input.Avatar" class="form-control" />
        <span asp-validation-for="Input.Avatar" class="text-danger"></span>
    </div>
    <button id="update-profile-button" type="submit" class="btn btn-primary">Save</button>
</form>

これで、フォームをポストした際に Avatar プロパティを取得することができるようになります。