ASP.NET MVC を使用して、「シングル ページ インターフェイス」を備えた Web アプリケーションを構築したいと考えています。
これが少なくとも可能であるかどうかを検索しましたが、答えは次のとおりだと思います。単純な手段によるものではありません(http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2最後の2番目の段落を読む;その記事ただし、2008 年 5 月から)。
jQueryでコーディング/ハッキングすることでこれを実装した他の例を見つけました。ただし、可能であれば、標準の .NET アプローチを使用して、クリーンなソリューションを探しています。
私が欲しいのは、新しい「MVC Web アプリケーション」を作成するときとまったく同じ機能です。ただし、ページ全体をリロードする「/Home/About」へのリンクではなく、AJAX 経由で新しい部分のみをロードする「 # Home/About」へのリンクが必要です。
Html.RenderPartial を使用してテンプレート (部分ビュー) を呼び出す標準的なアプローチは、まさに私が望むものであり、AJAX 要求を介してそれらをロードするだけです。
もちろん、何らかの理由でマスターページによってレンダリングされるこれらのテンプレートを使用できない可能性があります (おそらく、特定の場所から特定のコンテキストで常に呼び出されることを期待している可能性があります)。しかし、テンプレート ページを作成してマスター ページから取得する方法については、別の明確な解決策があるかもしれません。
そのようなことを実装するための優れたソリューション、Single Page Interface を誰が持っていますか?
PS: MVC 1.0 がインストールされた Visual Web Developer 2008 Express Edition を C# で開発しています。
[編集] 以下では、テンプレートの操作は可能であり、jQuery は確かに避けられないように見えるので、テストしました。次のコードは、Html.ActionLink によって作成された通常のリンクをアンカー リンク (# 付き) に変換して履歴を含め、AJAX 経由でページを取得し、関心のある html 部分 (つまり、div# 内の部分ページ) のみを挿入します。部分ビュー):
$("a").each(function() {
$(this).click(function() {
$("div#partialView").load($(this).attr("href") + " div#partialView");
location.hash = $(this).attr("href");
return false;
});
});
これらのリンクは、グレースフル デグレッションも可能にします。
しかし、私が今残しているのは、部分的なページだけではなく、ページ全体を取得することです。コントローラーを変更しても役に立ちませんでした。それでも、これらすべてのステートメントを含む、ページ全体の html が提供されました。
public ActionResult About()
{
return View();
return View("About");
return PartialView();
return PartialView("About");
}
関心のある部分のコンテンツ (つまり、Home/About.aspx のコンテンツ) のみを返すにはどうすればよいですか? 私が望むのは、AJAX (例: "requesttype=ajax") で値を POST して、ページが AJAX 経由で取得され、部分的なページのみが返されることをコントローラーが認識できるようにすることです。そうしないと、ページ全体が返されます (つまり、#Home/About ではなく /Home/About にアクセスした場合)。
部分的なページのみを返す AJAX 呼び出し用の新しいルーティング スキーマを作成するために、Global.asax.cs を変更することをお勧めしますか? (まだそこまで詳しく調べていません。)
[編集 2]
Robert Koritnik は正しかった: 私は、そのページの小さな HTML コンテンツのみを含む About.ascx ページ (UserControl) も必要でした。MasterPageFile="~/..../Site.master"
About.aspx の最初の行は、すべての HTML が印刷される原因となったマスター ページにリンクされていました。
しかし、私のコントローラーで以下を実行できるようにするには:
public ActionResult About()
{
return Request.IsAjaxRequest() ? (ActionResult)PartialView() : View();
}
PartialView
(.ascx ファイル) とView
(.aspx) ファイルが見つかる方法を変更する必要がありました。そうしないと、両方のメソッドが同じページを返します ( About.aspx
、最終的に無限ループになります)。以下を に入れると、Global.asax.cs
と で正しいページが返されPartialView()
ますView()
。
protected void Application_Start()
{
foreach (WebFormViewEngine engine in ViewEngines.Engines.Where(c => c is WebFormViewEngine))
{
/* Normal search order:
new string[] { "~/Views/{1}/{0}.aspx",
"~/Views/{1}/{0}.ascx",
"~/Views/Shared/{0}.aspx"
"~/Views/Shared/{0}.ascx"
};
*/
// PartialViews match with .ascx files
engine.PartialViewLocationFormats = new string[] { "~/Views/{1}/{0}.ascx", "~/Views/Shared/{0}.ascx" };
// Views match with .aspx files
engine.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.aspx", "~/Views/Shared/{0}.aspx" };
}
RegisterRoutes(RouteTable.Routes);
}