本文摘自PHP中文网,作者零下一度,侵删。
为了提升用户体验,一般我们采用ajax加载数据然后根据数据渲染html,渲染html可以使用前端渲染和服务器端渲染,有兴趣的可以了解一下为了提升用户体验,一般我们采用ajax加载数据然后根据数据渲染html,渲染html可以使用前端渲染和服务器端渲染。
前端渲染
使用前端模版引擎或MVC框架,例如underscore.js的template或者是使用angular.js等框架,当然也可以不用任何框架自己拼接html。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<head>
<title>underscore.js的template渲染html</title>
</head>
<body>
<p id= "content" ></p>
<script src= "~/static/js/lib/jquery-3.1.1.js" ></script>
<script src= "http://www.css88.com/doc/underscore/underscore.js" ></script>
<script>
var data = { name: 'john' , age: "18" }
var compiled = _.template( "<p>姓名: <%= name %></p><p>年龄: <%= age %></p>" );
$( "#content" ).append(compiled(data));
</script>
</body>
</html>
|
后端渲染
如果是使用的asp.net mvc可以使用部分视图,由ajax直接加载服务器端渲染后的部分视图,这部分的全部代码请访问我的github。
1 2 3 4 5 6 7 8 9 | public ActionResult News()
{
return View();
}
public ActionResult RenderNews( int pageIndex = 1, int pageSize = 10)
{
return PartialView();
}
|
前端直接发ajax请求RenderNews
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $.ajax({
url: '/Home/RenderNews?pageIndex=3&pageSize=10' ,
type: "POST" ,
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
if (result.trim() != "" ) {
$( "#containter" ).html(result);
}
},
error: function (e) {
console.log(e);
}
});
|
使用这种方式是后端直接输出的是渲染后的html,有时候我们需要返回给前端错误码,例如{“code”:10000,"message":"成功","data":"<p>aaaaa</p>"},所以就需要在controller中动态调用分布视图,拿到渲染结果,动态调用代码为:
阅读剩余部分
相关阅读 >>
asp.net性能监控及其优化入门
asp.net core 应用程序发布命令实例
asp.net core实例详解三(新建项目)
asp.net连接access数据库相对路径写法
asp.net core实例教程之如何设置中间件
[asp.net mvc 小牛之路]08 - area 使用
asp.net core 发送邮件
asp.net core异常和错误处理(8)_实用技巧
asp.net mvc中传参并绑定数据的实例教程
详细介绍asp.net core mvc项目实现多语言的示例代码
更多相关阅读请进入《asp.net》频道 >>
清华大学出版社
作者:[美]克里斯琴·内格尔(Christian Nagel)著。出版时间:2019年3月。
转载请注明出处:木庄网络博客 » 用asp.net mvc部分视图渲染html的实例教程