关于javascript:如何在ASP.NET MVC应用程序中进行AJAX GET调用

How to make a AJAX GET call in ASP.NET MVC application

我正在学习网络开发。我只是想在ASP.Net MVC应用程序中进行一个简单的AJAX GET调用,我想要想象它是如何工作的。但我无法这样做。我是初学者,我可以做任何愚蠢的错误。但截至目前,我的代码中没有错误。

以下是我所拥有的:

所以,我有一个已加载的Index.cshtml文件。现在,在该页面中,我想将Ajax GET call设置为HomeController中的function之一,并且操作名称为Test。我只想在Home控制器的Test Action中找到断点并返回到AJAX Call的Success
在HomeController中,我有以下Action

1
2
3
4
5
[HttpGet]
public ActionResult Test()
{
    return View("hello");
}

jQuery的

1
2
3
4
5
6
7
8
9
10
11
12
    $.ajax({
        url: '/Home/Test',
        type: 'GET',
        success: function (html) {
            alert(html);
        },
        error: function (error) {
            $(that).remove();
            DisplayError(error.statusText);
        }
    });
}

困惑:我是否需要为Test创建cshtml。但实际上我并不想这样。我只想让Test Action给我一个数据。我将在我已打开的Index.csthml文件中显示该数据。

错误:没有错误,但我无法点击控制器的Test Action中的断点。请注意,AJAX的Success正在击中,但我没有看到任何数据。但我确信它没有达到测试Action断点。


像这样改变你的行动方法

1
2
3
4
5
[HttpGet]
public JsonResult Test()
{
    return Json("myContent",JsonRequestBehavior.AllowGet);
}

在'html'变量的成功方法中,你将获得"myContent"。


示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 function RemoveItem(ItemId) {

                if (ItemId && ItemId > 0) {
                    $.ajax({
                        cache: false,
                        url: '@Url.Action("RemoveItem","Items")',
                        type: 'POST',
                        data: { id: ItemId },
                        success: function (result) {
                            if (result.success == true) {
                                $("#CartItemGridDiv").load('@Url.Content("~/User/Items/CartItemGrid")');
                                alert('Item Removed successfully.');
                            }
                            else {
                                alert('Item not removed.');
                            }
                        },
                        error: function (result) {
                            alert('Item not removed.');
                        }
                    });
                }
            }

        public ActionResult RemoveItem(int id)
        {
            if (id > 0)
            {
                bool addToChart = false;

                addToChart = Utilities.UtilityClass.RemoveItem(id);

                if (addToChart)
                {
                    return Json(new { success = true }, JsonRequestBehavior.AllowGet);
                }
            }
            return Json(new { success = false }, JsonRequestBehavior.AllowGet);
        }
            public ActionResult CartItemGrid()
        {
            List<CartItems> oItemList = (List<CartItems>)Session[MvcMAB.StringConst.CartItemSession];
            return View(oItemList);
        }


C#:

1
2
3
4
public JsonResult Test()
    {
        return Json("hello");
    }

jQuery的:

1
2
3
4
5
6
7
8
9
10
11
    $.ajax({
        url: '/Home/Test',
        type: 'Post',
        dataType: 'json',
        success: function (html) {
            alert(html);
        },
        error: function (error) {
            alert(error);
                       }
    });

由于您不想返回视图,因此可能需要返回Json()而不是View()
您需要允许Get in the action。 像那样:

1
2
3
4
5
6
    public ActionResult SomeGetAction(int? id)
    {
       //Some DB query here
       var myJsonList = myListQuery;
       return Json(myJsonList, JsonRequestBehavior.AllowGet);
    }

或者只是简单的字符串响应:

1
2
3
4
5
 public ActionResult SomeGetAction()
    {

       return Json("My String", JsonRequestBehavior.AllowGet);
    }

我建议将html重命名为response
还要在错误响应部分中将that更改为this

1
2
3
4
5
6
7
8
9
10
11
 $.ajax({
    url: '/Home/Test',
    type: 'GET',
    success: function (response) {
        alert(response);
    },
    error: function (error) {
        $(this).remove();
        DisplayError(error.statusText);
    }
});

请享用。