javascript - MVC Core 如何允许表单嵌入另一个表单

Question

美好的一天

我真的需要你的帮助，因为我目前陷入困境，需要你对如何解决这个问题的意见，请查看我的代码。

浏览次数:

@using (Html.BeginForm("Test", "Student", FormMethod.Post))
{
    for (int i = 0; i < Model.Count(); i++)
     {
         @Html.TextBoxFor(model => Model[i].Name)
          <input class="btn btn-default" type="submit" value="submit all student names"/>

         <form action="/Student/Upload/@Model[i].Id" method="post" enctype="multipart/form-data">
             <input class="btn btn-default" type="file" name="photofile" value="photofile" style="width: 100%;"/>
             <input class="btn btn-default" value="submit files" type="submit"/>
         </form>
     }
}

Controller :

 public async Task<IActionResult> Upload(int id, IFormFile photofile)

 [HttpPost, Route("Student/Upload/{id:int=0}")]
 public IActionResult Test(List<Student> students)

所以基本上我想做的是，当加载表单时，将会有学生姓名和一个提交所有姓名的按钮，因此当用户修改文本框中的任何更改并单击提交时，整个集合将作为列表学生传递到测试中并进行相应修改，它工作得很好，直到我也必须将上传引入其中。

现在我已经上传，一旦加载表单，学生姓名文本框和提交按钮以及基于学生人数的输入数量以及提交文件的输入按钮，我需要提交一个文件一次只有一个受到影响，上传也成功工作，除了现在当我修改学生姓名并提交时，只有第一个索引正在工作，其余的列表学生仅接受第一个索引修改，其余的将始终show List = 0，我相信这是由于表单被复制的问题，无效的html，但是有什么方法可以覆盖它以使其正常工作吗？

我需要将上传表单放在里面，因为我需要方法“post”enctype =“”，并且我还需要将输入放在学生姓名文本框的旁边/上方。

非常感谢

Answer 1

嵌套表单是无效的 html，不受支持，并且无法保证不同浏览器甚至同一浏览器的不同版本之间的行为。

如果您一次只想上传一个文件，那么您可以使用 ajax(使用 Formdata )来提交该文件以及学生的关联 ID(请参阅 this answer 作为示例)，但是因为您发布了每个 Student 的所有其他属性然后您还可以通过一次操作发布与每个学生关联的文件。

创建一个 View 模型来绑定(bind)您的 View

public class StudentVM
{
    public int ID { get; set; }
    public string Name { get; set; }
    ....
    public IFormFile { get; set; }
    public string FileName { get; set; }
    public string FilePath { get; set; }
}

并传递 List<StudentVM>到GET方法中的 View

您的 View 将是

@model List<StudentVM>
@using (Html.BeginForm("Test", "Student", FormMethod.Post, new { enctype="multipart/form-data" }))
{
    for (int i = 0; i < Model.Count; i++)
    {
        @Html.TextBoxFor(m => m[i].Name)
        ....
        @Html.TextBoxFor(m => m[i].File, new { type = "file" })
        ....
    }
    <input type="submit" ... />
}

然后将发回

[HttpPost] 
public IActionResult Test(List<StudentVM> model)

并且集合将被正确绑定(bind)。