asp.net mvc 部分ビューを使用した HTML のレンダリングに関するチュートリアルの例
- 零下一度オリジナル
- 2017-07-09 11:52:412493ブラウズ
ユーザーエクスペリエンスを向上させるために、通常、データをロードし、そのデータに基づいて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: 'john', 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: '/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);
}
});このメソッドを使用すると、バックエンドはレンダリングされたHTMLをフロントエンドに直接出力する必要がある場合があります。 、{"code": 10000,"message":"success","data":"e388a4556c0f65e1904146cc1a846beeaaaaa94b3e26ee717c64999d7867364b1b4a3"} など、レンダリング結果は次のとおりです。
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 サイトの他の関連記事を参照してください。