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

Question

我想使用 ASP.NET Core 制作一个类似电子商务的 Web 应用程序。

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

Razor 页面只允许一个@model，这样我就无法访问Image我为上传图像而创建的类。这个Image类只是一个用于上传的类，它将包含图像的路径、id、描述和NotMapped IFormFile用于上传的属性。

但出于用户体验的目的，用户（电子商务的所有者）Product在同一页面中填写模型并上传图像，并POST以相同的形式执行操作。但由于 Razor 页面只允许一种模型，我该如何做到这一点呢？这种方式是愚蠢的、不可能的还是两者兼而有之？

提前致谢。

Answer 1

但由于 Razor 页面只允许一种模型，我该如何做到这一点呢？这种方式是愚蠢的、不可能的还是两者兼而有之？

这个有可能。

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

根据您的要求，我制作了一个demo供您参考：

产品型号：

 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; }
}

页面.cshtml.cs：

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

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

        }
        public void OnPost()
        {

        }
    }

页面.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>

这是测试结果：