Use asp.net MVC partial view to render HTML

Time:2021-7-13

In order to improve the user experience, we generally 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 the template of undercore.js or the angular.js framework. Of course, you can splice HTML without any framework.

<!DOCTYPE html>
<html>
  <head>
    Template rendering HTML of < title > underscore.js
  </head>
<body>

<div></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>

Render Back-End

If you are using asp.net MVC, you can use part of the view, and load the server-side rendered part of the view directly by Ajax. Please visit mygithub


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

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

The front end sends Ajax request to rendernews directly


$.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. Sometimes we need to return the error code to the front-end, such as {“code”: 10000, “message”: “success”, “data”: “< p > AAAAA < / P >”}. Therefore, we need to dynamically call the distribution view in the 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();
      }
   }
}

summary

Because the back-end rendering can use the asp.net MVC template engine syntax, it is better than the front-end rendering in maintainability and development efficiency. I personally prefer to use the back-end rendering, but because it needs to be passed to the browser HTML, the bandwidth consumption will be higher. This part of the loss can be solved by increasing the server bandwidth.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.