使用 jQuery 调用控制器动作答案

【问题标题】：Using jQuery To Call A Controller Action使用 jQuery 调用控制器动作
【发布时间】：2010-11-22 23:54:48
【问题描述】：

我有一个很好的页面，可以满足我的一切需求。但是，其中一个元素（部分页面）需要几秒钟的时间，然后我想加载。所以我想做的是先显示没有这个部分的页面，但在它的位置显示一个“正在加载”的 gif。然后在我的 jquery 中...

$(document).ready(function() {

   // Call controller/action (i.e. Client/GetStuff)

});

我想调用我的控制器操作，它返回一个 PartialView 并更新我的 div 内容。它基本上在加载时异步调用部分加载。我可以用 ActionLink 很好地做到这一点，直到它达到我想要在加载时执行它的地步。如果我使用 jQuery 进行 onloand 类型调用，我什至可以返回 PartialView 吗？

【问题讨论】：

标签： jquery asp.net-mvc ajax asynchronous

【解决方案1】：

我们可以很方便地使用Javascript/Jquery调用Controller方法，如下：

假设以下是要调用的 Controller 方法，该方法返回一些类对象的数组。设类为'A'

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

下面是复杂类型（类）

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

现在轮到 JQUERY 调用上面的控制器方法了。以下是调用控制器方法的Jquery函数。

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

在上面的 Jquery 函数 'callControllerMethod' 中，我们开发了控制器方法 url 并将其放在一个名为 'strMehodUrl' 的变量中，并调用 Jquery API 的 getJSON 方法。

receieveResponse 是接收控制器方法的响应或返回值的回调函数。

这里我们使用了 JSON ，因为我们不能使用 C# 类对象

直接进入javascript函数，所以我们将controller方法中的结果（arr）转换成JSON对象如下：

Json(arr , JsonRequestBehavior.AllowGet);

并返回该 Json 对象。

现在在 Javascript / JQuery 的回调函数中，我们可以利用这个结果 JSON 对象并相应地在 UI 上显示响应数据。

更多详情 click here

【讨论】：

【解决方案2】：

只需使用$.load:

$(document).ready(function() {    
   $('#myDiv').html('<img src="loading.gif"/>')
              .load('Client/GetStuff');   
});

这会将 div id="myDiv" 的内容替换为您的加载指示器，然后将 Client/GetStuff 的输出注入其中。

【讨论】：

所以我实现了这个： $('#refreshGrid').load('/Client/GetAttachments?id=' + clientID);我的客户端控制器如下所示： public ActionResult GetAttachments(int id) { // 一些逻辑... return PartialView("~/Views/Client/ClientAttachmentGridView.ascx", files); alert($('#refreshGrid')) 给了我一个对象，而 alert(clientID) 给了我我所期望的。控制器没有受到打击（否则我会看到来自提琴手的一些 Web 服务调用）。烦人的是我没有看到任何错误消息。
哦，我收回了。我在提琴手中得到 500：参数字典包含一个空条目，用于“CommercialLendingPlatform.Controllers”中方法“System.Web.Mvc.ActionResult GetAttachments(Int32)”的不可为空类型“System.Int32”的参数“id” .ClientController'。要使参数可选，其类型应该是引用类型或 Nullable 类型。
参数名称：参数
太棒了！我需要将其设为 Client/GetAttachments/clientID！暂时忘记了 url 路由。谢谢大家！

【解决方案3】：

$.ajax("MyController/MyAction", function(data) {
    alert(data);
});

这是一个非常基本的例子；您只需使用 AJAX 调用控制器，然后您可以将数据弹出到 DOM 中或用它做其他事情。

【讨论】：

【解决方案4】：

我相信你可以。我以前使用 jQuery 从 ASP.NET MVC 控制器获取 JSON，这是我发现的将数据获取到客户端的最令人愉快的方式之一。

我确信获得局部视图可能就像使用 jQuery 的“加载”、“获取”或“发布”方法一样简单：

使用Load：

$("#feeds").load("test.aspx");

使用Get：

$.get("test.aspx", function(data){
  alert("Data Loaded: " + data);
});

使用Post：

$.post("test.aspx", function(data){
  alert("Data Loaded: " + data);
});

【讨论】：