2

我有一个简单的 ASP.Net MVC 4 应用程序,专为移动使用而设计。该应用程序使用用于移动应用程序的内置 C# Visual Studio 模板,该模板带有表单身份验证以及用于处理登录的帐户视图和控制器。

该应用程序具有我自己创建的内置登录视图、主菜单和飞行视图。

我希望 CSS 类为“date”的所有 html 元素都是日期时间选择器,因此通过 JQuery UI,我在加载 Jquery 包后立即将以下 JavaScript 放入 Shared/_Layout.cshtml 视图中:

<script type="text/javascript">
            $(document).ready(function () {
                alert("test");
                $('.date').datepicker({ dateFormat: "dd/mm/yy" });

            });
</script>

当我登录应用程序并手动将浏览器中的 URL 更改为 Flight 视图时,该脚本完全符合我的需要,例如手动导航到http://localhost:63891/Flight

但是,当我从主菜单上的链接导航时,它永远不会运行脚本。在主菜单视图中,链接生成如下:

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("Flights", "Index", "Flight")</li>
</ul>

为了清楚起见,单击链接会按预期呈现视图,它只是不运行我的 JavaScript。我可以让脚本运行的唯一方法是手动输入 URL。

我尝试将脚本移动到实际的 Flight 视图中,但此时未加载 JQuery,因为它已加载到 Shared/_Llayout.cshtml 视图的脚本部分中。

当我悬停链接时,显示的 URL 为 localhost:63891/Flight,但当我实际单击 URL 时,URL 更改为 localhost:63891/#/Flight。我不确定这是为什么以及是否相关。

单击链接时如何让脚本运行?

编辑:我想我有这个问题,但没有人回答他/她的问题如何处理 ASP.net MVC Ajax 加载页面上的 jQuery 事件?

4

4 回答 4

2

如果移动站点使用 JQM,并且从评论中可以看出它确实使用了 JQM。尝试使用

$(document).bind('pageinit')

代替

$(document).ready()

更多关于那个

于 2013-05-29T11:29:46.530 回答
1

我已经接受了@Igarioshka 的回答,因为这将是这个问题的正常答案,并提供了有关您不打算在 Jquery 移动应用程序中使用 document.ready 的良好信息。

实际问题是我从 VS 中的 Mobile 模板创建了站点,该模板自动添加了 JQuery mobile。然后我继续开发,直到我需要一个日历弹出窗口。根据我在网上找到的内容,这需要 JQuery UI 和 JQuery(完整),所以我在 SHared/_layout.cshtml 视图中的现有 JQM 调用下添加了渲染调用。

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryui")

然后我添加了用于添加数据选择器的脚本。由于 JQuery Mobile 对@Igarioshka 详述的所有内容使用 AJAX,这不会触发。但是将我的脚本更改为$(document).bind('pageinit', function (event, data) {

仍然没有开火。这似乎是因为脚本是在完整的 JQuery 被加载之后。因此,在加载完整的 jquery 之前更改代码的顺序以使用 pageinit 事件可以解决它。

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
        <script type="text/javascript">
            $(document).bind('pageinit', function (event, data) {
                $('.date').datepicker({ dateformat: "dd/mm/yy" });
            });
        </script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

这对我来说意味着 pageinit 事件是特定于 JQuery Mobile 的,并且在完整的 JQuery 中不可用,这在尝试学习跨平台 Web 开发的统一方法时是一种耻辱。

我不确定这是否意味着我应该摆脱 JQuery Mobile,因为我最终使用了完整的,或者它是否仍然有用,因为它具有优化等。

于 2013-05-29T13:53:15.080 回答
0

听起来更像是部分加载了“飞行”页面(例如通过 ajax)。

在查找 XHR 请求之前,您可以查看单击“Flight”链接时 URL 是否正在更改,如果没有更改,则表示您的“Flight”页面已部分加载,反之则为 false(可能在 AJAX 中加载内容并更改 URL)。

然后,您可以使用开发人员工具(例如 Chrome)查找 XHR 请求。按 F12(或右键单击“检查元素”)并查看控制台上是否有 XHR 请求。 Chrome 网络开发者工具上的 XHR 请求

验证是否启用了“Log XMLHttpRequests”选项(在设置上)。 设置

记录 XMLHttpRequests 选项

于 2013-05-29T10:39:58.637 回答
0

尝试一个简单的标签。也许它有效:

<a href = "~/Flight/">Flights</a>
于 2013-05-29T10:24:16.770 回答