使用jQuery和ASP.NET MVC來回更改網頁？

Question

這是一個ASP.NET MVC Web應用程序，我希望在延遲30秒后顯示兩個不同網站的內容。 根據各自的URL，可以正確顯示兩個網站。 現在， 只剩下在給定的延遲之后交換兩個頁面 。

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

@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

@model System.Uri

<iframe src="@Html.DisplayForm(m => m.AbsoluteUri)" 
        width="98%" 
        height="1000px" 
        frameborder="0" 
        scrolling="no">
</iframe>

到目前為止，我遇到了以下相關的SO Q / A：

• jQuery來回更改圖像
• 將AJAX通話延遲X秒
• jQuery Ajax無法調用MVC 4 Controller方法
• MVC Ajax調用控制器方法
• javascript函數之間的jQuery延遲
• 在功能運行之間產生延遲
• 動畫之間的jQuery延遲

我以為我必須將jQuery延遲腳本放入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

<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>    

請注意，我盲目地嘗試添加<script src="jquery-1.7.1.min.js"> ，並將行為從Microsoft runtime error: '$' is undefined更改為Microsoft runtime error: '$' is undefined為幾乎有效的代碼。

直到現在，拋出異常或類似情況，說明未聲明data ，我可以部分理解。 因此，我在執行get請求時也嘗試了以下方法。

var displayWebsiteContent = function ( url ) {
    $.get( url
        , function ( data ) {
              $( body ).html( data );
          });
};

這什么也沒做。

為了清楚起見，我希望能夠執行以下操作：

Index() (wait 30 seconds)
OtherWebsite() (wait 30 seconds)
Index() (wait 30 seconds)
OtherWebsite() (wait 30 seconds)
...

編輯 經過進一步的挖掘，遵循克里斯·普拉特（Chris Pratt）的提示，即在交換的每個頁面上都有腳本。

解

進一步的挖掘使我找到了這個解決方案，這是我的廚師作品缺少的傑作。 = P

MVC使用參數從jQuery重定向到View

傑作的關鍵是$.get()方法上的window.location.href 。

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

<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>    

等等！

Answer 1

頁面上的JavaScript僅適用於該頁面。 您無法編寫適用於實際瀏覽器標簽/窗口或創建瀏覽器擴展之外的內容的JavaScript。 因此，您可以向每個頁面添加代碼以將您重定向到另一個頁面，或者幾乎唯一的選擇是使用框架集或iframe，這樣您就可以使用一些全局JavaScript來循環框架/ iframe URL，而無需實際上會從瀏覽器標簽/窗口中的主加載頁面中移出。