为了提升用户体验，一般我们采用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();

   }

  public ActionResult RenderNews(int pageIndex = , int pageSize = )

  {

      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 string RenderPartialViewToString(string viewName, object model)

     {

            if (string.IsNullOrEmpty(viewName))

                viewName = this.ControllerContext.RouteData.GetRequiredString("action");

            this.ViewData.Model = model;

            using (var sw = new StringWriter())

            {

                ViewEngineResult viewResult = System.Web.Mvc.ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);

                var viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);

                viewResult.View.Render(viewContext, sw);

                return sw.GetStringBuilder().ToString();

            }

     }

}

总结

　　由于后端渲染可以使用asp.net mvc 模版引擎语法，所以在可维护性以及开发效率上比前端渲染较好，我个人也倾向使用后端渲染，但由于需要传递给浏览器html，所以带宽占用会较高，这部分损失可以增加服务器带宽解决。

　　

　　　　

　　

　　　　

使用asp.net mvc部分视图渲染html的更多相关文章

  1. Asp.net MVC Razor视图模版动态渲染PDF，Razor模版生成静态Html

    Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html 1.前言 上一篇文章我开源了轮子,Asp.net Core 3.1 Razor视图模版动态渲染PDF,然后,很 ...

  2. asp.net mvc 部分视图加载区别

    ASP.NET MVC 部分视图   ASP.NET(11)  版权声明:本文为博主原创文章,未经博主允许不得转载. [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 ...

  3. ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...

  4. [转]ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...

  5. ASP.NET MVC 部分视图（转）

    [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control.我们的页面往往会有许多重用的地方,可以进行封装重用.使用 部分视图 :  1. 可以简写代 ...

  6. ASP.NET MVC编程——视图

    1Razon语法 使用@符号后接C#或VB.NET语句的方式. 基本规则 1)变量 @后直接变量即可 2)代码块 为使用表达式或多行代码,@后跟大括号将多行代码包括在大括号中 3)"+&qu ...

  7. 如何在FineUIMvc（ASP.NET MVC）视图中绑定多个模型？

    起因 这是知识星球内的一个网友提出的,按理说ASP.NET MVC中一个视图只能绑定一个模型(Model),在视图顶部标识如下: @model IEnumerable<FineUICore.Ex ...

  8. ASP.NET MVC使用RenderSection渲染节点

    几天没有时间做ASP.NET mvc练习,忙于ERP的二次开发.忙里间,想起MVC还有很多基础的知识需要撑握与了解.记得以前有练习过<MVC母版页_Layout.cshtml> http: ...

  9. ASP.NET MVC 部分视图

    [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control.我们的页面往往会有许多重用的地方,可以进行封装重用.使用 部分视图 :  1. 可以简写代 ...

随机推荐

  1. 全国各省市GeoCoord SQL文件（不包括区县）

    /* Navicat MySQL Data Transfer Source Server : 192.168.0.234 Source Server Version : 50543 Source Ho ...

  2. CSS之BFC及其应用

    BFC是Block Formatting Context的缩写,直译过来就是"块级格式化上下文".先不管它到底是什么,看一个例子: .parent{ border: 1px sol ...

  3. yaf学习之——yaf安装

    yaf的github源码地址 https://github.com/laruence/yaf 第一步: 下载dll扩展: http://pecl.php.net/package/yaf/2.3.5/w ...

  4. shell群发邮件脚本

    linux版本:CentOS  6.7        //可以使用lsb_release -a查看 一.修改/etc/mail.rc set from=123456@qq.com //你自己的真实邮箱 ...

  5. js算法集合（二） javascript实现斐波那契数列 （兔子数列）

    js算法集合(二)  斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解.     Javascript实 ...

  6. Windows下快速安装Xgboost（无需Git或者VS）

    xgboost的全称是eXtreme Gradient Boosting,现在已经风靡Kaggle.天池.DataCastle.Kesci等国内外数据竞赛平台,是比赛夺冠的必备大杀器!如果把数据竞赛比 ...

  7. linux下mysql修改root密码

    方法一:用set password命令 首先,登陆mysql mysql -u root -p 然后执行set password命令 set password for root@localhost = ...

  8. 第十五章（附）分布式缓存-Memcached

    一.概念 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能. 二.适用场合 1.分布式应用.由于 ...

  9. PC端网页的基本构成

    首先,一个前端最基本的就是排网页,有人会看不起拍页面,认为不就是排一个页面嘛,有啥的,分分钟的事,可是他不知道的是,一个网页中也包含了很多内容,像我们如果不理解margin,padding,会经常对我 ...

  10. PF2.1版本总结，在设计过程中遇到的问题以及技术分享

    在距离上一次的版本发布已经过去4个月的时间,因为个人的能力以及时间有限,所以这次的版本会推迟这么久.可是无论怎样,PF2.1带着自身的完善总算不负所望推出.在这次的版本调整中让我深有体会到了程序设计中 ...