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

来源:爱站网时间:2020-06-12编辑:网友分享
为了提高用户体验,我们通常使用ajax加载数据,然后根据数据呈现HTML,而呈现的HTML可以使用前端呈现和服务器端呈现,现在爱站技术频道小编就为大家带来详解使用asp.net mvc部分视图渲染html。

为了提高用户体验,我们通常使用ajax加载数据,然后根据数据呈现HTML,而呈现的HTML可以使用前端呈现和服务器端呈现,现在爱站技术频道小编就为大家带来详解使用asp.net mvc部分视图渲染html。

前端渲染

使用前端模版引擎或MVC框架,例如underscore.js的template或者是使用angular.js等框架,当然也可以不用任何框架自己拼接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":"

aaaaa

"},所以就需要在controller中动态调用分布视图,拿到渲染结果,动态调用代码为:

 

public abstract class BaseController : Controller
 {
   /// 
/// 动态渲染分布视图 ///

///视图名称 ///模型 /// 渲染后的html 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 Web Api实现图片点击式图片验证码功能

下一篇:ASP.NET MVC API 接口验证的示例代码

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载