引入相关文件

    <script src="../Scripts/vue.js"></script>
    <script src="../Scripts/index.js"></script>
    <script src="../Scripts/vue-router.js"></script>
    <script src="../Scripts/vue-resource.js"></script>

aspx.cs中获取数据的方法

 [WebMethod]
        public static dynamic getStuList()
        {
            StuWork.BLL.biz_students_info bll = new StuWork.BLL.biz_students_info();
            DataTable dt = bll.GetListByPage("", "", 1, 2).Tables[0];
            var count = 25;
            var dnc= new
            {
                pageIndex = 1,
                count,
                data = bll.DataTableToList(dt)
            };
            return dnc;
       }

js文件中调用

methods: {
        fetchData: function () {
            this.stuShow = [];
            this.$http.post("http://localhost:8008/biz_students_info/StuList.aspx/getStuList")
                .then(response => {
                    console.info(response);
                    this.total = response.body.d.count;
                    this.stuShow = response.body.d.data;
                })
                .catch(response => this.$alert(response.body.Message, "展示学生信息", { type: "error" }));
        },
        sizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.fetchData();
        },
        pageIndexChange: function (pageIndex) {
            this.pageIndex = pageIndex;
            this.fetchData();
        }
    }

显示结果
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