在 asp.net mvc 中对控制器进行简单的 Ajax 调用答案

【问题标题】：Making a Simple Ajax call to controller in asp.net mvc在 asp.net mvc 中对控制器进行简单的 Ajax 调用
【发布时间】：2013-04-17 15:43:51
【问题描述】：

我正在尝试开始使用 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);
        }
    }

【问题讨论】：

返回 json 格式的字符串 {"name":"chamara"}。然后尝试阅读为data['name']
从视图中移除第二个 jQuery 库。您的代码应该按原样工作。我认为可能发生了脚本错误并阻止了警报显示。

标签： c# jquery asp.net asp.net-mvc asp.net-mvc-2

【解决方案1】：

删除 data 属性，因为您对服务器不是 POSTING 任何东西（您的控制器不需要任何参数）。

在您的 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
});

【讨论】：

@chamara - 抱歉，删除 HttpPost（您没有向服务器发布任何内容，因此这将是一个冗余属性）并且控制器不会被击中。同时删除 AJAX 函数中的“type: POST”，就像我播种的那样。

【解决方案2】：

更新完成后，

它第一次使用默认 HttpGet 请求调用 FirstAjax 操作并呈现空白的 Html 视图。（早些时候你没有它）
稍后在加载该视图的 DOM 元素时，您的 Ajax 调用会被触发并显示警报。

之前您只是将 JSON 返回到浏览器而不呈现任何 HTML。现在它有一个呈现的 HTML 视图，它可以在其中获取您的 JSON 数据。

您不能直接将 JSON 呈现为纯数据而不是 HTML。

【讨论】：

【解决方案3】：

使用 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(actionName, controllerName)
不喜欢这个，它鼓励视图和javascript的耦合，但是，用户名签出？
@Halter UX 当您不强制用户在每个操作上重定向时会大大改进。而且有很多在客户端发生的事情是服务器端不应该关心的。
@KolobCanyon 你是 100% 正确的。我的评论更多是指在 javascript 中使用 razor 渲染 url，这将您的 javascript 与视图（cshtml）紧密结合在一起。这是一个很好的答案，但要修复紧密耦合，您可以将 url 转储到 chstml 中的数据属性中并在 javascript 中读取它。很抱歉造成混乱！

【解决方案4】：

如果你只需要在你的 Ajax 调用中点击 C# 方法，你只需要传递两个事件类型和 url，如果你的请求被获取，那么你只需要指定 url。请按照下面的代码工作正常。

C# 代码：

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

获取请求时的 Java 脚本代码

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

Java 脚本代码，如果是 Post 请求以及 [HttpGet] 到 [HttpPost]

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

注意：如果您在 View Controller 所在的同一控制器中使用 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>

【讨论】：

【解决方案6】：

这是针对您的 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();
}

请参考this 链接以进一步了解方法如何变为操作。不过很好的参考。

【讨论】：

【解决方案7】：

查看；

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

【讨论】：

【解决方案8】：

而不是url: serviceURL, 使用

url: '<%= serviceURL%>',

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

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

【讨论】：

【解决方案9】：

在 global.asax 中添加“JsonValueProviderFactory”：

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

【讨论】：

什么是 JsonValueProviderFactory ？