logo标签列表

在ASP.NET MVC中向控制器发起简单的Ajax调用

javascriptc#jqueryasp.netasp.net-mvc
121

我试图开始使用ASP.NET MVC Ajax调用。

控制器:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

查看：

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

我只需要在控制器方法返回数据后打印一个警告。上面的代码仅在我的视图中打印“chamara”。但是警告没有弹出。

更新

我修改了我的控制器如下，现在它可以正常工作了。我不清楚为什么它现在能工作。有人能解释一下吗？参数"a"与此无关，我添加它是因为我不能添加具有相同方法名和参数的两个方法。我认为这可能不是解决方案，但它能够工作。

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }
1
返回JSON格式字符串 {"name":"chamara"}，然后尝试通过 data['name'] 读取。 - Raab
2
从视图中删除第二个jQuery库。您的代码应该按原样工作。我认为可能会发生脚本错误，从而阻止警报显示出来。 - Terence
9个回答
55

由于您没有向服务器发送任何内容（您的控制器不期望任何参数），因此请删除数据属性。

在您的AJAX方法中，您可以使用Razor并使用@Url.Action而不是一个静态字符串：

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

从您的更新中：

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});
3
@chamara - 抱歉，删除HttpPost（你没有向服务器发布任何内容，所以它是多余的属性），控制器也不会被触发。同时按照我向你展示的方法，删除AJAX函数中的"type：POST"。 - Darren
25

在您进行更新后，

  1. 首先使用默认的HttpGet请求调用FirstAjax操作，并呈现空白的HTML视图。(此前您没有它)
  2. 稍后在该视图的DOM元素加载时，会触发Ajax调用并显示警报。

以前，您只返回JSON给浏览器，而没有呈现任何HTML。现在有一个呈现HTML视图的HTML视图，可以获取您的JSON数据。

您不能直接呈现JSON，因为它是纯粹的数据而不是HTML。

21

使用 Razor 可以通过如下方式调用操作来动态更改您的 URL：

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});
这个答案中Url.Action的参数顺序是反过来的，正确的顺序是Url.Action(controllerName, actionName)。 - xd6_
1
不太喜欢这个，它鼓励视图和JavaScript的耦合，但是，用户名检查通过？ - Halter
@Halter 当您不强制用户在每个操作上重定向时，用户体验会大大提高。而且有很多客户端发生的事情，服务器端不需要关心。 - Kellen Stuart
@KolobCanyon，你说得完全正确。我的评论更多是指在JavaScript中使用razor渲染URL，这会使你的JavaScript与view(cshtml)之间耦合紧密。这是一个好答案，但为了解决这种紧密耦合，您可以将url放入chstml中的数据属性中，并在JavaScript中读取它。对于造成的困惑我深感抱歉！ - Halter
10
如果你只需要在Ajax调用中调用C#方法，你只需要传递两个参数类型和url。如果请求是get，则只需要指定URL。请按照以下代码操作，它可以正常工作。 C# 代码： 
    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

获取GET请求的JavaScript代码

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

将Java Script代码中的Post请求改成HttpPost请求

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

注意：如果您在与视图控制器相同的控制器中使用FirstAjax，则不需要在URL中添加控制器名称。例如：url: 'FirstAjax'，
5

首先，在一个页面中没有必要使用两个不同版本的jquery库，使用"1.9.1"或"2.0.0"其中之一就足以使ajax调用正常工作。

以下是您的控制器代码：

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

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

这是您的视图应该看起来的样子：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>
4

这是关于您的UPDATE问题的解答。

由于您不能拥有两个具有相同名称和签名的方法，因此必须使用ActionName属性：

更新：

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

请参考这个链接了解更多关于方法如何成为操作的信息。非常好的参考资料。

1

查看；

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

控制器方法；
 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }
0

使用以下代码替换 url: serviceURL,

url: '<%= serviceURL%>',

你是否将2个参数传递给successFunc函数？

function successFunc(data)
 {
   alert(data);
 }
0
在 global.asax 中添加 "JsonValueProviderFactory":
protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}
JsonValueProviderFactory是什么？ - Kiquenet
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接