如何解决在剃刀页面上的文件上传旁边使用选择列表
背景: 该程序将.Net Core 3.1与EF Core一起使用代码优先方法利用MSSQL的本地实例。 该问题的相关实体包括代理商
public class Agent
{
public int AgentID { get; set; }
public string Name { get; set; }
public string Number { get; set; }
public ICollection<SysInfo> SysInfo { get; set; }
}
与SysInfo有一对多的关系
public class SysInfo
{
public int SysInfoID { get; set; }
public int AgentID { get; set; }
public byte[] Content { get; set; }
public Agent Agent { get; set; }
}
数据库是使用EF Core迁移构建的,CRUD页面用于代理实体。 SysInfo旨在存储系统信息文件。 我从在https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.1#file-upload-scenarios找到的示例开始,然后修改了UploadDbModel以包括一个选择列表。
public class BufferedSingleFileUploadDbModel:PageModel
{
[BindProperty]
public BufferedSingleFileUploadDb FileUpload { get; set; }
public SelectList AgentNameSL { get; set; }
public void PopulateAgentsDropDownList(WindowsAuthTest3Context _context,object selectedAgent = null)
{
var agentsQuery = from a in _context.Agent
orderby a.Name
select a;
AgentNameSL = new SelectList(agentsQuery.AsNoTracking(),"AgentID","Name",selectedAgent);
}
}
public class BufferedSingleFileUploadDb
{
[Required]
[Display(Name ="File")]
public IFormFile FormFile { get; set; }
}
上载页面是从标准EF核心“创建”模板中构建出来的,并经过修改以继承上面的类,填充选择列表,处理上载并创建记录。
问题: 尝试将选择列表与多部分enctype网格化时,我做错了。加载页面时,选择列表拒绝填充。
CS文件:
public class UploadModel : BufferedSingleFileUploadDbModel
{
private readonly WindowsAuthTest3.Data.WindowsAuthTest3Context _context;
public UploadModel(WindowsAuthTest3.Data.WindowsAuthTest3Context context)
{
_context = context;
}
public IActionResult OnGet()
{
PopulateAgentsDropDownList(_context);
return Page();
}
[BindProperty]
public SysInfo SysInfo { get; set; }
// To protect from overposting attacks,enable the specific properties you want to bind to,for
// more details,see https://aka.ms/RazorPagesCRUD.
public async Task<IActionResult> OnPostUploadAsync()
{
using(var memoryStream = new MemoryStream())
{
await FileUpload.FormFile.CopyToAsync(memoryStream);
SysInfo.Content = memoryStream.ToArray();
}
if (!ModelState.IsValid)
{
return Page();
}
_context.SysInfo.Add(SysInfo);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
}
CSHTML文件:
@page
@model WindowsAuthTest3.Pages.Infos.UploadModel
@{
ViewData["Title"] = "Upload";
}
<h1>Upload</h1>
<h4>SysInfo</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form enctype="multipart/form-data" method="post">
<div class="form-group">
<label asp-for="SysInfo.AgentID" class="control-label"></label>
<select asp-for="SysInfo.AgentID" class="form-control" asp-items="@Model.AgentNameSL"></select>
</div>
<div class="form-group">
<label asp-for="FileUpload.FormFile"></label>
<input asp-for="FileUpload.FormFile" type="file">
</div>
<div class="form-group">
<input asp-page-handler="Upload" class="btn btn-primary" type="submit" value="Upload">
</div>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
问题:
- 多部分enctypes中是否可以包含选择列表?如果是,我只是写错了吗?
- 如果没有,在上传文件时如何构造多个post方法以完成外键的设置?我曾考虑过将代理ID设置为可空,然后通过编辑页面分配该ID,但这听起来像是一种可怕的解决方法,容易出现用户错误。
解决方法
分离发布方法后,我注意到选择列表将填充,然后在上传文件后消失。这似乎是由于ASP页处理程序。我将代码合并到常规的post方法中,如下所示,现在一切正常。
CSHTML
<div class="row">
<div class="col-md-4">
<form enctype="multipart/form-data" method="post">
<div class="form-group">
<label asp-for="SysInfo.AgentID" class="control-label"></label>
<select asp-for="SysInfo.AgentID" class="form-control" asp-items="@Model.AgentNameSL"></select>
</div>
<div class="form-group">
<label asp-for="FileUpload.FormFile"></label>
<input asp-for="FileUpload.FormFile" type="file">
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Create">
</div>
</form>
</div>
</div>```
CS
public async Task<IActionResult> OnPostAsync()
{
using (var memoryStream = new MemoryStream())
{
await FileUpload.FormFile.CopyToAsync(memoryStream);
SysInfo.Content = memoryStream.ToArray();
}
if (!ModelState.IsValid)
{
return Page();
}
_context.SysInfo.Add(SysInfo);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
,
您可以通过一种简单的方式在剃须刀页面中使用此html:
<form enctype="multipart/form-data" method="post">
<dl>
<dt>
<label>Choose File</label>
</dt>
<dd>
<input name="file" type="file">
</dd>
</dl>
<input asp-page-handler="Upload" class="btn btn-info btn-block" type="submit" value="Upload" />
</form>
然后在页面模型的OnPostUpload方法中,只需将IFormFile文件作为参数传递即可
public IActionResult OnPostUpload(IFormFile file)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。