Home > Article > Backend Development > Example tutorial on rendering html with asp.net mvc partial view
Example tutorial on rendering html with asp.net mvc partial view
- 零下一度Original
- 2017-07-09 11:52:412523browse
In order to improve the user experience, generally we use ajax to load data and then render html based on the data. Front-end rendering and server-side rendering can be used to render html. Those who are interested can learn more
In order to improve the user experience, generally we Use ajax to load data and then render html based on the data. Front-end rendering and server-side rendering can be used to render html.
Front-end rendering
Use a front-end template engine or MVC framework, such as underscore.js template or use angular.js and other frameworks, of course You can also splice html yourself without any framework.
<!DOCTYPE html>
<html>
<head>
<title>underscore.js的template渲染html</title>
</head>
<body>
<p id="content"></p>
<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 %></p><p>年龄: <%= age %></p>");
$("#content").append(compiled(data));
</script>
</body>
</html>Back-end rendering
If you are using asp.net MVC can use partial views, and ajax can directly load partial views rendered on the server side. Please visit my github for the full 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 an ajax request to 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);
}
});Using this method, the back-end directly outputs rendering. In the final html, sometimes we need to return an error code to the front end, such as {"code":10000,"message":"success","data":"e388a4556c0f65e1904146cc1a846beeaaaaa94b3e26ee717c64999d7867364b1b4a3"}, so we need Dynamically call the distributed view in the controller to get the rendering result. The dynamic calling code is:
public abstract class BaseController : Controller
{
/// <summary>
/// 动态渲染分布视图
/// </summary>
/// <param name="viewName">视图名称</param>
/// <param name="model">模型</param>
/// <returns>渲染后的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 back-end rendering can use the asp.net mvc template engine syntax, it is better than front-end rendering in terms of maintainability and development efficiency. I personally also tend to use back-end rendering, but because it needs to be passed to the browser html, Therefore, the bandwidth usage will be high, and this loss can be solved by increasing the server bandwidth.
The above is the detailed content of Example tutorial on rendering html with asp.net mvc partial view. For more information, please follow other related articles on the PHP Chinese website!