0

I am building onto a massive Razor website, which I cannot re-architect. I need to use AngularJs on the client side, and when the page is loaded there is a little bit of server side preprossessing that needs to be done before the page is rendered.

I need to pass a parameter to C# via the URL query string, and I need that same parameter on the JavaScript side. Currently, if I use this URL:

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

I can get that value on the JavaScript side, but when I call

var queryString = HttpContext.Current.Request.QueryString;

on the server side, it's empty. Additionally, if I use this URL:

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

I can access the query string on the server side, but then JavaScript goes nuts, as though I was continuously rerunning the code in my Angular controller. I get this in the Chrome console:

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

And eventually an error that says the Maximum call stack size has been reached. If I put a console.log() in that Angular controller, it logs continuously until the call stack max size is reached.

This is my razorPage.cshtml:

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

   InitProvider.Init();
}

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

The init method (which populates some data folders on the server so they can be served to Angular) uses parameters from the query string, as does the AngularJs app, which also manages its own routing.

I'm relatively new to Razor, but I am familiar with AngularJs. I think part of the problem could be because of the way .NET manages routing, which could be messing with how Angular can do it. I am aware of this and this SO answers, but they apply to an MVC app, where mine is just a website with a lot of .cshtml pages, no Controllers or APIs.

Is there a way to access query strings in both Angular and Razor C#, while maintaining AngularJs routing with "pretty" URLs?

Community
  • 1
  • 1
ms5991
  • 201
  • 2
  • 9

1 Answers1

0

Ok I figured out a solution. I'll post it if people in the future have this problem, or if it's a bad answer and people can fix it.

I realized that the main difference between the two URLs in my question was the location of the #, which is a fragment identifier (?). I read about it here, but I could caution that that page is almost 20 years old. Anyway, I found that the fragment part of the URL does NOT get sent to the server, which is why I couldn't parse the query string server side when it was after the #. I don't know why JavaScript was freaking out when the query was before the #, but I'm willing to believe it was a problem with my code.

The solution was to pass the query string on both sides of the #. Thus, the working URL looks like this:

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

The query string to the left is what the C# can access, and the one on the right is what AngularJs can access. Additionally, anything after the # works like normal AngularJs routing, so I don't think that was related.

ms5991
  • 201
  • 2
  • 9