In order to improve the user experience, we typically use AJAX to load data and then render HTML based on data, rendering HTML can use front-end rendering and server-side rendering, interested to understand
To improve the user experience, we typically use AJAX to load data and render HTML based on data, rendering HTML with front-end rendering and server-side rendering.
Front-End rendering
Using a front-end template engine or an MVC framework, such as a underscore.js template or using a framework such as a angular.js, you can, of course, use HTML without any frame.
<! DOCTYPE html>
Back-End rendering
If you are using ASP. NET MVC can use a partial view, directly loaded by Ajax server-side rendered partial view, this part of the entire code please visit my github.
Public ActionResult News () { return View (); } public actionresult rendernews (int pageIndex = 1, int pageSize = { return Partialview ();}
The front-end directly sends Ajax requests 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:func tion (e) { console.log (e); }});
Using this method is the back end of the direct output is the rendered HTML, sometimes we need to return to the front-end error code, for example {"Code": 10000, "message": "Success", "Data": "<p>aaaaa</p>"}, So we need to call the distribution view dynamically in the controller, get the rendering result, the dynamic calling 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> html</returns> Public virtual string renderpartialviewtostring after rendering (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.FindPar Tialview (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 the ASP. NET MVC template engine syntax, the maintainability and development efficiency is better than the front-end rendering, I also prefer to use back-end rendering, but due to the need to pass to the browser HTML, so the bandwidth consumption will be high, this part of the loss can increase the server bandwidth resolution.