コントローラー アクションから戻ると、MVC3 はいくつかの特別な処理を行います。コントローラーから部分ビューの結果 ( ) を返す場合return PartialView();
、「フル ビュー」を参照できます。剃刀エンジンはそのビューのレイアウト ファイルを無視し、コンテンツ部分のみを返します。あなたの場合、リクエストがAJAXリクエストであるかどうかを確認できます。それに基づいて、要求された URL の部分的なビューの完全なビューを返します。MVC3 のデフォルトの「インターネット サイト」テンプレートで、2 つのファイルのみを変更して、これを試すことができます。
まず、ホーム/インデックス ビュー:
@{
ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
@Html.ActionLink("This is AJAXy", "About", "Home", null, new{@class="ajax"})
</p>
<div id="AjaxContent"></div>
<script type="text/javascript">
$(document).ready(function () {
$(".ajax").click(function (e) {
e.preventDefault();
alert("clicked");
$.ajax({
url: this.href,
dataType: 'html',
success: function (data) {
$('#AjaxContent').html(data);
alert('Load was performed.');
}
});
});
});
</script>
Home/About アクションへのリンクを AJAX 処理しています。デフォルト テンプレートでは、テスト用に上隅のデフォルト テンプレート ナビゲーション セクションに完全なリクエスト リンクがまだあります。
次にホームコントローラー
System.Web.Mvc を使用します。
namespace MvcApplication6.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
if(Request.IsAjaxRequest())
{
return this.PartialView();
}
return View();
}
}
}
ここで、デフォルトのプロジェクト テンプレートから変更されたのはこれら 2 つの点だけで、メイン ナビゲーションの About リンクをクリックすると、ページ タイトル、すべてのヘッド情報などを含む完全な About ページの完全な要求と表示が行われます。ただし、ホーム/インデックス ビューの ajax リンクは、その情報に対して AJAX 要求を実行します。AjaxReponse div には About ビューの HTML のみが取り込まれ、他の要素 (レイアウトなど) は表示されないことがわかります。
このような実装は SEO に役立つだけでなく、JavaScript を使用していない人でもサイトを完全に機能させることができます。
編集
上記の例では、(少なくとも私のテストでは) .load 関数を使用できません。理由: .load は X-Requested-With ヘッダーを設定して、それが AJAX 要求であることを識別していません。確かに回避策はありますが、それがあなたが使用していたものであることに気づき、このルートを選択した場合、つまずく可能性があると考えました.