ASP.NET MVCで単一のページインターフェイスをどのように構築しますか？

StackOverflow https://stackoverflow.com/questions/1573824

質問

ASP.NET MVCを使用して、「シングルページインターフェイス」を使用してWebApplicationを作成したいと考えています。

これが少なくとも可能であるかどうかを検索しました、そして、私は答えが単純な手段ではないと思います（読む http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#s2 2番目の段落。その記事は2008年5月からです）。

jQueryでコーディング/ハッキングすることでこれを実装した他の例を見つけました。ただし、可能であれば、標準の.NETアプローチを使用して、きれいなソリューションを探しています。

新しい「MVC Webアプリケーション」を作成する場合、私が望んでいるのはまったく同じ機能です。ただし、ページ全体をリロードする「/home/arbout」へのリンクの代わりに、リンクが必要です」#Home/About "Ajaxを介して新しい部分のみをロードします。

html.RenderPartialを使用したテンプレート（部分ビュー）を呼び出す標準的なアプローチは、まさに私が望むものであり、Ajax-Requestsを介してそれらをロードします。

もちろん、それは私が使えないかもしれません これらは 何らかの理由でマスターページによってレンダリングされるテンプレート（特定の場所などから特定のコンテキストで常に呼び出されることを期待しているかもしれません）。しかし、おそらく、テンプレートページを構築し、マスターページからそれらを取得する方法に関する別のクリーンソリューションがあるかもしれません。

そのようなものを実装するための素晴らしいソリューション、単一のページインターフェイスは誰ですか？

PS：MVC 1.0がインストールされているVisual Web Developer 2008 Express Editionで開発しています。

編集以下では、テンプレートを使用することが可能であり、jQueryが実際に避けられないように見えるので、テストしました。次のコードは、html.actionlinkによって作成された通常のリンクをアンカーリンク（＃）に変換して履歴を含み、Ajaxを介してページを取得し、興味のあるHTMLパートを注入するだけです（つまり、Div＃内の部分ページはpartialView）：

$("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」などの値を投稿することです。これにより、コントローラーがAjaxを介してページが取得され、部分ページのみが返されることがわかります。それ以外の場合は、ページ全体を返します（つまり、＃home/arboutの代わりに訪問/home/arbout）。

Global.asax.csを変更するのは良い習慣ですか、Ajax-Callsの新しいルーティングスキーマを作成することは、部分ページのみを返すだけですか？ （私はまだこれをあまり調べていません。）

edit2Robert Koritnikは正しかった：そのページの小さなHTMLコンテンツのみを備えたAbout.Ascxページ（USERCONTROL）も必要でした。 about.aspxの最初の行は、マスターページを介してリンクされていました MasterPageFile="~/..../Site.master" これにより、すべてのHTMLが印刷されました。

しかし、私のコントローラーで以下を実行できるようにするには：

public ActionResult About()
{
    return Request.IsAjaxRequest() ? (ActionResult)PartialView() : View();
}

方法を変更する必要がありました PartialView （.ASCXファイル）およびa 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);
}
役に立ちましたか？

解決

フルビューと部分ビュー

あなたは何かを台無しにしたようです。あなたが作成する場合 About.aspx ページ全体を表示するために必要なすべてのHTMLを備えたページ

return PartialView('About');

ビューはまだ書かれているすべてのHTMLを返します。

別のものを作成する必要があります About.ascx それは、ページ全体の一部であるヘッダーと他のものがないページ自体のコンテンツのみを持っています。

あなたの元のページ About.aspx コンテンツにこのようなものがあります（同じコンテンツを2回繰り返すことを避けないように）：

<%= Html.RenderPartial("About") %>

また、2つのコントローラーアクションを実行できます。通常のビューを返すものと部分的なビューを返すもの：

return View("About"); // returns About.aspx that holds the content of the About.ascx as well
return PartialView("About"); // only returns the partial About.ascx

Global.Asaxのルートについて

Ajax呼び出し用の個別のルートを書き込む代わりに、同様に機能するアクションフィルターを書きたいと思います AcceptVerbsAttribute アクションフィルター。これにより、クライアントからのリクエストは同じままになります（したがって、ユーザーが間違ったものを手動で要求することを妨げます）が、リクエストタイプに応じて、正しいコントローラーアクションが実行されます。

他のヒント

さて、Ajaxリクエストで部分的なビューをロードできます。たとえば、jQueryを使用してAjaxコールを行います。

これらは、コントローラー（HomeControllerという名前）でのアクションになる可能性があります。

public ActionResult About()
    {
        //Do some logic...
        //AboutView is the name of your partial view
        return View("AboutView");
    }

jquery ajaxコールは、あなたが望む整備されたHTMLを配置するためのコール：

var resultDiv = $('#contentDIV');

    $.ajax({
        type: "POST",
        url: "/Home/About",
        success: function(responseHTML) {
            resultDiv.replaceWith(responseHTML);
        }
    });

編集質問が更新されます

あなたが望むことを正確に行うことは可能です。最初のコントローラーアクションは部分的な見解を返すことができるので、私の「aboutView」は次のようなものだったかもしれません。 

<table>
<tr>
    <th>
        Column1Header
    </th>
    <th>
        Column2Header
    </th>
</tr>
<tr>
    <td>
    ...
    </td>
    <td>
    ...
    </td>
</tr>

そして、このHTMLは、JQuery Ajaxメソッドの成功ハンドラーに関するResponseHTMLでまさに何を持っているかです。

次に、リクエストがAJAXリクエストである場合、コントローラーアクションで区別できます。

public ActionResult About()
    {
        //partial AboutView is returned if request is ajax
        if (Request.IsAjaxRequest())
            return View("AboutView");
        else //else it will be the default view (page) for this action: "About"
            return View();
    }

まさにこれを行うサイトがあり、ここでjqueryルートを本当に使用したいと思います。長期的には簡単に実装できます。また、Googleのように、JavaScriptを有効にしていないユーザーのために、簡単に優雅に劣化させることができます。

それはあなたが何を求めているのかそれほど明確ではありません、それは完全な例のために、またはいくつかの特定の機能のためですか？簡単なシナリオのためにjQueryなしでこれを行うことができるはずです。ActionLinkメソッドのようなajaxビューヘルパーを使用できます。また、私はRenderPartialの問題が何であるかを本当に理解していませんが、ASP.NET MVC先物のRenderactionのようなものを探しているかもしれません。

ASP.NET MVC 4（現在はベータ版）は、MVCの単一ページアプリケーションのサポートを追加します。

http://www.asp.net/single-page-application

更新：...そして彼らはMVC 4 RCからそれを削除しました

更新：...そして2012年の秋の更新に戻ってきました

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top