为了提升用户体验,一般我们采用 ajax 加载数据然后根据数据渲染 html,渲染 html 可以使用前端渲染和服务器端渲染。
使用前端模版引擎或 MVC 框架,例如 underscore.js 的 template 或者是使用 angular.js 等框架,当然也可以不用任何框架自己拼接 html。
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- underscore.js的template渲染html
- </title>
- </head>
- <body>
- <div id="content">
- </div>
- <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。
- public ActionResult News()
- {
- return View();
- }
- publicActionResult RenderNews(intpageIndex =1,intpageSize =10)
- {
- return PartialView();
- }
前端直接发 ajax 请求 RenderNews
- $.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 中动态调用分布视图,拿到渲染结果,动态调用代码为:
- public abstract class BaseController : Controller
- {
- /// <summary>
- /// 动态渲染分布视图
- /// </summary>
- /// <param name="viewName">视图名称</param>
- /// <param name="model">模型</param>
- /// <returns>渲染后的html</returns>
- public virtual stringRenderPartialViewToString(stringviewName,object model)
- {
- if(string.IsNullOrEmpty(viewName))
- viewName =this.ControllerContext.RouteData.GetRequiredString("action");
- this.ViewData.Model = model;
- using(varsw =new StringWriter())
- {
- ViewEngineResult viewResult = System.web.Mvc.ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
- varviewContext =newViewContext(this.ControllerContext, viewResult.View,this.ViewData,this.TempData, sw);
- viewResult.View.Render(viewContext, sw);
- return sw.GetStringBuilder().ToString();
- }
- }
- }
由于后端渲染可以使用 asp.net mvc 模版引擎语法,所以在可维护性以及开发效率上比前端渲染较好,我个人也倾向使用后端渲染,但由于需要传递给浏览器 html,所以带宽占用会较高,这部分损失可以增加服务器带宽解决。
来源: http://www.cnblogs.com/zw369/p/6087319.html