为了提升用户体验，一般我们采用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. 使用faker 生成中文测试数据

    https://github.com/fzaninotto/Faker/blob/master/src/Faker/Provider/zh_CN/Address.php 常用的类型都在里面. 下面是一 ...

  2. SPRING AOP ....0 can't find referenced pointcut

    下载最新的aspectjweaver就可以了,因为JDK的版本的问题不兼容. //织入点语法 @Pointcut("execution(public * com.frank.dao..*.* ...

  3. js 高级算法 - 动态规划

    主要是看了<数据结构与算法>有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中学习知识. 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for ...

  4. （基础篇 走进javaNIO）第一章-java的i/o演进之路

    Java 是由 SUN公司在 1995 年首先发布 的编程语 言和计算平 台.这基础技术 支持最新 的程序 ,包括 实用程序 .游 戏和业 务应用程序 .J ava 在世界各地 的 8.5  亿 多 ...

  5. javaWeb学习总结（4）- HttpServletResponse

    一.简介: Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. request和response对象即然代表请求和 ...

  6. 浅谈JAVA验证码~

    这两天在帮同学做个项目,项目中需要做个验证码,说实话那么多年竟然没注意过这东西,原理很简单,贴出来给大家做个参考. 1.简单介绍 一般稍微有些经验的程序员都不会再自己写原生验证码生成了,因为各种强大的 ...

  7. 细说Linux权限

    目录: 归属权与访问权 chmod:访问权限设置 chown:所属权限设置 umask:权限掩码 隐藏属性 chattr:写保护.误删保护 单独限权 setfacl 一.归属和访问权限简介 1.归属( ...

  8. ProxySQL的相关维护说明

    背景: 前面的2篇文章MySQL ProxySQL读写分离使用初探和MySQL ProxySQL读写分离实践大致介绍了ProxySQL的使用说明,从文章的测试的例子中看到ProxySQL使用SQLIT ...

  9. 玩转Storage Table 的PartitionKey，RowKey设计

    参阅的文章 l  https://docs.microsoft.com/en-us/rest/api/storageservices/fileservices/designing-a-scalable ...

  10. Java常用类之【日期相关类】

    一.日期类 Java语言提供了2个类来处理日期 Date类 Date类以毫秒来表示特定的日期 构造方法 Date date = new Date(); System.out.println(date) ...