详解使用asp.net mvc部分视图渲染html
更新时间：2021年9月22日 10:03 点击：1823
为了提升用户体验，一般我们采用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购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
- PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
- 在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案，帮助大家更好的理解和学习使用asp.net core，感兴趣的朋友可以了解下...2021-09-22
IE6-IE9中tbody的innerHTML不能赋值的解决方法
IE6-IE9中tbody的innerHTML不能赋值，重现代码如下 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3...2014-06-07- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?
这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25- 在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21
详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22- 这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。...2017-06-24
使用Maven 搭建 Spring MVC 本地部署Tomcat的详细教程
这篇文章主要介绍了使用Maven 搭建 Spring MVC 本地部署Tomcat,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-16- 这篇文章主要介绍了angularjs中ng-bind-html的用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-05-27
asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22ASP.NET单选按钮控件RadioButton常用属性和方法介绍
RadioButton又称单选按钮，其在工具箱中的图标为 ，单选按钮通常成组出现，用于提供两个或多个互斥选项，即在一组单选钮中只能选择一个...2021-09-22- 这篇文章主要介绍了SpringMvc自动装箱及GET请求参数原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了SpringMvc获取请求头请求体消息过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-17
ASP.NET 2.0中的数据操作:使用两个DropDownList过滤的主/从报表
在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有...2016-05-19Springmvc ResponseBody响应json数据实现过程
这篇文章主要介绍了Springmvc ResponseBody响应json数据实现过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-26- 这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容，实用性非常，感兴趣的朋友参考下吧...2016-05-06