ViewModel 中的 IFormFile 属性未绑定

问题描述 投票:0回答:1

当我尝试发布包含 List 属性的 QuizCreate 视图模型时,它没有绑定并且始终为 NULL。

我有一个 POST 表单的视图模型 QuizCreate.cs :

public class QuizCreate
{
    public string Name { get; set; }
    public List<QuizBanner> QuizBanners { get; set; }

    public QuizCreate()
    {
        this.QuizBanners = new List<QuizBanner>
        {
            new QuizBanner()
        };
    }
}

这里是QuizBanner.cs

public class QuizBanner
{
    public string Name { get; set; }
    public string Description { get; set; }
    public IFormFile ImageFile { get; set; }
}

这是一个带有 POST 表单的视图 QuizCreate.cshtml :

@model QuizCreate

<form asp-action="CreateNewQuiz" asp-controller="Quiz" method="post" enctype="multipart/form-data" id="form-create-new-quiz">
    
    @Html.TextBoxFor(model => model.Name, new { @class = "form-control"})
    @Html.EditorFor(model => model.QuizBanners)
    
    <input type="submit" value="Create New Quiz"/>

</form>

这是我的编辑器模板 QuizBanner.schtml :

@model QuizBanner

@Html.TextBoxFor(banner => banner.Name, new { @class = "form-control" })
@Html.TextBoxFor(banner => banner.Description, new { @class = "form-control" })
<input asp-for="@Model.ImageFile" type="file" name="ImageFile" class="form-control"/>

以下是 QuizController 方法:

public IActionResult CreateQuiz()
{
    return View(new QuizCreate());
}

[HttpPost]
public async Task<IActionResult> CreateNewQuiz(QuizCreate quizCreate)
{
    // insert in DB logic
}

因此,我用一些数据填充所有输入,并从本地文件夹上传图像。
当我提交表单时,在 CreateNewQuiz 方法中,我们可以看到所有字段都正确绑定,除了 IFormFile ImageFile - 它始终为空。

values after POST (ImageFile is NULL)

这可能是什么原因?
我从 StackOverflow 尝试了许多不同的解决方案,但没有任何帮助。

asp.net-mvc data-binding mvc-editor-templates iformfile form-post
1个回答
0
投票

发布 QuizCreate 视图模型,其中包含 List 属性, 它不具有约束力并且始终为 NULL。

我猜问题出在模型绑定上。您可以参考以下代码来绑定

List<IFormFile> property
,在QuizCreate.cshtml中:

 @model QuizCreate
<form asp-action="CreateNewQuiz" asp-controller="Quiz" method="post" enctype="multipart/form-data" id="form-create-new-quiz">

    @Html.TextBoxFor(model => model.Name, new { @class = "form-control"})


   @*  @Html.EditorFor(model => model.QuizBanners) *@
    
    @for (int i = 0; i < Model.QuizBanners.Count; i++)
    {
       
        @Html.TextBoxFor(banner => banner.QuizBanners[i].Name, new { @class = "form-control" })
        @Html.TextBoxFor(banner => banner.QuizBanners[i].Description, new { @class = "form-control" })
        <input asp-for="@Model.QuizBanners[i].ImageFile" type="file" class="form-control" />
    }
    <input type="submit" value="Create New Quiz" />

</form>

还有 QuizCreate 类:

public class QuizCreate
{
    public string Name { get; set; }
    public List<QuizBanner> QuizBanners { get; set; }

    public QuizCreate()
    {
        Name = "Q1";
        this.QuizBanners = new List<QuizBanner>
    {
        new QuizBanner(){Name="aa",Description="dd"}
         
    };
    }
}

结果:

© www.soinside.com 2019 - 2024. All rights reserved.