2

私は、ページの1つに単一ページのアプリケーションを持つ単純な古いWebサイトを構築しています。ナビゲーション バーには、ホーム、概要、ブログなどの他のページがあり、私のアプリはダッシュボードにあります。

SPA オプションを検討した結果、Durandal を試すことにしました。Durandal が ASP.NET Web ページ サイトに最も適していると思われるからです。私はホット タオルケットを使用していますが、これは非常に優れたパッケージのようです。

Nuget パッケージをセットアップした後、index.cshtml を dashboard.cshtml に更新し、ナビゲーション バーに適切にリンクしました。ホームページからダッシュボードに移動すると、SPA が起動して正常に動作します。ただし、ダッシュボードからホーム ボタン (またはブログ、概要など) をクリックすると、ページは SPA の最初のビューに戻るだけです。

index.cshtml から変更した後の dashboard.cshtml を次に示します。私は、Nuget から出てきたホット タオルケットに他の変更を加えていません。

@using System.Web
@using System.Web.Optimization
@{
    Layout = "Layout/_Layout.cshtml"; //<--- My nav bar with my other links are in here
}
<div id="applicationHost">
    @RenderPage("_splash.cshtml")
</div>

@Scripts.Render("~/scripts/vendor")
@if (HttpContext.Current.IsDebuggingEnabled)
{
    <script type="text/javascript" src="App/durandal/amd/require.js" data-main="/App/main"></script>
}

else
{
    <!-- Remember to run the Durandal optimizer.exe to create the main-built.js  -->
    <script type="text/javascript" src="App/main-built.js"></script>
}

Q: すべてのページのルーティングを引き継がずに、通常の Web サイトに Durandal SPA ページをセットアップするにはどうすればよいですか?

編集 ここにナビゲーションセクションがあります：

//Original
<nav>
    <a href="/">Home</a> 
    <a href="aboutus">About Us</a>  
    <a href="blog">Blog</a>
</nav>

それらを次のように変更しても、違いはないようです。また、FriendlyUrls を使用しているにもかかわらず、.cshtml 拡張子を URL に強制します。

//Ineffective Changes
<nav>
    <a href="default.cshtml">Home</a> 
    <a href="aboutus.cshtml">About Us</a>  
    <a href="blog.cshtml">Blog</a>
</nav>
4

5 に答える 5

0

navbar のリンクに関連する html を提供していません。これが問題の場所のようです。次の形式のリンクは、durandal ルーターをトリガーします。

<a href="#/dashboard">Dashboard</a>

次の形式のリンクは、ネイティブ ブラウザー ルーティングをトリガーします。

<a href="index.html">Index</a>

ASP.NET が Web ページ ソースをこのようにコンパイルしていることを確認できますか?

編集

もう 1 つのオプションは、JavaScript ナビゲーション API でクリック バインディングを使用することです。

<a href="#" data-bind="click: function() { location.assign('index.cshtml') }">Index</a>
于 2013-09-30T14:19:34.067 に答える
0

私が知っている唯一の解決策は、リンク内のURLを絶対にすることです。つまり、次のようになります。

<a href="http://www.MyGreatPage.html"></a>

しかし、それが常に可能であるとは限らないことを私は知っています。
私はいくつかのより良い解決策で戻ってくるようにします。

于 2013-09-30T07:56:37.580 に答える
0

他のオプションがうまくいかなかったため、最終的に私の解決策は Sammy.js に切り替えることでした。Sammy.js を既存のアプリケーションにほぼゼロの労力でドロップすることができ、Web サイトの他の部分と競合することはありませんでした。追加のボーナスとして、Sammy のルーティングはフル ナビゲーションをトリガーしません。つまり、フルスクリーン アプリケーションは、Sammy.js でナビゲートするときにフルスクリーンのままになります。

于 2013-10-16T18:16:13.100 に答える
0

おそらく、アーキテクチャを再考するのが最善でしょう:

オプション 1:作成する SPA ごとに全体のホット タオル プロジェクトを作成します。
オプション 2:逆に、サイト全体を SPA にすることも考えられます。
オプション3：あなたが言及したように、ホットタオルではなくデュランダルを使用してください. (SPAごとにプロジェクト全体を作成したくない場合)

オプション 4: "HotTowelRouteConfig.cs" を見てください。そのファイルには、デフォルトのコントローラーとアクションが参照されています。デフォルトルートの前に「spa」を付けるだけで、結果は次のようになります。

Durandal: domain/spa/#/
(他のルートを妨げない)

オプション 5: コントローラー("HotTowelRouteConfig.cs" で名前が付けられている)を見ると、そのコントローラーにいくつかの特定のアクションを追加できます。

オプション 6: プレフィックス付きのフォルダーなどを使用して、まったく新しいルート構成を作成します。(オプション 4 の逆)

デュランダル: domain/#/
カスタム ルート: domain/pages/aboutus.cshtml

お役に立てれば。

于 2013-10-16T16:36:16.163 に答える