jQuery Mobile + MVC 3 + Request.Path

Posted 2023-05-09

【中文标题】jQuery Mobile + MVC 3 + Request.Path

【英文标题】：

【发布时间】：2011-07-15 20:56:46

【问题描述】：

我正在尝试使用 jQuery Mobile + MVC 3 来运行一个新的移动站点。其中一项要求是安装 Google Analytics 并正确跟踪页面浏览量。我像往常一样插入了 GA 代码，但它似乎只跟踪主页而没有跟踪其他网站页面。经过一番审查，看来我需要将 GA javascript 代码分成两个单独的块。所以，在元素中，我有这个：

<script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'xx-xxxxxx-x']);
        (function () 
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        )();
  </script>

然后，就在结束标记之前，我有这个：

<script type="text/javascript">
    $('[data-role=page]').live('pageshow', function (event, ui) 
        try 
            _gaq.push(['_trackPageview', '@Model.RequestPath']);
         catch (err)  
    );
</script>

问题： @Model.RequestPath 总是返回“/”。我已经通过调试器看到该属性填充了适当的路径（即/somedirectory/somepage”），但是当它到达视图时，它只是得到一个“/”。

重要信息：

Model.RequestPath 配置为返回 Request.Url.AbsolutePath 的当前值。

更改内部页面的操作方法以将 RequestPath 属性设置为常量无效。就像它使用视图模型来填充页面（页面按预期呈现）但是 RequestPath 属性似乎在某个时候被修改了。我很困惑调试器如何显示它填充了正确的路径，但是当它到达视图时输出“/”。

我有两个页面：index.cshtml 是主页，也是提供的第一个页面。其余的内部页面使用 SiteMaster.cshtml。它们都有相同的 GA 代码。

当我加载页面时，调试器会针对我的请求执行控制器操作（如我所料），并且模型会填充正确的路径（但视图仍会输出“/”）。

当我在 FireFox 中执行“查看源代码”时，调试器会再次触发，但这次它会触发我主页的控制器操作。

我将 SiteMaster.cshtml 上的 GA 代码更改为调用“trackPageview1”，并将 index.cshtml 上的 GA 代码更改为调用“trackPageview2”，以便在查看源代码时可以看到正在调用的源代码。它总是 trackPageview2，这意味着它总是从 index.html 中提取，即使我在使用 SiteMaster.cshtml 布局文件的页面上。这将有助于解释为什么 RequestPath 总是“/”，但我仍然不明白为什么它不从主布局文件输出标记。

我很肯定这与 jQuery Mobile 以及它通过 AJAX 促进页面请求的方式有关，但我一直试图弄清楚这一点。在我继续自己研究的同时，我想我会发帖看看这里是否有人可以提供帮助。

如果有必要，我会在收到答案或找到更多信息时用更多细节来澄清这篇文章。

【问题讨论】：

尝试使用@Request.Url.AbsoluteUri 而不是@Model.RequestPath，看看渲染到页面的 URL 是否有任何不同。

我刚刚编辑了我的帖子，因为我意识到我忘了提到 Model.RequestPath 被配置为返回 Request.Url.AbsolutePath。我尝试在视图中用 Request.Url.AbsolutePath 替换 Model.RequestPath 并遇到相同的行为。

看我的回答。我在想你遇到了脚本冲突。您只需将 GA 代码放在布局页面上即可。

另外，试试@Request.Url.AbsoluteUri 而不是@Request.Url.AbsolutePath。

AbsoluteUri 只是输出协议和域名，而不是相对路径。所以不是所有页面上的“/”，而是所有页面上的“site.com”。

【参考方案1】：

这是我使用的代码。 （很像尼古拉斯）

如果它在 windows.location 中找到一个哈希 (#)，它会解析出哈希后的路径。 示例：http://www.mysite.com/about/#/contact, url='/contact'

如果哈希值不存在，例如第一次加载页面时，它会使用 windows.location.pathname 代替 示例：http://www.mysite.com/about, url='/about'

<script type="text/javascript">
$('[data-role=page]').live('pageshow', function(event, ui) 
    var url = window.location.toString();
    var hashLocation = url.indexOf("#");
    if (hashLocation != -1) 
        url = url.substring(hashLocation + 1);
    
    else 
        url = window.location.pathname.toString();
    

    try 
        var pageTracker = _gat._getTracker("UA-XXXXXXX-XX");    
        pageTracker._trackPageview(url);
     catch (err)  
);           
</script> 

【参考方案2】：

您应该能够将 Google Analytics（分析）代码直接放到主控器中，而无需进行任何修改。您是否有理由将代码放在从母版继承的页面上？ GA 将跟踪加载的不同页面，您只需将代码放在布局页面上即可。

【讨论】：

这就是我们最初所做的。它没有用。它只跟踪主页。我正在尝试的解决方法是基于这篇文章：blog.ertesvag.no/post/3586027043/…。 Google Analytics 与 jQuery Mobile 的工作方式略有不同。

嗯，很有趣。我以前从未听说过这个问题。我不记得 jQuery Mobile 曾经弄乱我的 GA 代码：/

【参考方案3】：

如何将 location.href 与此 Using Google Analytics with jQuery Mobile blog 条目中的代码结合使用：

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>


<script type="text/javascript">
    $('[data-role=page]').live('pageshow', function (event, ui) 
        try 
            var pageTracker = _gat._getTracker("YOUR_GA_ID");
            pageTracker._trackPageview(location.href.replace('#', ''));
         catch(err) 

        
    );
</script>

【讨论】：

看起来不错。您可以考虑从整个 href 中删除 # 并将其发送到跟踪器，因为它是请求的页面名称。

@naugtur - 更改为 location.href.replace('#', '')