suchen

Heim >Backend-Entwicklung >C#.Net-Tutorial >Beispiel-Tutorial zum Rendern von HTML mit der Teilansicht von asp.net mvc

Beispiel-Tutorial zum Rendern von HTML mit der Teilansicht von asp.net mvc

零下一度
零下一度Original
2017-07-09 11:52:412557Durchsuche

Um die Benutzererfahrung zu verbessern, verwenden wir im Allgemeinen Ajax zum Laden von Daten und rendern dann HTML basierend auf den Daten. Interessierte können mehr darüber erfahren

Um die Benutzererfahrung zu verbessern, verwenden wir im Allgemeinen Ajax, um Daten zu laden und dann HTML basierend auf den Daten zu rendern. Zum Rendern von HTML können Front-End-Rendering und serverseitiges Rendering verwendet werden.

Front-End-Rendering

Verwenden Sie eine Front-End-Template-Engine oder ein MVC-Framework, z. B. die Vorlage underscore.js, oder verwenden Sie ein Framework wie z natürlich als angle.js Sie können HTML auch selbst ohne Framework spleißen. 


<!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: &#39;john&#39;, age: "18" }
  var compiled = _.template("<p>姓名: <%= name %></p><p>年龄: <%= age %></p>");
  $("#content").append(compiled(data));
</script>
</body>

</html>

Back-End-Rendering

Wenn Sie asp.net verwenden mvc kann eine Teilansicht verwenden und die von Ajax auf der Serverseite gerenderte Teilansicht direkt laden. Den vollständigen Code dieses Teils finden Sie auf meinem Github. 


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

 public ActionResult RenderNews(int pageIndex = 1, int pageSize = 10)
 {
   return PartialView();
 }
Das Frontend sendet direkt eine Ajax-Anfrage an RenderNews


$.ajax({
 url: &#39;/Home/RenderNews?pageIndex=3&pageSize=10&#39;,
 type: "POST",
 beforeSend: function() {

 },
 complete: function() {

 },
 success: function(result) {
 if (result.trim() != "") {
   $("#containter").html(result);
 }
 },
 error: function(e) {
   console.log(e);
  }
});
Mit dieser Methode ist die Back-End-Direktausgabe. Manchmal müssen wir den Fehlercode an das Front-End zurückgeben, z. B. {"code":10000,"message": "success", "data": 01ffcd5d1a840d2341909ced6bafa76caaaaa94b3e26ee717c64999d7867364b1b4a3"} , daher müssen Sie die verteilte Ansicht im Controller dynamisch aufrufen, um das Rendering-Ergebnis zu erhalten. Der dynamische Aufrufcode lautet: 


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();
      }
   }
}

Zusammenfassung

Da das Back-End-Rendering die Syntax der asp.net MVC-Vorlagen-Engine verwenden kann, ist es hinsichtlich Wartbarkeit und Entwicklung besser als das Front-End-Rendering Ich persönlich tendiere auch dazu, Back-End-Rendering zu verwenden, aber aufgrund der Notwendigkeit, HTML an den Browser weiterzugeben, ist die Bandbreitennutzung hoch. Dieser Verlust kann durch Erhöhen der Serverbandbreite behoben werden.

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zum Rendern von HTML mit der Teilansicht von asp.net mvc. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung von Beispielen für die regelmäßige Aktualisierung der Benutzeroberfläche in WPFNächster Artikel：Detaillierte Erläuterung von Beispielen für die regelmäßige Aktualisierung der Benutzeroberfläche in WPF

In Verbindung stehende Artikel

Mehr sehen