如何在Razor页面中将图像上传到模型？

Question

我想使用ASP.NET Core进行类似Web应用程序的电子商务。

创建模型是可以的，但是我需要一种方法来上传产品的图像。

剃须刀页面仅允许一个@model，因此我无法访问为上传图像而创建的Image类。 Image类仅是一个用于上载的类，它将包含图像的路径，id，描述和一个用于进行上载的NotMapped IFormFile属性。

但是出于UX的目的，用户（电子商务的所有者）填写Product模型并在同一页面上载图像，并以相同的形式进行POST。但是，由于Razor页面仅允许一种模型，我该怎么做？这样是愚蠢的，不可能的还是两者兼而有之？

谢谢。

Answer 1

但是在Razor页面仅允许一个模型的情况下，我该怎么做？ 这样是愚蠢的，不可能的还是两者兼而有之？

这是可能的。

在razor page中，我们通常通过添加不同的类型properties来绑定不同的模型，看看this。

根据您的要求，我创建了一个演示供您参考：

产品型号：

 public class Product
    {
        public int Id { get; set; }
        public string Name{ get; set; }
    }

图片模型：

public class Image
{
    public string path { get; set; }
    public int id{ get; set; }
    public string description { get; set; }
    [NotMapped]
    public IFormFile file{ get; set; }
}

Page.cshtml.cs：

 public class UploadTestModel : PageModel
    {
        [BindProperty]
        public Image  image { get; set; }

        [BindProperty]
        public Product product { get; set; }
        public void OnGet()
        {

        }
        public void OnPost()
        {

        }
    }

Page.cshtml：

@page
@model WebApplication_razorpage.Pages.UploadTestModel
@{
    ViewData["Title"] = "UploadTest";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>UploadTest</h1>
<form method="post" enctype="multipart/form-data">
    ProductName:<input id="Text1" type="text" asp-for="product.Name" /><br />
    choose file:<input id="File1" type="file" asp-for="image.file" /><br />
    file description:<input id="Text1" type="text" asp-for="image.description" /><br />
    <input id="Submit1" type="submit" value="submit" />
</form>

这是测试结果：