calling controller method using ajax

Hi guys,

I've got an ajax method that should work but doesn't

$(document).ready(function () {
    function displayMenu() {
        window.alert("hello world");
        $.ajax({
            type: "POST",
            url: '<%=Url.Action("Index", "Menu")%>',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            error: handleError,
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            }
        });
    }

    function handleError(a, desc, error) {
        window.alert(error);
    }

...more js

Now, its been called correctly since the messages appear but the error is printing out "Error: Invalid argument". i don't see anything wrong with my ajax call to my controller.

Re: calling controller method using ajax

instead of url: '<%=Url.Action("Index", "Menu")%>',

just try url:/ControllerName/

Re: calling controller method using ajax

How do I call a method on the controller? I've actually noticed the url.action is mvc2 not mvc3 so i've updated it to read

function displayMenu() {
        window.alert("hello world");
        $.ajax({
            type: "POST",
            url: '@Url.Action("Temp")',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: function (xhr, desc, error) {
                window.alert('description' + desc);
                window.alert('error' + error);
            }
        });
    }

that still doesn't work. I've created a new post method in my controller and named it Temp to see if it was because of the call being to another controller. It still doesn't hit the break point!

Re: calling controller method using ajax

Hi Ruddj16,

Are you using [HttpPost] for the Action like below query? If not, you should change the ajax type to "Get" [second query]

[HttpPost]
public ActionResult Index()
{ ... }

Javascript

$.ajax({
            type: "Get",
            url: '<%=Url.Action("Index", "Menu")%>',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            error: handleError,
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            }
        });

Hopefully, this answers your question.

Danny Mualim

Re: calling controller method using ajax

Heres the controller with the dummy method.

public JsonResult Temp()
        {
            string h = "Hello world";
            return new JsonResult() { Data = null };
        }

Now when I run it, I get an internal server error value from my alerts.

Re: calling controller method using ajax

Hmmm... are you using the ajax query same as the one that you metion? or different one? if different, could you post it here?

Danny

Re: calling controller method using ajax

here's the ajax call

function displayMenu() {
        window.alert("hello world");
        $.ajax({
            type: "POST",
            url: '@Url.Action("Temp", "Logon")',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: function (xhr, desc, error) {
                window.alert('description' + desc);
                window.alert('error' + error);
            }
        });
    }

Re: calling controller method using ajax

Could you try below query? I changed the type from "POST" to "GET"

function displayMenu() {
        window.alert("hello world");
        $.ajax({
            type: "GET",
            url: '@Url.Action("Temp", "Logon")',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: function (xhr, desc, error) {
                window.alert('description' + desc);
                window.alert('error' + error);
            }
        });
    }

Cheers,

Danny

Re: calling controller method using ajax

thanks Danny,

Sadly it produces the same result.

Would more code be helpful?

Re: calling controller method using ajax

Ok, I just did experiment. please removed datatype: "JSON".

function displayMenu() {
        window.alert("hello world");
        $.ajax({
            type: "GET",
            url: '@Url.Action("Temp", "Logon")',
            //datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: function (xhr, desc, error) {
                window.alert('description' + desc);
                window.alert('error' + error);
            }
        });
    }

Hopefully, this works at your PC.

Danny Mualim

Re: calling controller method using ajax

Still doesn't work.

i do have other methods within that file. Could these be causing an issue?

Re: calling controller method using ajax

I've commented out the rest of the javascript leaving the barebones behind. This method still doesn't work but at least i know its nothing else thats causing it to fail.

Re: calling controller method using ajax

There will be a problem if it has duplicate method name. if not, it should work as in my PC.

Danny

Re: calling controller method using ajax

No duplicated method names. If I change the @Url to be /controller/action that invokes the controller but I still get a server error.

Re: calling controller method using ajax

Question, do you use Routes.MapRoutes? if yes, is the default route.map [query below] sit on global.asax.cs? If not, that causes the problem.

routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

Cheers,

Danny

Re: calling controller method using ajax

Danny,

this is what i've got in my routes.Map...

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Logon", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

        }

Could it be the fact that I'm calling it from a ajax form submit method?

Re: calling controller method using ajax

I've wired a simple button to the function that makes the ajax request and it still calls the error method. :( I'm lost! I have no idea why it doesn't work. Here's the complete code listing

Html page

@model SpecialsApplication.Models.LogOnModel

<div id="login">
	Login to your account.
	<div id="logindialog">
    @using (Html.BeginForm("Login", "Logon", FormMethod.Post, new { id = "searchForm" }))
    {
		<div class="infopanel">Username:@Html.TextBoxFor(model => model.UserName)
        <!--Username:<input type="text" name="uname" size="35"/>--></div>
                
		<div class="infopanel">Password:@Html.TextBoxFor(model => model.Password)</div>
        <div class="infopanel">
            <input type="submit" value="Submit" class="submit" id="loginBtn"/>
            </div>
    }

      <button id="btnTestConnection" onclick="return false;">Test connection</button>
	</div>
 </div>

And the javascript file

$(document).ready(function () {

    $("button[id$='btnTestConnection']").click(function () {
        updatemyMenu();
    });


    function updatemyMenu() {
        window.alert("hello world");
        $.ajax({
            type: "GET",
            url: '@Url.Action("Temp", "Logon")',
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat 
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: function (xhr, desc, error) {
                window.alert(xhr);
                window.alert('description' + desc);
                window.alert('error' + error);
            }
        });
    }
});

and the controller

public JsonResult Temp()
        {
            string h = "Hello world";
            return new JsonResult() { Data = null };
        }

Re: calling controller method using ajax

Hmmm no idea what's happening here. but this might work.

Ajax Function:

function updatemyMenu() {
        window.alert("hello world");
        $.ajax({
            type: "POST",
            url: '@Url.Action("Temp", "Logon")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: function (xhr, desc, error) {
                window.alert(xhr);
                window.alert('description' + desc);
                window.alert('error' + error);
            }
        });
    }

And in the controller, please add [HttpPost] for that method

[HttpPost]
public JsonResult Temp()
        {
            string h = "Hello world";
            return new JsonResult() { Data = null };
        }

Danny Mualim

Re: calling controller method using ajax

Sadly I'm getting the same result. I've attempted to debug it but that doesn't return much either. :(

Re: calling controller method using ajax

Hi,

Try this.

$(document).ready(function () {
    function displayMenu() {
        window.alert("hello world");
        $.ajax({
            type: "POST",
            url: 'Menu/Index',
            datatype: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (returndata) {
                if (returndata.ok) {
                    //do something with returndata.mydat
                    window.alert(' everything is okay : ' + returndata.data.password);
                } else {
                    window.alert(' everything is okay : ' + returndata.data.password);
                }
            },
            error: handleError
        });
    }

    function handleError(a, desc, error) {
        window.alert(error);
    }

Hope this helps