如何在ASP.NET MVC中使用JQuery调用Controller Actions

时间:2011-05-25 03:06:12

标签: jquery asp.net-mvc ajax

我已经阅读了一段时间,发现您可以使用以下方法调用控制器操作:

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

这是否意味着我应该将MicrosoftMvcAjax.js或MicrosoftAjax.js与Jquery lib一起添加?

另外,$ .ajax()函数中第二个参数应该包含什么?

最后,stackoverflow中或站点外的任何其他链接可能对asp.net mvc w / ajax和jquery有帮助吗?

感谢。

5 个答案:

答案 0 :(得分:40)

您可以从这里开始阅读jQuery.ajax()

实际上,Controller Action是一种可以通过Url访问的公共方法。因此,可以通过Ajax调用(MicrosoftMvcAjax或jQuery)调用Action。对我来说,jQuery是最简单的。它在我上面给出的链接中有很多例子。 ajax调用的典型示例是这样的。

$.ajax({
    // edit to add steve's suggestion.
    //url: "/ControllerName/ActionName",
    url: '<%= Url.Action("ActionName", "ControllerName") %>',
    success: function(data) {
         // your data could be a View or Json or what ever you returned in your action method 
         // parse your data here
         alert(data);
    }
});

更多示例可以在here

中找到

答案 1 :(得分:30)

之前的回复仅限ASP.NET

您需要引用jquery(可能来自CDN):http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

然后是一个类似的代码块,但更简单...

$.ajax({ url: '/Controller/Action/Id',
         success: function(data) { alert(data); }, 
         statusCode : {
             404: function(content) { alert('cannot find resource'); },
             500: function(content) { alert('internal server error'); }
         }, 
         error: function(req, status, errorObj) {
               // handle status === "timeout"
               // handle other errors
         }
});

我已经添加了一些必要的处理程序,如果你正在调试代码,404和500会一直发生。此外,许多其他错误(如超时)将通过错误处理程序过滤掉。

ASP.NET MVC控制器处理请求,因此您只需要请求正确的URL,控制器就会接收它。此代码示例在ASP.NET

以外的环境中工作

答案 2 :(得分:2)

您可以使用jQuery AJAX方法轻松调用任何控制器的操作:

请注意,在此示例中,我的控制器名称为学生

  

控制器操作

 public ActionResult Test()
 {
     return View();
 }

在上述控制器的任意视图中,您可以像这样调用测试()操作:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("Test", "Student")",
            success: function (result, status, xhr) {
                alert("Result: " + status + " " + xhr.status + " " + xhr.statusText)
            },
            error: function (xhr, status, error) {
                alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
            }
        });
    });
</script>

答案 3 :(得分: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函数,所以我们将控制器方法中的结果(arr)转换为JSON对象,如下所示:

Json(arr , JsonRequestBehavior.AllowGet);

并返回那个Json对象。

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

更多详情 click here

答案 4 :(得分:1)

在回复上述帖子时,我认为需要这一行代替你的行: -

var strMethodUrl = '@Url.Action("SubMenu_Click", "Logging")?param1='+value1+' &param2='+value2

否则您将实际字符串value1和value2发送到控制器。

然而,对我来说,它只调用一次控制器。它似乎每次都会点击'receieveResponse',但控制器方法的一个断点显示它只在第一次点击,直到页面刷新。

这是一个有效的解决方案。对于cshtml页面: -

   <button type="button" onclick="ButtonClick();"> Call &raquo;</button>

<script>
    function ButtonClick()
    {
        callControllerMethod2("1", "2");
    }
    function callControllerMethod2(value1, value2)
    {
        var response = null;
        $.ajax({
            async: true,
            url: "Logging/SubMenu_Click?param1=" + value1 + " &param2=" + value2,
            cache: false,
            dataType: "json",
            success: function (data) { receiveResponse(data); }
        });
    }
    function receiveResponse(response)
    {
        if (response != null)
        {
            for (var i = 0; i < response.length; i++)
            {
                alert(response[i].Data);
            }
        }
    }
</script>

对于控制器: -

public class A
{
    public string Id { get; set; }
    public string Data { get; set; }

}
public JsonResult SubMenu_Click(string param1, string param2)
{
    A[] arr = new A[] {new A(){ Id = "1", Data = DateTime.Now.Millisecond.ToString() } };
    return Json(arr , JsonRequestBehavior.AllowGet);
}

每次调用时都可以看到时间的变化,因此没有缓存值...