使用 Razor 和 AngularJs 访问查询字符串答案

【问题标题】：Accessing Query String with Razor and AngularJs使用 Razor 和 AngularJs 访问查询字符串
【发布时间】：2016-06-24 18:44:02
【问题描述】：

我正在构建一个庞大的 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 变得疯狂，就好像我在我的 Angular 控制器中不断地重新运行代码一样。我在 Chrome 控制台中得到了这个：

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>

init 方法（填充服务器上的一些数据文件夹，以便将它们提供给 Angular）使用查询字符串中的参数，AngularJs 应用程序也是如此，它也管理自己的路由。

我对 Razor 比较陌生，但我熟悉 AngularJs。我认为部分问题可能是因为 .NET 管理路由的方式，这可能会影响 Angular 的处理方式。我知道this 和this SO 答案，但它们适用于MVC 应用程序，我的只是一个有很多.cshtml 页面的网站，没有Controllers 或APIs。

有没有办法在 Angular 和 Razor C# 中访问查询字符串，同时使用“漂亮”的 URL 维护 AngularJs 路由？

【问题讨论】：

标签： c# angularjs razor url-routing query-string

【解决方案1】：

好的，我想出了一个解决方案。如果将来人们有这个问题，或者如果这是一个错误的答案并且人们可以解决它，我会发布它。

我意识到我的问题中两个 URL 之间的主要区别是 # 的位置，这是一个片段标识符 (?)。我读过它here，但我可以提醒一下，该页面已经有将近 20 年的历史了。无论如何，我发现 URL 的片段部分没有被发送到服务器，这就是为什么我无法解析在 # 之后的查询字符串服务器端的原因。我不知道为什么当查询在 # 之前时 JavaScript 会发疯，但我愿意相信这是我的代码有问题。

解决方案是在# 的两侧传递查询字符串。因此，工作 URL 如下所示：

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

左边的查询字符串是C#可以访问的，右边是AngularJs可以访问的。此外，# 之后的任何内容都像普通的 AngularJs 路由一样工作，所以我认为这没有关系。

【讨论】：

如果您将 JS 代码发布到您试图从 URL 获取数据的位置，那么有人可能会提供帮助。