CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Dev 404
Dev 404

Reputation: 1606

Ajax call not hitting controller action

I am trying to send a FormCollection to an action in my controller but the action is never being hit.

Form:

<form class="form-horizontal" role="form" id="TestForm" onsubmit="return false">
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <input type="text" name="Blah1" />
            <input type="text" name="Blah2" />
        </div>
        <input id="SubmitButton" type="submit" value="Submit" />
    </div>
</div>

jQuery/Ajax:

$(document).ready(function () {
    $("#SubmitButton").click(function () {
        var form = $("#TestForm").serialize();


        $.ajax({
            url: "/Calculator/Post",
            type: "POST",
            data: form,
            dataType: 'json',
            success: function () {
                alert("Success");
            },
            error: function () {
                alert("Error");
            }
        });
    });
});

Controller Action:

[HttpPost]
public JsonResult Post(FormCollection form)
{
    return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}

The only thing that happens is the browser alerts the error message. Am I missing something that is causing the action to never be hit?

Upvotes: 2

Views: 29654

Answers (3)

user5093161
user5093161

Reputation:

Make sure your controller Action Method or Method's argument data type is same as the data type of variable which is being post.

Example:

This will not work because in controller the InsertScore method receiving char as Answer data type but we are sending 'abc' which is not a character because char length is 2 byte so only 'a' or 'ab' can be sent in this case.

Ajax Post:

          $.ajax({
                  type: 'POST',
                  url: '/Home/InsertScore',
                  data: { Email: Em, Row: i, Answer: 'age' }
              });

Controller:

    [HttpPost]
    [WebMethod]
    public void InsertScore(string Email ,string Row,char Answer)
    {
     //do something here
    }

The correct way is.

Ajax Post:

        $.ajax({
              type: 'POST',
              url: '/Home/InsertScore',
              data: { Email: Em, Row: i, Answer: 'a' }
          });

Controller:

    [HttpPost]
    [WebMethod]
    public void InsertScore(string Email ,string Row,char Answer)
    {
      //do something here
    }

Upvotes: 0

Shyju
Shyju

Reputation: 218882

Your code should work fine as posted in the question. The only issue is see is how you are building the url manually which might cause 404 issues sometimes depending on your current url/page. You should be using the Url.Action helper method to build the urls which will take care of building the correct relative url regardless of which page you are currently in.

serialize() method is good enough to send your form data. It should work fine(go ahead and try it). you do not need to call the serializeArray and then stringify it as suggested by the accepted answer ! 

$.ajax({
    url: "@Url.Action("Post","Calculator")",
    type: "POST",
    data: $("#TestForm").serialize(),
    dataType: 'json',
    success: function () {
        alert("Success");
    },
    error: function () {
        alert("Error");
    }
});

If you are making this ajax call in an external js file, you may consider passing the base url to the js file and use that to build the relative url to your action method as described in this answer.

Also, in your action method, you do not need to pass the JsonRequestBehavior.AllowGet parameter to the Json method as your Action method is marked with [HttpPost]

[HttpPost]
public JsonResult Post(FormCollection form)
{
    var item =form["Blah1"];
    return Json(new { success = true });
}

Upvotes: 2

santosh singh
santosh singh

Reputation: 28672

The .serialize() method creates a text string in standard URL-encoded notation.The serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string.

var form = JSON.stringify($("#TestForm").serializeArray());

Upvotes: 1

Related Questions