标签：代码 row display main grid result sof tle 使用
毕业工作半年一直在做后端api，最近进入一个新项目同时做前后端，就从基础开始记录总结。
因为项目代码不便上传，以下代码是我将部分内容修改之后的结果，主要记录实现方法，有不当的地方还望大家交流指正~
HTML：
<div id="Information"> <div id="SearchBarDiv" v-cloak> <form> <select id="YearSelect" class="form-control" v-model="yearVal" v-on:change="YearValChange"> <option v-for="item in yearOption" :value="item.Value">{{item.Title}}</option> </select> <select id="MonthSelect" class="form-control" v-model="monthVal" v-on:change="MonthValChange"> <option v-for="item in monthOption" :value="item.Value">{{item.Title}}</option> </select> </form> </div> <div id="MainContent" v-cloak> <table class="table" id="DataTable"> <tr> <th>@Titles.Code</th> <th>@Titles.Name</th> <th>@Titles.Age</th> <th>@Titles.Phone</th> <th>@Titles.Address</th> </tr> <tr v-for="(item,index) in dataDetails"> <td>{{ item.Code }}</td> <td>{{ item.Name}}</td> <td>{{ item.Age}}</td> <td>{{ item.Phone}}</td> <td>{{ item.Address}}</td> </tr> </table> </div> </div>
JS：
var DataQueryByStaff = new Vue({ el: ‘#Information‘, data: { yearOption: [{ Title: "2020", Value: "2020" }], monthOption: [{ Title: ‘Jan‘, Value: "01" }], dataDetails: [], yearVal: "", monthVal: "", }, methods: { GetData: function () { var _this = this; $.ajax({ type: "post", url: url data: { year: this.yearVal, month: this.monthVal, }, async: false, success: function (data) { _this.dataDetails = data }, error: function (XMLHttpRequest, textStatus, errorThrown) { var e = errorThrown.toString(); console.log(e); } }) }, YearValChange: function () { this.GetData(); }, MonthValChange: function () { this.GetData(); }, mounted: function () { this.GetData(); }, });
后端代码：
[HttpPost] [AllowAnonymous] public ActionResult IndexGrid(string year, string month) { return Json(Service.GetInformationList(year, month)); }
ASP.NET使用AJAX完成前后端表单数据交互（包含Vue绑定下拉选项）
标签：代码 row display main grid result sof tle 使用
原文地址：https://www.cnblogs.com/colapopo/p/12396701.html
