ASP.NET使用AJAX完成前后端表单数据交互（包含Vue绑定下拉选项）

Posted 2020-11-28 可乐气泡

毕业工作半年一直在做后端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>

View Code

 

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();
    },    
});              

View Code

 

后端代码：

[HttpPost]
[AllowAnonymous]
public ActionResult IndexGrid(string year, string month)
{
    return Json(Service.GetInformationList(year, month));
}