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

Question

I am learning web development. And I just want to make a simple AJAX GET call in ASP.Net MVC Application and I want visualize how it works. But I am not able to do so. I am a beginner and I could have done any silly mistakes. But as of now there are no errors in my code.

Below is what I have:

So, I have a Index.cshtml file which is already loaded. Now in that page I want to make an Ajax GET call to one of the function that I have written in the HomeController and action name is Test. I just want to hit the breakpoint in that Test Action of Homecontroller and return something back to the Success of AJAX Call. In HomeController I have below Action

[HttpGet]
public ActionResult Test()
{
    return View("hello");
}

jQuery

    $.ajax({
        url: '/Home/Test',
        type: 'GET',
        success: function (html) {
            alert(html);
        },
        error: function (error) {
            $(that).remove();
            DisplayError(error.statusText);
        }
    });
}

Confusion: Do I need to create a cshtml for Test. But I actually do not want that. I just want the Test Action to return me one data. And I will display that data in my Already opened Index.csthml file.

Error: No error but I am not able to hit the breakpoint in Test Action of controller. Kindly note that Success of AJAX is hitting but I do not see any data. But I am sure it did not hit the test Action breakpoint.

when are you calling your ajax code ? Any event triggers that code ? other wise your code is fine. — Anadi
– Anadi, Commented Jan 5, 2017 at 18:57
GET requests may be cached by the browser. If you had called it once it may not reach your controller again. Watch the browser's network monitor to verify the request is made. — Jasen
– Jasen, Commented Jan 5, 2017 at 19:00
There was a big answer down here for my question but now that answer is gone. :( — Unbreakable
– Unbreakable, Commented Jan 5, 2017 at 19:01
yes I need that ajax call to get triggered on a function call. And that function call is working fine. This ajax request is getting hit. — Unbreakable
– Unbreakable, Commented Jan 5, 2017 at 19:02
What kind of response do you want returned? A HTML fragment or JSON? — Jasen
– Jasen, Commented Jan 5, 2017 at 19:02

Anadi · Accepted Answer · 2017-01-05 19:10:24Z

4

Change your action method like this

[HttpGet]
public JsonResult Test()
{
    return Json("myContent",JsonRequestBehavior.AllowGet);
}

And in your success method in 'html' variable you will get back "myContent".

answered Jan 5, 2017 at 19:10

Anadi

75411 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HazemTafour · Accepted Answer · 2017-01-30 12:25:36Z

Example :

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

but id is going as url paramter visible in url , if i dont want that then?

Ramy Moussa · Accepted Answer · 2017-01-06 17:06:41Z

0

Since you don't want to return a view, you might need to return Json() instead of View() You need to Allow Get in the action. Like that:

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

Or in case of just Simple string response:

 public ActionResult SomeGetAction()
    {

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

I would recommend renaming html into response. Also change that to this in Error Response section.

 $.ajax({
    url: '/Home/Test',
    type: 'GET',
    success: function (response) {
        alert(response);
    },
    error: function (error) {
        $(this).remove();
        DisplayError(error.statusText);
    }
});

Enjoy.

edited Jan 6, 2017 at 17:06

answered Jan 5, 2017 at 19:03

Ramy Moussa

5,9813 gold badges37 silver badges48 bronze badges

6 Comments

Unbreakable Over a year ago

I do not understand your answer. I just want to return one string. may be "hello world".

Unbreakable Over a year ago

What is this int? id and myListQuery and all.

Ramy Moussa Over a year ago

@Unbreakable then return Json("Hello WOrld", JsonRequestBehavior.AllowGet);

Ramy Moussa Over a year ago

@Unbreakable check my answer, I Edited it.

Unbreakable Over a year ago

What about the ajax call. Do I need to change something in ajax call too. Can you see my ajax code..

|

kmp · Accepted Answer · 2025-02-11 13:39:02Z

-1

C#:

public JsonResult Test()
    {
        return Json("hello", JsonRequestBehavior.AllowGet);
    }

Jquery:

    $.ajax({
        url: '/Home/Test',
        type: 'Get',
        dataType: 'json',
        success: function (html) {
            alert(html);
        },
        error: function (error) {
            alert(error);
                       }
    });

edited Feb 11 at 13:39

kmp

2,4971 gold badge12 silver badges12 bronze badges

answered Aug 18, 2018 at 1:22

MahalingaM SubramaniyaM

991 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related