[英]Change webpage back and forth using jQuery and ASP.NET MVC?
It is an ASP.NET MVC web application for which I wish to display content of two different websites after a delay of 30 seconds. 这是一个ASP.NET MVC Web应用程序,我希望在延迟30秒后显示两个不同网站的内容。 The two websites are properly displayed given their respective URLs.
根据各自的URL,可以正确显示两个网站。 Now, only remains to swap the two pages after the given delay .
现在, 只剩下在给定的延迟之后交换两个页面 。
HomeController HomeController的
public class HomeController : Controller {
public HomeController(SomeViewModel viewModel, Uri otherWebsiteUri) {
this.otherWebsiteUrl = otherWebsiteUrl;
this.viewModel = viewModel;
}
public ActionResult Index() {
return View(viewModel);
}
public ActionResult OtherWebsite() {
return View(otherWebsiteUrl);
}
private Uri otherWebsiteUri;
private SomeViewModel viewModel;
}
Index.cshtml Index.cshtml
@model MyProject.ViewModels.SomeViewModel
@section header {
<!-- Header content here... -->
}
<div>
<!-- Page content here... -->
</div>
<script type="text/javascript">
$( document ).ready( function() {
var displayWebsiteContent = function ( url ) {
$.get(url, $( body ).html(data));
};
var milliseconds = 30000;
var rootUrl = window.location.protocol + "//" + window.location.hostname;
var currentUrl = window.location.pathname;
var otherWebsiteUrl = rootUrl + "/Home/OtherWebsite";
$( "body" ).delay( milliseconds ).queue( function() {
if ( currentUrl.toLowerCase().indexOf( "other" ))
displayWebsiteContent(rootUrl);
else
displayWebsiteContent(otherWebsiteUrl);
});
});
</script>
OtherWebsite.cshtml OtherWebsite.cshtml
@model System.Uri
<iframe src="@Html.DisplayForm(m => m.AbsoluteUri)"
width="98%"
height="1000px"
frameborder="0"
scrolling="no">
</iframe>
So far, I have come across these related SO Q/A: 到目前为止,我遇到了以下相关的SO Q / A:
I thought that I had to put the jQuery delay script inside the Index.cshtml as this is the first page being loaded, and that I do not which the timer to execute when outside of these two pages/controller methods. 我以为我必须将jQuery延迟脚本放入Index.cshtml中,因为这是正在加载的第一页,并且我不希望在这两个页面/控制器方法之外执行哪个计时器。
Any hints and tips on how to make it? 关于如何制作的任何提示和技巧?
EDIT Following Chris Pratt 's recommendation
编辑 按照克里斯·普拉特的建议
I have opted for a single script per page which redirects to each page. 我选择了每页一个脚本来重定向到每个页面。
Index.cshtml Index.cshtml
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var displayWebsiteContent = function ( url ) {
$.get(url, $( body ).html( data ));
};
var milliseconds = 30000;
var rootUrl = window.location.protocol + "//" + window.location.hostname;
var otherWebsiteUrl = rootUrl + "/Home/OtherWebsite";
$( "body" ).delay( milliseconds ).queue( function() {
displayWebsiteContent( otherWebsiteUrl );
});
});
</script>
OtherWebsite.cshtml OtherWebsite.cshtml
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var displayWebsiteContent = function ( url ) {
$.get(url, $( body ).html( data ));
};
var milliseconds = 30000;
var rootUrl = window.location.protocol + "//" + window.location.hostname;
$( "body" ).delay( milliseconds ).queue( function() {
displayWebsiteContent( rootUrl );
});
});
</script>
Notice that I have blindly tried to add the <script src="jquery-1.7.1.min.js">
and the behaviour changed from Microsoft runtime error: '$' is undefined
to an almost working piece of code. 请注意,我盲目地尝试添加
<script src="jquery-1.7.1.min.js">
,并将行为从Microsoft runtime error: '$' is undefined
更改为Microsoft runtime error: '$' is undefined
为几乎有效的代码。
Only now, an exception or the like is thrown stating that data
is not declared, which I can partially understand. 直到现在,抛出异常或类似情况,说明未声明
data
,我可以部分理解。 So I have also tried the following while doing the get request. 因此,我在执行get请求时也尝试了以下方法。
var displayWebsiteContent = function ( url ) {
$.get( url
, function ( data ) {
$( body ).html( data );
});
};
And this does nothing. 这什么也没做。
To make it clear, I wish to be able to perform this: 为了清楚起见,我希望能够执行以下操作:
Index() (wait 30 seconds)
OtherWebsite() (wait 30 seconds)
Index() (wait 30 seconds)
OtherWebsite() (wait 30 seconds)
...
EDIT After further diggings, following Chris Pratt's hints about having a script on each single page the swapping is applicable to.
编辑 经过进一步的挖掘,遵循克里斯·普拉特(Chris Pratt)的提示,即在交换的每个页面上都有脚本。
Solution 解
Further diggings conducted me to find this solution which was the missing masterpiece to my chef-d'oeuvre. 进一步的挖掘使我找到了这个解决方案,这是我的厨师作品缺少的杰作。 =P
= P
MVC Redirect to View from jQuery with parameters MVC使用参数从jQuery重定向到View
The key to the masterpiece is window.location.href
over the $.get()
method. 杰作的关键是
$.get()
方法上的window.location.href
。
Index.cshtml Index.cshtml
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var displayWebsiteContent = function ( url ) {
window.location.href = url;
};
var milliseconds = 30000;
var rootUrl = window.location.protocol
+ "//"
+ window.location.host;
$( "body" ).delay( milliseconds ).queue( function() {
displayWebsiteContent( rootUrl );
});
});
</script>
OtherWebsite OtherWebsite
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var displayWebsiteContent = function ( url ) {
window.location.href = url;
};
var milliseconds = 30000;
var rootUrl = window.location.protocol
+ "//"
+ window.location.hostname;
$( "body" ).delay( milliseconds ).queue( function() {
displayWebsiteContent( rootUrl );
});
});
</script>
Et voilà ! 等等!
The JavaScript on page is only good for that page. 页面上的JavaScript仅适用于该页面。 You can't write JavaScript that applies to the actual browser tab/window or something outside of creating a browser extension.
您无法编写适用于实际浏览器标签/窗口或创建浏览器扩展之外的内容的JavaScript。 So, you can either add code to each page that redirects you to the other, or pretty much your only other option is to use a frameset or iframe, such that you can have some global JavaScript that cycles the frame/iframe URL without having to actually move off the main loaded page in the browser tab/window.
因此,您可以向每个页面添加代码以将您重定向到另一个页面,或者几乎唯一的选择是使用框架集或iframe,这样您就可以使用一些全局JavaScript来循环框架/ iframe URL,而无需实际上会从浏览器标签/窗口中的主加载页面中移出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.