MVC與Razor：如何刷新點擊部分頁面？

Question

該項目使用MVC3和Razor。我們有一個繁忙的頁面，數據通過WCF服務來自大型機數據庫，所以我們想要限制一次加載的內容。基本數據在加載頁面時加載，但是會有幾個div用於附加數據。我們使用@ Html.Partial（pagename）來渲染div中的部分頁面。 ViewModel的這部分最初將是空的，因此不會顯示數據。

我們希望用戶點擊進入一個控制器方法，調用另一個服務，並在視圖模型的更多數據的部分繼續進行。然後用數據刷新頁面的這一部分。

如何刷新用戶單擊的HTML.Partial（pagename）？我已經嘗試了一個Ajax調用適當的URL，但它不刷新顯示。

編輯：這裏是我的代碼，試圖利用從下面達林季米特洛夫的意見。

我的視圖模型：

namespace Project.ViewModel 
{ 
    public class AllData 
    { 
     public string Id { get; set; } 
     public BasicData Basics { get; set; } 
     public ContactInfo ContactPoints { get; set; } //mainframe data 
    } 
} 

主頁：

@model Project.ViewModel.AllData 

<script type="text/javascript"> 
    $(function() { 
     $('#loadFromMainFrame').click(function (e) { 
      var url = $(this).data(url); 
      $('#MainframeContents').load(url); 
     }); 
    }); 
</script> 

<div id="basics"> 
    <div> 
     @Html.DisplayFor(model => model.Basics.FirstName) 
    </div> 

    <div> 
     @Html.DisplayFor(model => model.Basics.LastName) 
    </div>  
</div> 

<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button> 
<div id="MainframeContents"> 
    <p>Contact Info will go here</p> 
</div> 

控制器：

public ActionResult Details(string id) 
    { 
     BasicData basicdata = new BasicData(); 
     basicdata.FirstName = "Arya"; 
     basicdata.LastName = "Stark"; 
     AllData allData = new AllData(); 
     allData.Basics = basicdata; 
     return View(allData); 
    } 

    public ActionResult GetFromMainframe() 
    { 
     AllData allData = new AllData(); 
     allData.ContactPoints = …getting data from mainframe 
     return PartialView("ContactsSection", allData); 
    } 

的詳細頁面呈現。點擊按鈕執行腳本，但控制器沒有命中。我究竟做錯了什麼？

我也將張貼我做了一些其他的嘗試......

Answer 1

我試過一個Ajax調用相應的網址，但它不會刷新顯示。

這正是你應該有什麼用。讓我們假設你有以下幾種觀點：

<div id="mainframeContens"></div> 

<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button> 

，然後你可以寫下面的腳本將發送一個AJAX請求TI相應的控制器動作單擊按鈕時，並在div加載內容：

$(function() { 
    $('#loadFromMainFrame').click(function(e) { 
     e.preventdefault(); 
     var url = $(this).data(url); 
     $('#mainframeContens').load(url); 
    }); 
}); 

，現在所有剩下的當然是要有相應的控制器動作將從主機加載數據並呈現局部視圖：

public ActionResult GetFromMainFrame() 
{ 
    SomeModel model = ... go hit the mainframe to retrieve the model using a webservice or whatever you are using to hit it 
    return PartialView("_SomePartial", model); 
}