2016-06-24 5 views
0

私は大規模なRazor Webサイトを構築していますが、再構築はできません。 AngularJsをクライアント側で使用する必要があります。ページがロードされると、ページがレンダリングされる前に、サーバー側のプリプロセッサ処理が少し行われます。RazorとAngularJsを使用したクエリ文字列へのアクセス

URL照会文字列を使用してC#にパラメータを渡す必要があり、JavaScript側で同じパラメータが必要です。現在、私はこのURLを使用する場合、:

http://localhost:32289/razorPage.cshtml#/?param="1234"

を私には、JavaScript側でその値を得ることができますが、私は、サーバー側の

var queryString = HttpContext.Current.Request.QueryString;

を呼び出すとき、それは空です。私はこのURLを使用する場合はさらに、:

http://localhost:32289/razorPage.cshtml/?param="1234"#/

は、私は、サーバー側でクエリ文字列にアクセスすることができますが、私は継続的に私の角度コントローラのコードを再実行してかのように、その後JavaScriptは、ナットを行きます。私はクロームコンソールでこれを取得:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

、最終的に最大コールスタックのサイズに達したというエラー。そのAngularコントローラにconsole.log()を置くと、コールスタックの最大サイズに達するまで連続的に記録されます。

これは私のrazorPage.cshtmlです:

@{ 
    Page.Title = "OCE Visualizer"; 
    Page.IsDetailedView = false; 
    Page.IsCapacity = false; 
    Page.IsEmbedded = false; 

    InitProvider.Init(); 
} 

<html> 
<!--...AngularJs App lives in here--> 
</html> 

AngularJsアプリがするように(彼らは角度に提供できるように、サーバー上の一部のデータフォルダーを移入)initメソッドは、クエリ文字列からパラメータを使用して、独自のルーティングも管理します。

私はRazorには比較的新しいですが、私はAngularJsについてよく知っています。私は問題の一部が、.NETがルーティングを管理する方法が原因である可能性があると考えています。私はthisthisのSOの答えを知っていますが、私は.cshtmlページがたくさんある、ちょうどControllerまたはAPIのページを持つMVCアプリケーションに適用します。

「きれいな」URLでAngularJsのルーティングを維持しながら、AngularとRazor C#の両方でクエリ文字列にアクセスする方法はありますか?

答えて

0

私は解決策を見つけました。将来の人にこの問題がある場合、またはそれが悪い回答であり、人々がそれを修正できる場合、私はそれを投稿します。

問題の2つのURLの主な違いは、フラグメント識別子(?)である#の場所であることに気付きました。私はそれについてhereを読んだが、私はそのページがほぼ20歳であることに注意することができた。とにかく、URLのフラグメント部分がサーバーに送信されないことがわかりました。そのため、#の後にクエリ文字列サーバー側を解析できませんでした。私は#の前にクエリがあったときにJavaScriptが怖がっているのかどうか分かりませんが、私のコードで問題があったと思っています。

解決策は、#の両側でクエリ文字列を渡すことでした。このように、作業のURLは次のようになります。

http://localhost:32289/razorPage.cshtml?param="1234"#/?param="1234"

左にクエリ文字列は、C#がアクセスできるもので、右側はAngularJsがアクセスできるものです。さらに、#以降のものは、通常のAngularJsルーティングのように機能するので、私はそれが関連していたとは思わない。

+0

URLからデータを取得しようとしている場所にJSコードを投稿すると、誰かを助けることができます。 –

関連する問題