2016-06-24 2 views
0

거대한 면도기 웹 사이트에 건물을 짓고 있습니다. 다시 건축 할 수 없습니다. AngularJs를 클라이언트 측에서 사용할 필요가 있습니다. 페이지가로드 될 때 페이지가 렌더링되기 전에 완료해야하는 서버 측 미리 준비가 약간 있습니다.면도기 및 AngularJs로 쿼리 문자열에 액세스

URL 쿼리 문자열을 통해 매개 변수를 C#에 전달해야하며 JavaScript 측에서 동일한 매개 변수가 필요합니다. 나는이 URL을 사용하는 경우 현재 :

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

내가 자바 스크립트 측에서 그 값을 얻을 수 있습니다,하지만 서버 측에서

var queryString = HttpContext.Current.Request.QueryString;

를 호출 할 때, 비어 있습니다. 나는이 URL을 사용하는 경우 또한 :

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

나는 서버 측에서 쿼리 문자열에 액세스 할 수 있습니다,하지만 난 계속 내 각도 컨트롤러에 코드를 다시 실행 된 것처럼 다음 자바 스크립트, 견과류 간다. 나는 크롬 콘솔이 얻을 :

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/.

그리고 최대 호출 스택의 크기에 도달했다고 밝혔다 결국 오류가 발생했습니다. 해당 각도 컨트롤러에 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와 응용 프로그램을, 마찬가지로 어떤 또한 자체 라우팅을 관리합니다.

저는 Razor에 비교적 익숙하지 만 AngularJs에 익숙합니다. .NET이 라우팅을 관리하는 방식 때문에 문제의 일부가 될 수 있다고 생각합니다. Angular가이를 수행하는 방법을 망칠 수 있습니다. 나는 thisthis에 대한 답변을 알고 있지만 MVC 앱에 적용됩니다. MVC 앱의 경우 광산은 .cshtml 페이지가 많고 Controller 또는 API 페이지가 많은 웹 사이트입니다.

AngularJs 라우팅을 "예쁜"URL로 유지하면서 Angular와 Razor C# 둘 다에서 쿼리 문자열에 액세스 할 수 있습니까?

답변

0

나는 해결책을 찾아 냈다. 나는 미래에 사람들이이 문제를 가지고 있거나, 그것이 나쁜 대답이고 사람들이 그것을 고칠 수 있다면 그것을 게시 할 것입니다.

내 질문에서 두 URL의 주요 차이점은 조각 식별자 (?) 인 #의 위치라는 것을 알았습니다. 나는 그것에 대해 읽었습니다 here,하지만 그 페이지는 거의 20 세입니다주의 할 수 있습니다. 어쨌든 URL의 조각 부분이 서버로 보내지지 않는다는 것을 알았습니다. 그 이유는 # 이후에 쿼리 문자열 서버 측을 구문 분석 할 수 없었기 때문입니다. 질문이 # 이전 일 때 JavaScript가 왜 놀랄지는 모르겠지만 내 코드에 문제가 있다고 생각합니다.

해결 방법은 #의 양쪽에서 쿼리 문자열을 전달하는 것이 었습니다.

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

왼쪽에있는 쿼리 문자열은 C 번호가 액세스 할 수있는, 그리고 오른쪽에 하나 AngularJS와가 액세스 할 수있는 것입니다 : 따라서, 작업 URL은 다음과 같습니다. 또한 # 이후의 모든 항목은 일반적인 AngularJs 라우팅과 유사하므로 관련성이 있다고 생각하지 않습니다.

+0

URL에서 데이터를 가져 오는 중 JS 코드를 게시하면 누군가가 도움을 줄 수 있습니다. –