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

时间:2018-01-31 04:40:26

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

美好的一天

我真的需要你的帮助,因为我目前卡住了,需要你就如何解决这个问题提出意见,请好好看看我的代码。

查看:

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

所以基本上我要做的是,在加载表单时,会有学生姓名和一个提交所有名称的按钮,因此当用户修改文本框中的任何更改并单击“提交”时,整个集合将作为列表学生传递给测试并相应地进行修改,它完全正常,直到我必须将上传介绍到其中。

所以现在我已经上传了,一旦表格被加载,学生文本框和提交按钮的名称以及根据学生数量输入的数字以及提交文件的输入按钮,我需要提交一个文件只在一个时间,只有一个受影响,上传工作也成功除了现在我修改学生姓名并提交时,只有第一个索引正在工作,其余的List学生只接受第一个索引修改,其余的总是show List = 0,我相信这是由于表单被复制的问题,无效的html,但有没有办法覆盖它以使其有效?

我需要将上传表单放在里面,因为我需要方法&#34; post&#34; ENCTYPE =&#34;&#34;而且我还需要将输入放在学生姓名文本框的旁边/上方。

非常感谢

1 个答案:

答案 0 :(得分: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; }
}

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

您的观点将是

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

并且集合将被正确绑定。