ASP .Net Core MVC如何利用vue提交包含List属性的form表单

前言

遇到这个问题，是由于自己在mvc项目中使用vue而并不想jquery（人嘛，就是要折腾），并且表单中的一个属性是一个集合。

研究了下Razor如何实现的，用jquery感觉就挺麻烦了，vue用在数据绑定方面好强好方便，灵活运用后感觉很棒。

Razor模板的确强大，TagHelper书写太爽快了，但是数据修改后的更新需要在前端利用jquery进行修改，感觉挺可惜的，不知道有没有更方便的。

Razor是如何实现

首先我们简单定义一下结构

     public class Movie
     {
         public int Id { get; set; }
         public string Name { get; set; }
         public List<Pseron> Persons { get; set; } = new List<Pseron>();
     }
     public class Pseron
     {
         public int Id { get; set; }
         public string Name { get; set; }
         public int Age { get; set; }
     }

接着创建一个Action

         public IActionResult List()
         {
             Movie movie = new Movie();
             movie.Id = ;
             movie.Name = "猫和老鼠";
             movie.Persons.Add(, Name =  });
             movie.Persons.Add(, Name =  });
             return View(movie);
         }

然后我们在视图里简单的显示一下

 @model Movie

 <form asp-action="List">
     <div class="form-group">
         <label asp-for="Id"></label>
         <input class="form-control" asp-for="Id" />
     </div>
     <div class="form-group">
         <label asp-for="Name"></label>
         <input class="form-control" asp-for="Name" />
     </div>
     <table class="table">
         <thead>
             <tr>
                 <td>序号</td>
                 <td>Id</td>
                 <td>Name</td>
                 <td>Age</td>
             </tr>
         </thead>
         <tbody>
             @for (int i = 0; i < Model.Persons.Count; i++)
             {
                 <tr>
                     <td>@(i + 1)</td>
                     <td><input class="form-control" asp-for="Persons[i].Id" /></td>
                     <td><input class="form-control" asp-for="Persons[i].Name" /></td>
                     <td><input class="form-control" asp-for="Persons[i].Age" /></td>
                 </tr>
             }
         </tbody>
     </table>
 </form>

最后我们查看下结果

观察结论

众所周知，提交form时依据的是name属性，Razor模板渲染的时候，按照 “ 属性[索引].属性 ”的形式作为name赋值，那么我们只要依样画葫芦就可以了。

需要注意的是，索引必须从0开始，且索引应该连续。这时候就觉得用jQuery去控制增删就麻烦很多。vue在这个时候有一点点小方便。

让我们看看如何用vue去实现

同样的我们建立一个Action（偷懒，没建HttpPost请求），这里我们需要将数据转换为json字符串，然后在视图里再转换为json让vue去渲染

         public IActionResult ListVue(Movie movie)
         {
             movie = movie ?? new Movie();
             ViewData["Data"] = System.Text.Json.JsonSerializer.Serialize(movie);
             return View();
         }

然后建立一个视图并用vue去渲染数据，这里用了@Html.Raw()处理了一下字符串，不然双引号会被处理成转义字符。

添加新行的只需要向数组中插入一个对象就完成了，而且索引只需要vue去管理就可以了，体验一级棒！！！

删行也非常简单！！！

 @{
     var Data = ViewData["Data"].ToString();
 }

 <div id="app">
     <form asp-action="ListVue">
         <div class="form-group">
             <label>Id</label>
             <input class="form-control" name="Id" v-model="movie.Id" />
         </div>
         <div class="form-group">
             <label>Name</label>
             <input class="form-control" name="Name" v-model="movie.Name" />
         </div>
         <a href="javascript:void(0)" class="btn btn-primary mb-1" @@click="NewRow()">插入新行</a>
         <table class="table">
             <thead>
                 <tr>
                     <td>序号</td>
                     <td>Id</td>
                     <td>Name</td>
                     <td>Age</td>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="(item, index) in movie.Persons">
                     <td>{{ index + 1 }}</td>
                     <td><input class="form-control" :name="'Persons['+index+'].Id'"   v-model="item.Id" /></td>
                     <td><input class="form-control" :name="'Persons['+index+'].Name'" v-model="item.Name" /></td>
                     <td><input class="form-control" :name="'Persons['+index+'].Age'"  v-model="item.Age" /></td>
                 </tr>
             </tbody>
         </table>
         <button type="submit" class="btn btn-primary">提交</button>
     </form>

 </div>

 @section Scripts{
     <script>
         var vm = new Vue({
             el: '#app',
             data: {
                 movie: JSON.parse('@Html.Raw(Data)')
             },
             methods: {
                 NewRow() {
                     this.movie.Persons.push([]);
                 }
             }
         })
     </script>
 }

我们看看是怎样的界面

我们再去跟踪下前后端都发生了什么。

    

总结

vue的绑定功能真的是太方便了，不知道Razor有没有办法实现类似的功能。用jQuery又觉得麻烦了。