ASP.NET MVC における AJAX による部分更新と既定のエラーページ : @jsakamoto

2012年 12月 05日

ASP.NET MVC における AJAX による部分更新と既定のエラーページ

※本稿は「One ASP.NET Advent Calendar 2012」に向けての記事です。

ASP.NET による Web アプリ開発と、jQuery の $.load() などによるクライアント側スクリプトでの HTML コンテンツの部分更新の話である。

まぁ、昨今は knockout.js などを使ってブラウザ側でステートフルな実装するのかもしれないが、さておき。

具体例

もう少し具体的な例を出しておこう。
時刻表示が毎秒更新される "時計" Web アプリを例に出す。

ASP.NET MVC において、次のようなコントローラを実装。

public class ClockController : Controller

{

  public ActionResult Index()

  {

    return View();

  }



  public ActionResult Time()

  {

    return PartialView();

  }

}

主たるコンテンツとなる Index アクションのビューは以下のとおり。

<!DOCTYPE html>

<html>

<body>

  <div id="updatePane">

    @Html.Action("Time")

  </div>

  <script src="~/Scripts/jquery-1.7.1.min.js"></script>

  <script src="~/Scripts/clock.js"></script>

</body>

</html>

id=updatePanel の要素内にTimeアクションを実行した結果返される部分ビューの結果 - HTML 断片を、いったんサーバー側でもレンダリングしてある。

Timeアクションで返す部分ビューは以下のとおり。

<h1>@DateTime.Now</h1>

現在日時を h1 タグでくくった HTML 断片を返すだけである。

で、仕上げに、クライアント側スクリプトがこちら。

$(function () {

  $.ajaxSetup({ cache: false });

  setInterval(

    function () { $("#updatePane").load("/Clock/Time"); },

    1000);

});

1000ミリ秒=1秒ごとに $("#updatePane").load("/Clock/Time") が実行され、
Clock コントローラの Time アクションが返す "<h1>12/4/2012 10:50:45 PM</h1>" といった HTML 断片を、そのままid=updatePanel の要素内に
クライアント側コードで差し替えている。

ということで、以上の実装でこの Web アプリを実行すると、ブラウザ内に刻一刻と時刻が表示されるわけだ。 ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0211530.png

ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0211530.png

クライアント側でテンプレートにデータをバインディング、というのではなく、サーバー側で HTML 断片をレンダリングしてそれを AJAX 要求で取得して DOM 更新、という実装の例題である。

ところで。既定のエラーページって...

さてところで、この話のもうひとつのピースである、既定のエラーページ、について話しておきたい。

Visual Studio で ASP.NET MVC のプロジェクトテンプレートで開発を始めると、たいていの場合、MVC アクション処理中に例外が発生した場合のエラーページの設定が仕込まれている。

もう少し具体的にいうと、HandleErrorAttribute 属性が設定されているはずだ。

その結果、HTTP 要求の処理中になにか例外が発生してしまった場合、~/Views/Shared/Error.cshtml の内容がレンダリングされてブラウザに返される仕掛け。 ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_021940.png

ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_021940.png

でも HandleErrorAttribute は中途半端?

しかし、HandleErrorAttribute がカバーしているのは、MVCアクションの処理に関してだけだ。

たとえば、T4MVCを使わなかったせいか、アクション名やコントローラ名の誤記によるハイパーリンクを作りこんでしまい、そのリンクを開いた場合などは、IIS のエラー表示になってしまう。 ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_021194.png

ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_021194.png

古典的 web.config の customErrors セクションで指定

なので結局自分の場合は、HandleErrorAttribute の指定は削除してしまい、代わりに、web.config の system.web - customErrors セクションに
defaultReditect="sorry.html" などと指定して、sorry.html 静的 HTML でエラー発生を知らせるようにしている。 ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0205466.png

ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0205466.png

これなら先のような HTTP 404 Not Found になる場合でも、自分が作成した
sorry.html エラーページが表示されるようになる。 ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0204713.png

AJAX呼出の結果がエラーになったらどうなるか?

