为了提升用户体验，一般我们采用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. 在linux服务器上发布web应用的完整过程

    首先你要有一个完整的web应用的小Demo,一个简单的demo就可以了,但是要涉及到数据库,笔者这里简单的模拟一个登陆的过程. 在本地测试,访问项目: 键入账号密码,点击登陆: 就是这么个简单的动作, ...

  2. linux系统管理--进程管理

    这两天一直维护公司的服务器,主要对进程管理和linux工作管理,把一些零散的知识整理一下,书归正传~ 什么进程?  以下是百度给的解释的进程,说实话,云里雾里的,其实linux进程和windows进程 ...

  3. jdbc驱动的类加载过程

    这段时间跟类加载机制是干上了. 这一篇来分析一下jdbc工作过程中涉及到的类加载流程,重点是想看看在双亲委派模型不适用的时候,如何解决. 第一步,加载数据库的驱动 Class.forName(&quo ...

  4. Hierarchy Viewer工具使用

    目前,在eclipse的ADT Android插件中,还不能启动Hierachy Viewer,但可以从Android SDK工具包中,通过命令行的方式可以启动,具体方法为,到Android SDK下 ...

  5. 《安卓网络编程》之第五篇 WebView的使用

    Android提供了WebView组件,,在Android的所有组件中,WebView的功能是最强大的,是当之无愧的老大.WebView组件本身就是一个浏览器实现,她的内核是基于开源WebKit引擎. ...

  6. 谈一谈JDK8的函数式编程 （一）

    系列之前我想说的   最近有一段时间没写博客了,这几天回到学校,才闲下来,决定写一写最近学习到的只是,既是为了分享,也是为了巩固.之前看到过一篇调查,文章的数据是学习新知识,光是看只能获得大约5%,然 ...

  7. Spring Boot 声明式事务结合相关拦截器

    我这项目的读写分离方式在使用ThreadLocal实现的读写分离在迁移后的偶发错误里提了,我不再说一次了,这次是有要求读写分离与事务部分要完全脱离配置文件,程序员折腾了很久,于是我就查了一下,由于我还 ...

  8. JMeter-Eclipse添加自定义函数 MD5加密 32位和16位

    最近公司的接口都是MD5  16位加密,所以要使用加密功能. 之前也做过加密,因为用的比较少,所以是写了一个加密方法,导出JAR包,调用的.用起来需要很多设置,并且换算效率也不高.听前同事说,jmet ...

  9. With our powers combined! xgboost and pipelearner

    @drsimonj here to show you how to use xgboost (extreme gradient boosting) models in pipelearner. Why ...

  10. RFM模型——构建数据库营销的商业战役！（转）

    RFM模型:R(Recency)表示客户最近一次购买的时间有多远,F(Frequency)表示客户在最近一段时间内购买的次数,M (Monetary)表示客户在最近一段时间内购买的金额.一般原始数据为 ...