为了提升用户体验，一般我们采用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. jQuery选择器的的优点

    jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...

  2. 回归-LDA与QDA

    作者:桂. 时间:2017-05-23  06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...

  3. python 计算两个日期相差多少个月

    近期,由于业务需要计算两个日期之前相差多少个月.我在网上找了很久,结果发现万能的python,居然没有一个模块计算两个日期的月数,像Java.C#之类的高级语言,都会有(date1-date2).mo ...

  4. 多线程编程-- part 3 多线程同步->synchronized关键字

    多线程同时访问一个资源,可以会产生不可预料的结果,所以为这个资源加锁,访问资源的第一个线程为其加锁后,其他线程便不能在使用那个资源,直到锁被解除. 举个例子: 存款1000元,能取出800的时候我就取 ...

  5. 在eclipse-jee-juno中配置Aptana对jQuery代码自动提示

    主要问题 在Aptana的Web Project中打开js文件有JavaScript的自动提示,但是在JavaEE项目中却没有. 版本 eclipse-jee-juno,即Eclipse 4.2的Ja ...

  6. NopCommerce（3.9）作业调度插件

    NopCommerce(3.9)作业调度插件视频教程录制完成,下面是插件源码下载地址和插件视频教程下载地址:插件下载地址: http://www.nopcommerce.com/p/2752/jobs ...

  7. 东正王增涛浅析OA信息化整合平台系统在企业中的应用价值

    王增涛说OA信息化整合平台系统作为企业管理中最基础的管理软件,已在企业成长道路上存在多年,它的应用开启了智能移动办公的先河,也让企业的办公流程管理更加的便捷.高效.流畅.省时.省力,它的使用不但让企业 ...

  8. poj3207

    poj3207 题意 平面上,一个圆,圆的边上按顺时针放着n个点.现在要连m条边, 比如a,b,那么a到b可以从圆的内部连接,也可以从圆的外部连接. 给你的信息中,每个点最多只会连接的一条边.问能不能 ...

  9. 使用Eclipse进行Javaweb项目开发时，如何设置外置浏览器Chrome

    使用Eclipse开发Javaweb项目时,在Eclipse中显示页面不是很好,那么如何让它自动打开外置浏览器呢?操作如下

  10. 一天搞定CSS： CSS选择器优先级--08

    选择器优先级:是指代码的执行顺序 通俗的说,就是多个选择器同时对一个标签分别添加样式,那么这个标签显示那个选择器设置的样式 1.优先级规则 2.规则1和2说明 优先级相同,谁后谁优先 优先级不同,优先 ...