简体   繁体   English

使用jQuery和ASP.NET MVC来回更改网页?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM