为了提升用户体验，一般我们采用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. RabbitMQ集群和失败处理

    RabbitMQ内建集群的设计用于完成两个目标:允许消费者和生产者在RabbitMQ节点在奔溃的情况下继续运行,以及通过添加更多的节点来线性扩展消息通信的吞吐量.当失去一个RabbitMQ节点时客户端 ...

  2. 技术福利：mysql数据库的基本命令汇总整理

    一.创建数据库: create database database_name: php中创建数据库的两种方法:(mysql_create_db(),mysql_query()) $conn = mys ...

  3. .Net程序员学用Oracle系列(27)：PLSQL 之游标、异常和事务

    1.游标 1.1.游标属性 1.2.隐式游标 1.3.游标处理及案例 2.异常 2.1.异常类别 2.2.异常函数 2.3.异常处理及案例 3.事务 3.1.开始事务.结束事务 3.2.自治事务 3. ...

  4. python 之变量

    什么是变量? 变量就是存储一个不固定的值,可以随时更改其值. 1.变量不仅可以是数字,还可以是任意数据类型 2.变量名必须是大小写英文.数字和_的组合,且不能用数字开头 python变量如何存储 首先 ...

  5. C#设置richtextbox某一段文本颜色

    假设 RichTextBox1 文本是"你好,我爱你中国",想要把中国变为红色,则 可以先找到中的位置是 7 :国的位置是8 设置 RichTextBox1.SelectionSt ...

  6. Jmeter结构体系及运行原理

    Jmeter结构体系 把Jmeter的结构体系拆分为三维空间,如图: X1~X5:是负载模拟的一个过程,使用这些组件来完成负载的模拟: X1:选择协议,模拟用户请求,检查服务器响应是否正确,然后收集结 ...

  7. 3.Java 加解密技术系列之 SHA

    Java 加解密技术系列之 SHA 序 背景 正文 SHA-1 与 MD5 的比较 代码实现 结束语 序 上一篇文章中介绍了基本的单向加密算法 — — MD5,也大致的说了说它实现的原理.这篇文章继续 ...

  8. lua中 table 元表中元方法的重构实现

    转载请标明出处http://www.cnblogs.com/zblade/ lua作为游戏的热更新首选的脚本,其优势不再过多的赘述.今天,我主要写一下如何重写lua中的元方法,通过自己的重写来实现对l ...

  9. MySQL开放远程登录

    在服务器上部署MYSQL每次观看MYSQL记录或者修改的时候都需要登录服务器,又烦又占资源.所以使用另一种方法:对外开放接口. 注:如果某些服务器开启防火墙屏蔽了某些接口就有可能导致远程用户无法登录M ...

  10. SQL注入攻击[详解]

    SQL注入攻击是黑客对数据库进行攻击的常用手段之一.随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候, ...