Asp.NET MVC Jquery Mobile在页面更改上执行Javascript [英] Asp.NET MVC Jquery Mobile Execute Javascript on Page Change
问题描述
您好，专家，
我正在尝试编写我的第一个jquery移动Web应用程序，因此我将Asp.net MVC与jquery mobile一起使用.我的网站上有多个视图.当我在页面之间切换时，我需要执行一些JavaScript代码.我的问题是，仅当我重新加载页面(按F5)时才执行JavaScript代码.我猜这是某种Ajax问题.当我用"data-ajax = false"标记链接时，一切正常.我该怎么做才能保留Ajax并强制我的JavaScript在每个页面更改上执行?
这是我的代码:
布局页面:
Hi Experts,
i am trying to write my first jquery mobile web app, therefore i use Asp.net MVC with jquery mobile. I have multiple Views on my site. When i switch between pages I need that some JavaScript code is executed. My Problem is that the JavaScript code is only executed when i reload the page (press F5). I guess that it is some Kind of an Ajax Problem. When i mark my links with "data-ajax = false" everything works fine. What can i do to keep Ajax and force my JavaScript to be executed on each page Change?
Here is my code:
Layout Page:
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-position="fixed" data-theme="b" data-id="header" id="header">
@RenderSection("header", required: false)
</div>
<div data-role="content" data-id="content">
@RenderBody()
</div>
<div data-role="footer" data-position="fixed" data-id="footer" data-theme="b">
@RenderSection("footer", required: false)
</div>
</div>
@RenderSection("scripts", required: false)
</body>
第1页:
Page 1:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header {
<h3>Events</h3>
}
<p> page 1 Content </p>
@section footer {
<div data-role="navbar" data-iconpos="left">
<ul>
<li>@Html.ActionLink("Home", "Index", new { controller = "Event" }, new { data_icon = "star", id = "event", @class = "ui-btn-active ui-state-persist" })</li>
<li>@Html.ActionLink("Live", "Live", new { controller = "Event" }, new { data_icon = "star", id = "live" })</li>
</ul>
</div>
}
@section scripts {
<script type="text/javascript">
$(document).bind("pagechange", function () {
alert("page 1");
});
</script>
}
第2页:
Page 2:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header {
<h3>Details</h3>
}
<p> page 2 Content </p>
@section footer {
<div data-role="navbar" data-iconpos="left">
<ul>
<li>@Html.ActionLink("Home", "Index", new { controller = "Event" }, new { data_icon = "star", id = "event", @class = "ui-btn-active ui-state-persist" })</li>
<li>@Html.ActionLink("Live", "Live", new { controller = "Event" }, new { data_icon = "star", id = "live" })</li>
</ul>
</div>
}
@section scripts {
<script type="text/javascript">
$(document).bind("pagechange", function () {
alert("page 2");
});
</script>
}
这是一个指向我的应用程序的OneDrive链接，该链接演示了出了什么问题:
https://onedrive.live.com/redir?resid = D85581A4BD1697B7！7780& authkey =！ALXzIlL0yFPGPKI& ithint = file％2c.zip [
Here is a OneDrive link to my application that demonstrates what goes wrong:
https://onedrive.live.com/redir?resid=D85581A4BD1697B7!7780&authkey=!ALXzIlL0yFPGPKI&ithint=file%2c.zip[^]
Kind Regards Manu
推荐答案
(document).bind("pagechange"，function(){ alert(第1页"); }); </script> }
(document).bind("pagechange", function () { alert("page 1"); }); </script> }
第2页:
Page 2:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header {
<h3>Details</h3>
}
<p> page 2 Content </p>
@section footer {
<div data-role="navbar" data-iconpos="left">
<ul>
<li>@Html.ActionLink("Home", "Index", new { controller = "Event" }, new { data_icon = "star", id = "event", @class = "ui-btn-active ui-state-persist" })</li>
<li>@Html.ActionLink("Live", "Live", new { controller = "Event" }, new { data_icon = "star", id = "live" })</li>
</ul>
</div>
}
@section scripts {
<script type="text/javascript">(document).bind("pagechange", function () { alert("page 2"); }); </script> }
(document).bind("pagechange", function () { alert("page 2"); }); </script> }
这是一个指向我的应用程序的OneDrive链接，该链接演示了出了什么问题:
https://onedrive.live.com/redir?resid = D85581A4BD1697B7！7780& authkey =！ALXzIlL0yFPGPKI& ithint = file％2c.zip [
Here is a OneDrive link to my application that demonstrates what goes wrong:
https://onedrive.live.com/redir?resid=D85581A4BD1697B7!7780&authkey=!ALXzIlL0yFPGPKI&ithint=file%2c.zip[^]
Kind Regards Manu
你好，
请通过以下链接，它将为您提供每个事件的完整详细信息.
jQuery Mobile页面事件 [.
Hello,
Please go through the following link, it will give you complete details of each events.
jQuery Mobile Page Events[^]
You can use pageshow event it will execute or triggered on the "to" page, after the transition animation completes.
这篇关于Asp.NET MVC Jquery Mobile在页面更改上执行Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
