如何在ASP.Net MVC 3 Razor视图中使用Ajax和Jquery加载页面区块？

Question

我正在开发一个使用Razor视图引擎和JQuery的ASP.Net MVC 3网站。

在主页（或任何页面上），我想要使用ajax加载内容部分，就像iGoogle一样。

我的意思是在页面加载时，

• 我想调用一些HttpGet动作方法，每个方法都返回一些Html内容

• 在收到响应之前，这些Div将显示“正在加载”图形。

我知道有Ajax.BeginForm和Ajax.ActionLink，但在这两种情况下，我需要单击某个UI元素； 我不知道如何在页面加载/ document.Ready时使用它们？

即使我得到的不是精确/完整的代码，只要给我一些指导，我也会非常感激。

- Maheep

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);
}

附加思考：

• 这段简单的代码将一个partial view加载到一个div中。异步调用从dom准备就绪时开始。
• 请浏览http://api.jquery.com/jQuery.ajax/了解jquery ajax文档
• 我喜欢使用spin.js显示加载图标，因为它非常易用且小巧。

- monkeyhouse

---

感谢您提供如此详细的解释。 - Maheep