全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

详解使用asp.net mvc部分视图渲染html

为了提升用户体验,一般我们采用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 = 1, int pageSize = 10)
 {
   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  # mvc部分视图渲染  # ASP.NET Core MVC中的视图(Views)  # ASP.NET Core MVC学习之视图组件(View Component)  # ASP.NET Core MVC基础学习之局部视图(Partial Views)  # ASP.NET MVC中分部视图的应用方法  # ASP.NET MVC从视图传参到控制器的几种形式  # asp.net core mvc权限控制:在视图中控制操作权限  # ASP.NET MVC从控制器传递数据到视图的四种方式详解  # asp.net MVC 根据菜单树类别不同动态加载视图的实现步骤  # 可以使用  # 后端  # 这部  # 的是  # 加载  # 较高  # 较好  # 或者是  # 大家多多  # 直接发  # 但由于  # 错误码  # age  # john  # data  # http  # www  # var  # doc  # compiled 


相关文章: c# Task.ConfigureAwait(true) 在什么场景下是必须的  如何规划企业建站流程的关键步骤?  如何选择服务器才能高效搭建专属网站?  网站广告牌制作方法,街上的广告牌,横幅,用PS还是其他软件做的?  如何快速生成ASP一键建站模板并优化安全性?  如何零基础开发自助建站系统?完整教程解析  一键网站制作软件,义乌购一件代发流程?  名字制作网站免费,所有小说网站的名字?  建站之星安装模板失败:服务器环境不兼容?  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站?  建站主机选购指南:核心配置优化与品牌推荐方案  如何用花生壳三步快速搭建专属网站?  建站主机如何安装配置?新手必看操作指南  保定网站制作方案定制,保定招聘的渠道有哪些?找工作的人一般都去哪里看招聘信息?  高端建站如何打造兼具美学与转化的品牌官网?  建站上市公司网站建设方案与SEO优化服务定制指南  建站之星安装提示数据库无法连接如何解决?  ,制作一个手机app网站要多少钱?  内部网站制作流程,如何建立公司内部网站?  建站VPS配置与SEO优化指南:关键词排名提升策略  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍?  制作网站的公司有哪些,做一个公司网站要多少钱?  专业的网站制作设计是什么,如何制作一个企业网站,建设网站的基本步骤有哪些?  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么?  如何快速搭建FTP站点实现文件共享?  制作表格网站有哪些,线上表格怎么弄?  如何正确选择百度移动适配建站域名?  如何选购建站域名与空间?自助平台全解析  云南网站制作公司有哪些,云南最好的招聘网站是哪个?  如何用西部建站助手快速创建专业网站?  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏?  如何快速建站并高效导出源代码?  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息?  太原网站制作公司有哪些,网约车营运证查询官网?  如何确保FTP站点访问权限与数据传输安全?  如何选择香港主机高效搭建外贸独立站?  七夕网站制作视频,七夕大促活动怎么报名?  导航网站建站方案与优化指南:一站式高效搭建技巧解析  如何用y主机助手快速搭建网站?  c++ stringstream用法详解_c++字符串与数字转换利器  建站之星展会模板:智能建站与自助搭建高效解决方案  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的?  定制建站流程解析:需求评估与SEO优化功能开发指南  网站建设设计制作营销公司南阳,如何策划设计和建设网站?  如何在阿里云通过域名搭建网站?  制作网站的基本流程,设计网站的软件是什么?  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  建站一年半SEO优化实战指南:核心词挖掘与长尾流量提升策略  建站主机空间推荐 高性价比配置与快速部署方案解析  电商平台网站制作流程,电商网站如何制作? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。