Example tutorial for rendering HTML with the ASP. NET MVC partial view

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.