さて、以上の仕掛けを施したうえで、先のアプリの例で、Time アクションでなにか例外が発生したらどうなるだろうか?

実は、sorry.html の内容が、id=updatePanel 要素内に埋め込まれてしまうのだ。

というのも、customErrors セクションでエラーページを指定した場合、AJAX 通信であろうとなんであろうと、要求 -> 例外発生 -> 302 Redirect Location =
sorry.html -> 200 OK という流れでエラーページ "sorry.html" の内容が返されるからだ。

すなわち、$.load 実行側からしたら、処理成功で返ってきた HTML 断片なのか、例外発生によって返されたエラーページのHTML コンテンツなのか、いずれも HTTP ステータスは 200 OK なので区別がつかないのである。

ちなみに、先に "使わない" とした HandleErrorAttribute 属性によるエラーページの表示の場合は、HTTP ステータスは 500 Server Error になるため、クライアント側スクリプトにて、処理成功なのかエラーなのかの区別がつく。

だからといって、HandleErrorAttribute 属性方式と customErrors
defaultRedirect 方式とを併用し、エラーページを二重管理するのもどうかと思う。

さて、どうしたものか?

RealHTTPStatusCostomErrorModule

こんな場合にお試しいただきたいのが拙作 RealHTTPStatusCostomErrorModule というモジュールだ。

何はともあれ、次の手順で組み込むことができる。

1. RealHTTPStatusCostomErrorModule を Web アプリにインストールする

RealHTTPStatusCostomErrorModule は NuGetパッケージとして公開してある。

http://nuget.org/packages/RealHTTPStatusCustomErrorModule

なので、Visual Studio 上の NuGet Package Manager GUI ないしは Package Manager Console から、プロジェクトに容易に追加可能だ。

PM> Install-Package RealHTTPStatusCustomErrorModule

2. エラーページ表示の方式を、応答書き換えに変更する

web.config の customErrors セクション - defaultRediect によるエラーページの表示は、既定ではリダイレクトによってエラーページの表示を行う。
これを改め、customErrors セクションの redirectMode 属性に明示的に設定を
ResponseRewrite に指定して、エラーページの HTML コンテンツで応答を差し替えるようにする。 ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0203916.png

ASP.NET MVC における AJAX による部分更新と既定のエラーページ_d0079457_0203916.png

以上、2ステップで、customErrors セクション指定によるエラーページ表示の際、HTTP ステータスが 200 になることはなくなり、適切に 500 Server Error などがクライアント側に返されるようになる。

RealHTTPStatusCustomErrorModule の内部で何が行われているか本稿では割愛するが、もしご興味がおありなら、ソースコードは GitHub で公開しているので、そちらを参照されるとよいと思う。

https://github.com/jsakamoto/RealHTTPStatusCostomErrorModule

まとめ

以上、ASP.NET MVC と AJAX による部分更新、そしてエラーページ表示の組み合わせに関するトラブルと、その解消方法の紹介である。

そもそも、サーバー側でレンダリングした HTML 断片を AJAX で要求して DOM要素を差し替える実装を選ぶかどうかでも意見が分かれそうだ。

また、エラーページの表示についても、HandleErrorAttribute 属性によるハンドリングで十分と考える向きもあろうかと思う。

しかしながら、この二者を選択した場合は、今回この投稿で紹介した技法がお役に立てば幸いである。

ちなみに、自分の知っている範疇では、エラーページと HTTP ステータスのハンドリングについては @takepara さんのブログ記事なども大変参考になる。

お楽しみはこれからだ！- HandleErrorの使い方
http://takepara.blogspot.jp/2009/05/handleerror.html

2009年当時の記事で、Razor 構文もまだなかった頃であるが、それでも今でも大変勉強になる。
どうぞご参考まで。

by developer-adjust | 2012-12-05 00:33 | .NET | Comments(1)

Commented at 2022-05-09 13:38 x

ブログの持ち主だけに見える非公開コメントです。

<< 愛用の Visual Stud...

PowerShell で Git >>


	ファン申請 ※ メッセージを入力してください

@jsakamoto