为了提升用户体验，一般我们采用AJAX加载数据然后根据数据渲染HTML，渲染HTML可以使用前端渲染和服务器端渲染。
前端渲染
使用前端模版引擎或MVC框架，例如underscore.Js的template或者是使用angular.Js等框架，当然也可以不用任何框架自己拼接HTML。
<!DOCTYPE HTML><HTML> <head> <Title>underscore.Js的template渲染HTML</Title> </head><body><p ID="content"></p><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的实例教程全部内容，希望文章能够帮你解决用asp.net mvc部分视图渲染html的实例教程所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）