3

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);
}
4

5 に答える 5

1

さて、AJAX リクエストを介して部分ビューを読み込むことができます。たとえば、jquery を使用して ajax 呼び出しを行います。

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

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

返された html を必要な場所に配置するための JQuery ajax 呼び出し:

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();
    }
于 2009-10-15T17:39:06.067 に答える
1

全体表示と部分表示

あなたは何かを台無しにしたようです。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ます。このようにして、クライアントからのリクエストは同じままになります (したがって、ユーザーが手動で間違ったものをリクエストするのを防ぎます) が、リクエストの種類によっては、正しいコントローラー アクションが実行されます。

于 2009-10-16T16:32:01.363 に答える
0

まさにこれを行うサイトがあります。あなたは本当にここで jQuery ルートを使用したいと考えています。長い目で見れば、はるかに簡単に実装できます。また、Google のように、javascript を有効にしていないユーザーのために、簡単に適切に機能を低下させることができます。

于 2009-10-15T17:32:13.613 に答える
0

あなたが何を求めているのかはそれほど明確ではありません.それは完全な例のためですか、それとも特定の機能のためですか? 単純なシナリオでは、JQuery を使用せずにこれを実行できるはずです。ActionLink メソッドのような Ajax ビュー ヘルパーを使用できます。また、RenderPartial の何が問題なのかよくわかりませんが、ASP.NET MVC Futures の RenderAction のようなものを探しているかもしれません。

于 2009-10-15T17:39:34.720 に答える
0

ASP.NET MVC 4 (現在はベータ版) では、MVC でのシングル ページ アプリケーションのサポートが追加されています。

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

更新: ...そして、MVC 4 RC から削除されました

更新: ...そして、2012 年の秋の更新で戻ってきました

于 2012-02-22T20:10:26.520 に答える