検索
ホームページバックエンド開発C#.Net チュートリアルasp.net mvc 部分ビューを使用した HTML のレンダリングに関するチュートリアルの例

ユーザーエクスペリエンスを向上させるために、通常、データをロードし、そのデータに基づいてHTMLをレンダリングするためにフロントエンドレンダリングとサーバーサイドレンダリングを使用します。興味のある方は、詳細をご覧ください

。ユーザー エクスペリエンスを向上させるために、通常は Ajax を使用してデータを読み込み、データに基づいて HTML をレンダリングします。HTML のレンダリングでは、フロントエンド レンダリングとサーバー側レンダリングを使用できます。

フロントエンドレンダリング

Underscore.jsテンプレートなどのフロントエンドテンプレートエンジンまたはMVCフレームワークを使用するか、angular.jsなどのフレームワークを使用せずに自分でHTMLを結合することもできます。あらゆるフレームワーク。


<!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>

バックエンドレンダリング

asp.netmvcを使用している場合、viewの一部を使用でき、サーバーサイドレンダリング後の部分ビューは直接ロードされます。この部分の完全なコードについては、私の github を参照してください。


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

 public ActionResult RenderNews(int pageIndex = 1, int pageSize = 10)
 {
   return PartialView();
 }

フロントエンドはAjaxリクエストを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);
  }
});

このメソッドを使用すると、バックエンドはレンダリングされたHTMLをフロントエンドに直接出力する必要がある場合があります。 、{"code": 10000,"message":"success","data":"

aaaaa

"} など、レンダリング結果は次のとおりです。


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

概要

バックエンド レンダリングは asp.net mvc テンプレート エンジン構文を使用できるため、保守性と点でフロントエンド レンダリングよりも優れています。私も個人的にはバックエンドレンダリングを使用する傾向がありますが、HTML をブラウザに渡す必要があるため、帯域幅の使用量が多くなります。この損失はサーバーの帯域幅を増やすことで解決できます。

以上がasp.net mvc 部分ビューを使用した HTML のレンダリングに関するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Web、デスクトップ、モバイル開発用のC#.NETWeb、デスクトップ、モバイル開発用のC#.NETApr 25, 2025 am 12:01 AM

C#と.NETは、Web、デスクトップ、モバイル開発に適しています。 1)Web開発では、ASP.Netcoreがクロスプラットフォーム開発をサポートしています。 2)デスクトップ開発では、さまざまなニーズに適したWPFとWINFORMSを使用します。 3)モバイル開発は、Xamarinを介したクロスプラットフォームアプリケーションを実現します。

C#.NETエコシステム:フレームワーク、ライブラリ、およびツールC#.NETエコシステム:フレームワーク、ライブラリ、およびツールApr 24, 2025 am 12:02 AM

C#.NETエコシステムは、開発者がアプリケーションを効率的に構築できるようにするための豊富なフレームワークとライブラリを提供します。 1.ASP.NETCOREは、高性能Webアプリケーションの構築に使用されます。2.EntityFrameWorkCoreは、データベース操作に使用されます。これらのツールの使用とベストプラクティスを理解することにより、開発者はアプリケーションの品質とパフォーマンスを向上させることができます。

azure/awsへのc#.netアプリケーションの展開:ステップバイステップガイドazure/awsへのc#.netアプリケーションの展開:ステップバイステップガイドApr 23, 2025 am 12:06 AM

c#.netアプリをAzureまたはAWSに展開する方法は?答えは、AzureAppServiceとAwselasticBeanStalkを使用することです。 1。Azureでは、AzureAppServiceとAzurePipelinesを使用して展開を自動化します。 2。AWSでは、Amazon ElasticBeanstalkとAwslambdaを使用して、展開とサーバーレス計算を実装します。

C#.NET:強力なプログラミング言語の紹介C#.NET:強力なプログラミング言語の紹介Apr 22, 2025 am 12:04 AM

C#と.NETの組み合わせにより、開発者に強力なプログラミング環境を提供します。 1)C#は、多型と非同期プログラミングをサポートします。2).NETは、クロスプラットフォーム機能と同時処理メカニズムを提供し、デスクトップ、Web、モバイルアプリケーション開発で広く使用されています。

.NETフレームワーク対C#:用語のデコード.NETフレームワーク対C#:用語のデコードApr 21, 2025 am 12:05 AM

.NetFrameworkはソフトウェアフレームワークであり、C#はプログラミング言語です。 1..netframeworkは、デスクトップ、Web、モバイルアプリケーションの開発をサポートするライブラリとサービスを提供します。 2.C#は.NetFrameWork用に設計されており、最新のプログラミング機能をサポートしています。 3..NetFrameworkはCLRを介してコード実行を管理し、C#コードはILにコンパイルされ、CLRによって実行されます。 4. .NetFrameWorkを使用してアプリケーションをすばやく開発し、C#はLINQなどの高度な関数を提供します。 5.一般的なエラーには、タイプ変換と非同期プログラミングデッドロックが含まれます。 VisualStudioツールは、デバッグに必要です。

C#.NETの分解:初心者の概要C#.NETの分解:初心者の概要Apr 20, 2025 am 12:11 AM

C#は、Microsoftが開発した最新のオブジェクト指向プログラミング言語であり、.NETはMicrosoftが提供する開発フレームワークです。 C#は、CのパフォーマンスとJavaのシンプルさを組み合わせており、さまざまなアプリケーションの構築に適しています。 .NETフレームワークは、複数の言語をサポートし、ガベージコレクションメカニズムを提供し、メモリ管理を簡素化します。

C#と.NETランタイム:それらがどのように連携するかC#と.NETランタイム:それらがどのように連携するかApr 19, 2025 am 12:04 AM

C#と.NETランタイムは密接に連携して、開発者に効率的で強力なプラットフォームの開発機能に力を与えます。 1)C#は、.NETフレームワークとシームレスに統合するように設計されたタイプセーフおよびオブジェクト指向のプログラミング言語です。 2).NETランタイムは、C#コードの実行を管理し、ガベージコレクション、タイプの安全性、その他のサービスを提供し、効率的でクロスプラットフォームの操作を保証します。

C#.NET開発:始めるための初心者向けガイドC#.NET開発:始めるための初心者向けガイドApr 18, 2025 am 12:17 AM

C#.NET開発を開始するには、次のことが必要です。1。C#の基本的な知識と.NETフレームワークのコア概念を理解する。 2。変数、データ型、制御構造、関数、クラスの基本概念をマスターします。 3。LINQや非同期プログラミングなど、C#の高度な機能を学習します。 4.一般的なエラーのためのデバッグテクニックとパフォーマンス最適化方法に精通してください。これらの手順を使用すると、C#.NETの世界に徐々に浸透し、効率的なアプリケーションを書き込むことができます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター