Windows Azure のウェブサイ上で電力使用状況の表示アプリを動かしてみましたが、表示に使うデータ CSV を電力会社のサイトからダウンロードしてデータを取り出す(直前のダウンロード時間から3分以上経過していたとき)という仕組みに加えて、共有サイトなためか予想以上にページ表示自体に時間がかかることから、一覧表を表示するトップ画面は固定部分のみをすぐに返して、一覧表部分は Ajax で非同期表示するように変更しました。
やり方としては、
- ページが表示された際に、非同期通信でサーバから部分ビューを取得する。
- 部分ビューを取得したら、DOM ツリーに用意している表示用の要素を置き換える。
ことで行なっています。
ASP.NET MVC 3 での実装例は次のような感じになります。
コントローラー
//
public ActionResult WithAjax()
{
return View();
}
public ActionResult AjaxDisplayDate()
{
if (Request.IsAjaxRequest()) // 非同期通信か
{
System.Threading.Thread.Sleep(2000);
var date = DateTime.Now;
return PartialView("_DisplayDate", date);
}
else
{
return new EmptyResult();
}
}
ビュー(WithAjax.cshtml)
コメント化しているのは、非同期通信で取得したデータを確認するため Alert です。
target クラスが指定された p タグを置き換えます。
@{
ViewBag.Title = "WithAjax";
}
@section scripts {
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
$.get("/Home/AjaxDisplayDate", function (data) {
//alert("Data Loaded: " + data);
$("p.target").html(data);
});
});
//-->
</script>
}
<h2>WithAjax</h2>
<p>このビューで表示: @DateTime.Now.ToString()</p>
<h3>Ajax</h3>
<p class="target">データ読み込み中</p>
部分ビュー(_DisplayDate.cshtml)
@model System.DateTime
@Model.ToString()
<table>
<thead>
<tr>
<th>日付</th>
<th>時刻</th>
</tr>
</thead>
<tbody>
<tr>
<td>@string.Format("{0:yyyy/MM/dd}", Model)</td>
<td>@string.Format("{0:hh:mm:ss}", Model)</td>
</tr>
</tbody>
</table>
