如何在ASP.Net MVC 3剃鬚刀視圖中使用Ajax和Jquery加載頁面部分？

Question

我工作ASP.Net MVC 3網站，該網站使用Razor視圖引擎和jQuery

主頁上（或任何頁面的這個問題）我想用AJAX，諸如iGoogle加載的內容部分。

我的意思是在頁面加載

• 我想打電話給一些HTTPGET操作方法每一個返回一些 HTML內容

• ，直到我得到迴應這些事業部的表現「加載」圖形。

我知道Ajax.BeginForm和Ajax.ActionLink，但在這兩種情況下我需要點擊一些UI元素;我不知道如何使用它們在頁面加載/ document.Ready？

即使我得到一些方向而不是確切/完整的代碼，我也會感激。

Answer 1

好吧，讓我們給你一些指導，我將在jQuery中展示一些代碼，因爲它很容易。我們走吧。

的Html

<div id="SomeContent"> </div> 

在你看來

$(function(){ // this runs on on page load 
    LoadData('#SomeContent', @Url.Action("ActionName","ControllerName")); 
}); 

在JavaScript庫文件

function LoadData(target, url){ 
    $.ajax({ 
    beforeSend: startAnimation(target), 
    url : url, 
    success : function(result){ $(target).html(result); }, 
    complete : stopAnimation(target) 
}); 
} 

function startAnimation(target){ 
    //..add a loading image on top of the target 
} 

function stopAnimation(target){ 
    // remove the animation gif or stop the spinning, etc. 
} 

你的服務器端代碼

public ActionResult ActionName() { 
    ... do things to get your model populated ... 
    return PartialView("SomeView", yourmodel); 
} 

個

更多的想法：

• 這個粗糙的代碼加載一個局部視圖到一個div。當dom準備就緒時，無聲電話就開始了。
• 請參閱http://api.jquery.com/jQuery.ajax/ jquery ajax文檔
• 我喜歡使用spin.js來顯示加載圖標，因爲它是如此簡單和小巧。