Of Stack

Explanation of rendering html using asp. net mvc partial view

  • 2021-10-11 18:00:41
  • OfStack

In order to improve the user experience, we usually use ajax to load data and then render html according to the data. Rendering html can use front-end rendering and server-side rendering.

Front-end rendering

Use the front-end template engine or MVC framework, such as template of underscore. js, or use angular. js, etc. Of course, you can splice html without any framework. 


<!DOCTYPE html>
<html>
  <head>
    <title>underscore.js Adj. template Render 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 : <%= name %></p><p> Age : <%= age %></p>");
  $("#content").append(compiled(data));
</script>
</body>

</html>

Back-end rendering

If you are using asp. net, mvc can use partial view, and ajax directly loads the rendered partial view on the server side. Please visit my github for the whole code of this part. 


 public ActionResult News()
  {
    return View();
  }

 public ActionResult RenderNews(int pageIndex = 1, int pageSize = 10)
 {
   return PartialView();
 }

The front end directly sends ajax request 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);
  }
});

In this way, the back end directly outputs the rendered html, and sometimes we need to return the error code to the front end, such as {"code": 10000, "message": "Success", "data": " < p > aaaaa < /p > "}, so you need to dynamically call the distributed view in controller to get the rendering result. The dynamic call code is: 


public abstract class BaseController : Controller
 {
   /// <summary>
   ///  Dynamic rendering distribution view 
   /// </summary>
   /// <param name="viewName"> View name </param>
   /// <param name="model"> Model </param>
   /// <returns> Rendered 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();
      }
   }
}

Summarize

Because back-end rendering can use asp. net mvc template engine syntax, it is better than front-end rendering in maintainability and development efficiency. Personally, I also prefer to use back-end rendering, but because it needs to be passed to browser html, the bandwidth occupation will be high, and this loss can be solved by increasing server bandwidth.

Related articles: