Asp.NET MVC Ajax-Post a FORM and Ajax-Get

Question

Hi all,

I'm stuck, who can help me out? In my LogOn.aspx View I've login controls (Username, Password, RememberMe) inside a FORM tag:

<form id="loginform" method="post" action="/Account/LogOn/">

Below that, I've a hidden DIV with a OPTION dropdownlist and a confirm-button, with a onclick_event:

$.ajaxSetup({ cache: false });
$.ajax({
    type: "GET",
    url: "/Account/SetCompanyAndContinue",
    data: "{ 'id' : '1'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
});

First, the user logs in. In jQuery, I post the login credentials via AJAX:

var loginCred = new Object();
loginCred.Username = $('#userName').val();
loginCred.Password = $('#password').val();
loginCred.RememberMe = $('#rememberMe').checked;

var myJsonObject = JSON.stringify(loginCred);

$.ajaxSetup({ cache: false });
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Account/LogOnAjax/",
    data: myJsonObject,
    dataType: "json",
    success: function(data) {
        PostCredentialsSuccess(data);
    }
});

This POST works perfect. The breakpoint at the Controller Action is hit by the debugger and returns a JSON object of data. I put this JSON data into the OPTION dropdownlist. This Option Dropdownlist is then presented to the user. Then, when the user clicks the confirm-button, a second AJAX call is made:

$.ajaxSetup({ cache: false });
$.ajax({
    type: "GET",
    url: "/Account/SetCompanyAndContinue",
    data: "{ 'id' : '1'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
});

I would expect that the Controller Action named "SetCompanyAndContinue" gets hit:

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult SetCompanyAndContinue(string id)
    {
        SessionAdapter.CustomerID = Convert.ToInt32(id);
        return null;
    }

But it ain't happening, instead, the default Controller Action get's hit the first time:

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

BUT(!) the second time I click (the same) confirm-button the Controller Action finally hits [SetCompanyAndContinue].

Can somebody tell me what I'm doing wrong? Many thanks in advance.

Answer 1

try using a link to submit instead of a normal submit button, it probably has a conflict somewhere between the click, ajax and form.

Answer 2

I didn't know whether I got the correct information. But as per your description any click on the "submit" button will try to do the "Post" method and not the "Get" method. The "Get" call is done only when you visit the page at first or refresh the url. Use the link button to do the "Get" action.

That's why in your sample its calling "/Account/LogOnAjax/" this action with "Post" method.

Answer 3

you need to pass the data property as a javascript object not as a string

    $.ajax({ type: "GET",
    url: "/Account/SetCompanyAndContinue",
    data: ({id : 1}),
    contentType: "application/json; charset=utf-8", 
    dataType: "json" });

i recommend to use firebug to look at the actual HTTP Request that do get send from jQuery, that way tiny mistakes like this get obvious very quickly.

hth

Answer 4

To compare the different GET requests you can use a debugging HTTP proxy like Fiddler or Charles.

Answer 5

marc.d was right

A general rule of thumb (at least it works for me): if your action isn't being hit like you expect, it's likely something is wrong with your route params or if you're falling through to the default route, the form data being sent with the post isn't what's expected. I was using $(this).serialize() as a JQuery data arg for a $post and one of my hidden form fields was empty. The action, which wasn't included in any route, (I was letting it fall through to the default in this case), never saw the post.

Answer 6

Stupid mistake from my behalf:

• i've added a cookie to the response-stream which made the webbrower behave unpredictable.
• i've forgot to mark this one as answered