Making a Simple Ajax call to controller in asp.net mvc

Question

I'm trying to get started with ASP.NET MVC Ajax calls.

Controller:

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

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

View:

<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>

I just need to print an alert with the controller method returning data. Above code just print "chamara" on my view. An alert is not firing.

UPDATE

I modified my controller as below and it start working. I don't have an clear idea why it's working now. Some one please explain. The parameter "a" does not related i added it because i can not add two methods with same method name and parameters.I think this might not be the solution but its working

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

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

return json formatted string `{"name":"chamara"}`. then try to read as `data['name']` — Raab, Apr 24 '13 at 07:40
Remove the second jQuery library from the view. Your code should work as is. I think a script error might be occurring and preventing the alert from showing up. — Terence, Apr 24 '13 at 08:39

score 55 · Answer 1 · edited Feb 20 '15 at 05:23

Remove the data attribute as you are not POSTING anything to the server (Your controller does not expect any parameters).

And in your AJAX Method you can use Razor and use @Url.Action rather than a static string:

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

From your update:

$.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 - sorry, remove HttpPost (You are not posting anything to the server so it would be a redundant attribute) and the controller would not be hit. Also remove "type: POST" in the AJAX function as I have sown you. — Darren, Apr 24 '13 at 07:52

score 25 · Accepted Answer · answered Apr 25 '13 at 06:12

After the update you have done,

its first calling the FirstAjax action with default HttpGet request and renders the blank Html view . (Earlier you were not having it)
later on loading of DOM elements of that view your Ajax call get fired and displays alert.

Earlier you were only returning JSON to browser without rendering any HTML. Now it has a HTML view rendered where it can get your JSON Data.

You can't directly render JSON its plain data not HTML.

score 21 · Answer 3 · edited Oct 02 '17 at 11:43

21

Use a Razor to dynamically change your URL by calling your action like this:

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

edited Oct 02 '17 at 11:43

procma

1,174
3
14
24

answered Jun 27 '16 at 06:50

Ananda G

2,389
23
39

The parameters for Url.Action are backwards in this answer, it's Url.Action(actionName, controllerName) – xd6_ Apr 27 '17 at 22:20
1

Not a fan of this, it encourages coupling of the view and the javascript, but uh, username checks out? – Halter Nov 08 '17 at 22:37
@Halter UX improves massively when you don't force the user to redirect on every action. And there are a lot of things that happen on the client-side that the server-side shouldn't care about. – Kellen Stuart Nov 07 '18 at 23:07
@KolobCanyon you're 100% correct. My comment is more referring to rendering the url with razor in the javascript, this tightly couples your javascript with the view (the cshtml). It's a good answer, but to fix the tight coupling you could maybe dump the url into a data attribute in the chstml and read it in the javascript. Sorry for the confusion! – Halter Nov 09 '18 at 15:16

score 10 · Answer 4 · edited Feb 28 '19 at 16:51

If you just need to hit C# Method on in your Ajax Call you just need to pass two matter type and url if your request is get then you just need to specify the url only. please follow the code below it's working fine.

C# Code:

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

Java Script Code if Get Request

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

Java Script Code if Post Request and also [HttpGet] to [HttpPost]

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

Note: If you FirstAjax in same controller in which your View Controller then no need for Controller name in url. like url: 'FirstAjax',

Lokesh_Ram · Answer 5 · 2016-05-06T08:22:16.563

First thing there is no need of having two different versions of jquery libraries in one page,either "1.9.1" or "2.0.0" is sufficient to make ajax calls work..

Here is your controller code:

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

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

This is how your view should look like:

<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>

score 4 · Answer 6 · answered Apr 25 '13 at 09:34

It's for your UPDATE question.

Since you cannot have two methods with the same name and signature you have to use the ActionName attribute:

UPDATE:

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

And please refer this link for further reference of how a method becomes an action. Very good reference though.

score 1 · Answer 7 · answered Dec 22 '16 at 06:01

View;

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

Controller Method;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

swapneel · Answer 8 · 2013-04-24T07:55:22.897

0

instead of url: serviceURL, use

url: '<%= serviceURL%>',

and are you passing 2 parameters to successFunc?

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

edited Apr 24 '13 at 07:55

answered Apr 24 '13 at 07:41

swapneel

3,061
1
25
32

score 0 · Answer 9 · answered Apr 24 '13 at 09:07

0

Add "JsonValueProviderFactory" in global.asax :

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

answered Apr 24 '13 at 09:07

Yashh

26
3

what is JsonValueProviderFactory ? – Kiquenet Mar 14 '19 at 23:16

Making a Simple Ajax call to controller in asp.net mvc

9 Answers9

Linked