MVC Core 如何在另一个表单中允许表单答案

【问题标题】：MVC Core How to allow form inside another formMVC Core 如何在另一个表单中允许表单
【发布时间】：2018-07-10 02:47:48
【问题描述】：

美好的一天

我现在卡住了，真的需要你的帮助，需要你对如何解决这个问题的意见，请看我的代码。

观看次数：

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

控制器：

 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=""，而且我需要输入在学生姓名文本框的旁边/上方。

非常感谢

【问题讨论】：

嵌套表单是无效的 html 并且不受支持（并且无法保证它在不同浏览器和浏览器版本中的行为）
是什么让您认为您需要嵌套表单？
@StephenMuecke 那么我应该完全删除那里的上传文件并将其放在某个地方吗？
@StephenMuecke 我是新手，需要一些建议
@StephenMuecke 我真的希望它与学生姓名在同一页面上

标签： javascript jquery html asp.net-mvc forms

【解决方案1】：

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

如果您想一次只上传一个文件，那么您可以使用 ajax（使用 Formdata）来提交该文件和学生的相关 ID（例如，请参阅 this answer）由于您发布了每个 Student 的所有其他属性，因此您还可以在一个操作中发布与每个学生关联的文件。

创建一个视图模型来绑定你的视图

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

并在 GET 方法中将 List<StudentVM> 传递给视图

你的视图将是

@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)

并且该集合将被正确绑定。

【讨论】：