MVC 5：通過Ajax加載內容區域並修改瀏覽器url

在我的_Layout.cshtml頁面中，我在頁面左側有少量鏈接，頁面右側有一個主要內容區域，點擊鏈接時只有內容區域應該更新。我不想重新加載整個頁面。MVC 5：通過Ajax加載內容區域並修改瀏覽器url

我想在我的_Layout.cshtml頁

這裏加載使用Ajax

所以部分觀點是鏈接：

<a href="#" onclick="return link_click()">Click here</a>

內容區DIV

<div class="page-content"> 
      @RenderBody() 
      @RenderSection("Scripts", false) 
</div>

然後通過Ajax調用加載內容區域

function link_click() { 

     $('.page-content').load('/Home/Register); 
     return false; 
    }

從MVC控制器：我只是返回部分視圖。

我的問題：

這種方法工作得很好，但問題是該網址瀏覽器保持不變。我需要根據內容頁面修改瀏覽器網址，以便用戶可以爲頁面添加書籤並使用後退/前進瀏覽器按鈕查看歷史記錄。瀏覽器Url如何獲得修改？
我做了一些關於谷歌的研究，並找到jQuery插件Pjax和Pajax使用HTML5 pushstate技術和Ajax，但我不確定哪一個更好的解決方案（Pjax或PAjax）？演示Pjax和Pajax的例子也相當過時。任何最新的技術/模式要實現以上？
我不想避免使用像AngularJS，Knockout等SPA框架，因爲使用這些框架需要在我的公司進行多次批准，我想避免這種情況。

對此的任何幫助或建議是非常感謝。

感謝，

來源

2014-09-24 Pinal Dave

如果你想你的觀點而變化的網址，你可以使用window.history.pushState()功能。

使用該功能是以下幾點：

window.history.pushState(
    { state: 'someState' }, // any object, that can be retrieved 
    'Page title', // new page title 
    '/Home/Register' // new url 
);

您可以使用此這樣：

function link_click() { 

     $('.page-content').load('/Home/Register', function() { 
      window.history.pushState(
       null, 
       'Page title', // new page title 
       '/Home/Register' // new url 
      ) 
     }); 

     return false; 
    }

這將導致一個新的狀態將被推入堆棧中。它允許用戶通過單擊返回按鈕返回到上一頁。但這是你自己需要處理的，即加載前一個視圖。推新頁到堆棧中時

window.onpopstate = function(event) { 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
};

State對象是一樣的，你定義：要做到這一點，你需要設置一個處理程序，它會被調用，當用戶返回。

如果您不想將新頁面推入backstack，可以使用window.history.replaceState替換它。

來源

2014-09-24 12:26:46

您的解決方案完全適合我......這正是我一直在尋找的。感謝您的幫助:) – 2014-09-24 14:39:18

您能否請標記爲已解決？ – 2014-09-24 15:59:39

There是一個簡單的jQuery插件。

只需將其包含在您的頁面上即可。

修改您的鏈接：

<a href="#link">Click here</a>

而且在腳本塊開始監聽地址變更：

$.address.change(function (event) { 
    //it works perfect for url with complex hash like this: http://....#?departmentid=10&employeeid=15 
    if(location.hash == '#link') 
    { 
     $('.page-content').load("@Url.Action("Register","Home")"); 
    } 
}

功能接收包含下列屬性的單個事件對象參數：value，path，pathNames，parameterNames， parameters和queryString。

還有更多的解決方案，如角，骨幹等，但你寫你有問題，所以它只是jQuery。

來源

2014-09-24 14:46:58 aleha

MVC 5：通過Ajax加載內容區域並修改瀏覽器url

回答

相關問題