asp.net-mvc-3 - 如何在 ASP.Net MVC 3 razor View 中使用 Ajax 和 Jquery 加载页面部分？

Question

我正在开发 ASP.Net MVC 3 网站，该网站使用 Razor View 引擎和 Jquery

在主页(或任何与此相关的页面)上，我想使用 ajax(例如 iGoogle)加载部分内容。

我的意思是页面加载

• 我想调用一些 HttpGet 操作方法，每个方法返回一些HTML内容

• 直到我得到响应，这些 Div 显示“正在加载”图形。

我知道 Ajax.BeginForm 和 Ajax.ActionLink，但在这两种情况下我都需要单击一些 UI 元素；我不知道如何在页面加载/文档上使用它们。准备好了吗？

即使我得到一些指导而不是准确/完整的代码，我也会很感激。

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

其他想法:

• 这段粗略的代码将部分 View 加载到 div 中。当 dom 准备好时，异步调用开始。
• 参见http://api.jquery.com/jQuery.ajax/ jquery ajax 文档
• 我喜欢使用 spin.js 来显示加载图标，因为它非常简单且很小。