To enhance the user experience , Generally we use ajax Load the data and then render based on the data html, Rendering html You can use front-end rendering and server-side rendering .

Front end rendering

Use the front-end template engine or MVC frame , for example underscore.js Of template Or use angular.js Other framework , Of course, you can also splice without any frame html.

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

Render Back-End

If used asp.net mvc You can use partial views , from ajax Directly load the server-side rendered part of the view , Please visit my github.

 public ActionResult News()
{
return View();
} public ActionResult RenderNews(int pageIndex = , int pageSize = )
{
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 outputs directly after rendering html, Sometimes we need to return to the front-end error code , for example {“code”:10000,"message":" success ","data":"<p>aaaaa</p>"}, So it needs to be in controller Call the distribution view dynamically in , Get the rendering results , The dynamic call code is :

public abstract class BaseController : Controller
{
/// <summary>
/// Dynamically render the distribution view
/// </summary>
/// <param name="viewName"> View name </param>
/// <param name="model"> Model </param>
/// <returns> After rendering 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 asp.net mvc Template engine Syntax , So it is better than the front-end rendering in maintainability and development efficiency , I personally prefer to use back-end rendering , But because it needs to be passed to the browser html, So bandwidth usage will be higher , This part of the loss can be solved by increasing the server bandwidth .

Use asp.net mvc Partial view rendering html More articles about

  1. Asp.net MVC Razor View template dynamic rendering PDF,Razor Template generation static Html

    Asp.net MVC Razor View template dynamic rendering PDF,Razor Template generation static Html 1. Preface In the last article, I opened the wheel ,Asp.net Core 3.1 Razor View template dynamic rendering PDF, then , very ...

  2. asp.net mvc Part of the view loading differences

    ASP.NET MVC Partial view   ASP.NET(11)  Copyright notice : This article is an original blog article , No reprint without the permission of the blogger . [ Partial view ] ASP.NET MVC Part of the view in , amount to Web Form Inside ...

  3. ASP.NET MVC 5 - View

    In this section , You're going to modify HelloWorldController class , Use the view template file , In the clean packaging process : Client browser generation HTML. You will create a view template file , It uses ASP.NET MVC 3 the ...

  4. [ turn ]ASP.NET MVC 5 - View

    In this section , You're going to modify HelloWorldController class , Use the view template file , In the clean packaging process : Client browser generation HTML. You will create a view template file , It uses ASP.NET MVC 3 the ...

  5. ASP.NET MVC Partial view ( turn )

    [ Partial view ] ASP.NET MVC Part of the view in , amount to Web Form Inside User Control. Our pages tend to have a lot of reuse , Encapsulation reuse can be done . Use Partial view :  1. It can be abbreviated as ...

  6. ASP.NET MVC Programming —— View

    1Razon grammar Use @ The symbol is followed by C# or VB.NET How statements work . The basic rule 1) Variable @ After that, the direct variable can be 2) Code block Use expressions or multiple lines of code for ,@ Followed by curly braces to include multiple lines of code in curly braces 3)"+&qu ...

  7. How to be in FineUIMvc(ASP.NET MVC) Binding multiple models in a view ?

    cause This is put forward by a netizen on the knowledge planet , Logically speaking ASP.NET MVC Only one model can be bound to a view in (Model), At the top of the view, mark as follows : @model IEnumerable<FineUICore.Ex ...

  8. ASP.NET MVC Use RenderSection Rendering node

    I don't have time to do it for a few days ASP.NET mvc practice , be busy with ERP Secondary development . Busy inside , Think of MVC There is still a lot of basic knowledge to hold and understand . I remember practicing before <MVC master page _Layout.cshtml> http: ...

  9. ASP.NET MVC Partial view

    [ Partial view ] ASP.NET MVC Part of the view in , amount to Web Form Inside User Control. Our pages tend to have a lot of reuse , Encapsulation reuse can be done . Use Partial view :  1. It can be abbreviated as ...

Random recommendation

  1. VisualSFM for Structure from Motion

    VisualSFM yes Changchang Wu The use of writing Structure from Motion (SfM) Conduct 3D The reconstructed interface , See details http://homes.cs.washington ...

  2. Ext.Net Learning notes 11:Ext.Net GridPanel Usage of

    Ext.Net Learning notes 11:Ext.Net GridPanel Usage of GridPanel It's a table for displaying data , And ASP.NET Medium GridView similar . GridPanel usage Look directly at the code : < ...

  3. CSS Summary of relevant knowledge

    1 What is? CSS? CSS Full name (Cascading Style Sheets) It's a language that specifies how documents are presented to users . 2 Why use CSS? CSS I want to separate the content of the document information from the details of how to present it , The document details are ...

  4. About Oracle Database character set selection

    If the database is only used in China , Database character set selection ZHS16GBK Or common Chinese character set , If not sure , It is recommended to use AL32UTF8 The national character set selects : AL16UTF16 Once the character set is set , No modification allowed , Modifications may occur ...

  5. intent flags Mark

    Intent Flag Introduce FLAG_ACTIVITY_BROUGHT_TO_FRONT  This flag is not usually set by program code , If in launchMode Set in singleTask The system helps you set the mode . F ...

  6. placeholder yes H5 A new property of , But in IE9 The following is not supported

    $(function() { // If not placeholder, use jQuery To complete if(!isSupportPlaceholder()) { // Traverse all of input object , Except for the password box $( ...

  7. springboot Integrate druid Connection pool 、mybatis Realize dynamic switching of multiple data sources

    demo Environmental Science : JDK 1.8 ,Spring boot 1.5.14 One Integrate durid 1. add to druid Connection pool maven rely on <dependency> <groupId> ...

  8. Event Event bubble and event capture

    <!doctype html> <html lang="en"> <head> <meta charset="gb2312&qu ...

  9. oracle Error report summary

    1.ORA-00904 Normally, the field is not found ( Maybe the field name is wrong ) There is also a more special situation DB When , Field lowercase , stay sql When the query tool prompts automatically, it is always uppercase , Causes the field not to be found .

  10. VMware Virtual machine snapshot 、 clone 、 Disk expansion

    1. snapshot A snapshot is a mirror image of a complete system at a point in time in a virtual machine , It can restore the system to the previous node through snapshot file inside the virtual machine . take snapshot : Restore the snapshot : 2. clone A clone is a copy of the full state of the original virtual machine , It is independent from the original virtual machine ...