C#如何用ajax把本地数据库的数据显示在前端页面(view里面)?例如一个span一个div

JavaScript013

C#如何用ajax把本地数据库的数据显示在前端页面(view里面)?例如一个span一个div,第1张

首先写一个一般处理程序来获取到你要加载到前台的数据,并序列化成json格式。

//代码实例

public class AjaxUserList : IHttpHandler {

        public void ProcessRequest(HttpContext context) {

            context.Response.ContentType = "text/plain"

            BLL.UserInfoBll userInfoBll = new BLL.UserInfoBll()

            int pageIndex

            if (!int.TryParse(context.Request["pageIndex"],out pageIndex)) {

                pageIndex = 1

            }

            int pageSize = 5

            int pageCount = userInfoBll.GetPageCount(pageSize)

            //判断当前页码的取值范围

            pageIndex = pageIndex < 1 ? 1 : pageIndex

            pageIndex = pageIndex > pageCount ? pageCount : pageIndex

            //获取分页数据

            List<Model.UserInfo> userList = userInfoBll.GetPageList(pageIndex, pageSize)

            //获取页码条

            string pageBar = Util.PageBar.GetPageBar(pageIndex, pageCount)

            //***********************************************************

            //使用匿名类将多组数据序列化成Json格式

            //***********************************************************

            JavaScriptSerializer js = new JavaScriptSerializer()

            string json = js.Serialize(new { resultUserList = userList, resultPageBar = pageBar })//此处使用了匿名类将userList集合和pageBar进行封装后,再序列化

            //***********************************************************

            context.Response.Write(json)

        }

        public bool IsReusable {

            get {

                return false

            }

        }

    }

然后,前台ajax请求这个一般处理处理程序获取到json数据,再通过js将数据添加到html。

//加载用户列表示例

        function LoadUserInfo(pageIndex) {

            $.post("AjaxUserList.ashx", { "pageIndex": pageIndex }, function (data) {

                var serverData = $.parseJSON(data)

                for (var i = 0 i < serverData.resultUserList.length i++) {

                    $("<tr><td>" + serverData.resultUserList[i].ID + "</td><td>" + serverData.resultUserList[i].UName + "</td><td>" + serverData.resultUserList[i].UPwd + "</td><td>" + ChangeDateFormat(serverData.resultUserList[i].SubTime) + "</td><td>" + serverData.resultUserList[i].Remark + "</td><td><a href='javascript:void(0)' class='details' Uid='" + serverData.resultUserList[i].ID + "'>详细</a></td><td><a href='javascript:void(0)' class='edits' Uid='" + serverData.resultUserList[i].ID + "'>编辑</a>  <a href='javascript:void(0)' class='deletes' Uid='" + serverData.resultUserList[i].ID + "' UName='" + serverData.resultUserList[i].UName + "'>删除</a></td></tr>").appendTo("#tabUserList")

                }

            })

        }

基于前面的入门文章,你对webpack的入口文件的概念应该比较清楚了,那么本文主要介绍一些entry配置细节。

概念解释

如上图所示,在多个代码模块中会有一个起始的 .js 文件,这个便是 webpack 构建的入口。webpack 会读取这个文件,并从它开始解析依赖,然后进行打包。如图,一开始我们使用 webpack 构建时,默认的入口文件就是 ./src/index.js。

我们常见的项目中,如果是单页面应用,那么可能入口只有一个;如果是多个页面的项目,那么经常是一个页面会对应一个构建入口。

入口可以使用 entry 字段来进行配置,webpack 支持配置多个入口来进行构建。

不同写法场景

//单文件入口

module.exports = {

entry: './src/index.js'

}

// 上述配置等同于

module.exports = {

entry: {

main: './src/index.js'

}

}

//支持对象语法

module.exports = {

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

}

// 或者配置多个入口

module.exports = {

entry: {

foo: './src/page-foo.js',

bar: './src/page-bar.js',

// ...

}

}

// 使用数组来对多个文件进行打包,多个文件作为一个入口,webpack 会解析两个文件的依赖后进行打包

module.exports = {

entry: {

main: [

'./src/foo.js',

'./src/bar.js'

]

}

}

实际方案

单文件以及供应商

主要适用于有些第三方的文件不用杂糅到入口文件,分别进行依赖打包。

const config = {

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

}

多页应用入口方案设计

这个方案主要是针对多页应用的设计,我们可以针对多页分别设计自己的入口,除了更加清晰之外,讲为不同的入口文件提供不同的页面模板,有利于更好的提取公共文件,对于其他页面没有必要的文件不用加载。在入口点之间重复使用大量代码/模块的多页面应用程序可以大大受益于这些技术。

const config = {

entry: {

pageOne: './src/pageOne/index.js',

pageTwo: './src/pageTwo/index.js',

pageThree: './src/pageThree/index.js'

}

}

备注:作为经验法则:一个页面最好只用一个入口文件的js

参考文档

掘金小册《使用 webpack 定制前端开发环境》