在ASP.NET MVC中对控制器进行简单的Ajax调用

109

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

— 查马拉
source

返回json格式的字符串{"name":"chamara"}。然后尝试读为data['name']

— Raab

1

从视图中删除第二个jQuery库。您的代码应按原样工作。我认为可能会发生脚本错误并阻止警报显示。

— Terence

23

完成更新后，

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

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

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

— Asb
source

52

删除数据属性，因为您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
});

— 达伦
source

3

@chamara-抱歉，删除HttpPost（您没有将任何内容发布到服务器，因此这将是一个冗余属性），并且不会命中控制器。还要删除AJAX函数中的“ type：POST”，因为我已经给您播种了。

— 达伦

18

使用剃刀通过调用以下操作来动态更改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'); }
});

— gdmanandamohon
source

Url.Action的参数在此答案中向后，是Url.Action（actionName，controllerName）

— xd6_

1

不喜欢这样做，它鼓励视图和javascript耦合，但是，用户名签出了吗？

— 露背装

当您不强制用户对每个操作进行重定向时，@ Halter UX将会得到极大的改进。客户端发生了很多事情，服务器端不应该在意。

— Kolob Canyon '18

@KolobCanyon你是100％正确的。我的评论更多是指在javascript中使用razor渲染url，这将您的javascript与视图（cshtml）紧密结合在一起。这是一个很好的答案，但是要解决紧密耦合，您可以将url转储到chstml中的data属性中，并在javascript中读取它。对困惑感到抱歉！

— 露背裤

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>

— Lokesh_Ram
source

5

如果您只需要在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脚本代码（如果发布请求）以及[HttpGet]到[HttpPost]

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

注意：如果您在与View Controller相同的控制器中使用FirstAjax，则不需要url中的Controller名称。喜欢url: 'FirstAjax',

— 穆罕默德·阿萨德（Muhammad Asad）
source

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

并且，请参考此链接以进一步了解方法如何变为动作。很好的参考。

— RGR
source

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

— 奥耶尼根
source

0

代替url: serviceURL, 使用

url: '<%= serviceURL%>',

并将2个参数传递给successFunc吗？

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

— 交换网
source

0

在global.asax中添加“ JsonValueProviderFactory”：

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

— 亚什
source

什么是JsonValueProviderFactory？

— Kiquenet '19