Form data not being posted to controller when using AJAX

Question

Ok so I have this form in my view:

<form id="MyForm">
<input type="text" name="myinput" />
<button type="submit" />
</form>

I have the following Javascript at the top of my view, which runs when the page loads:

<script type="text/javascript">
    $(document).ready(
        function () {
            $("#MyForm").submit(
                function () {
                    var url = "Home/TestAjax";

                    var dataToSend = $("#MyForm").serialize();
                    alert(dataToSend);

                    $.ajax
                    (
                        {
                            type: "POST",
                            url: url,
                            data: dataToSend,
                            success: function (data) {
                                alert(data);
                            }
                        }
                    );

                    return false;
                }
            );
        }
    );
</script>

The form is being serialised to ajax correctly, as verified by the alert box. Here is my TestAjax controller method:

[HttpPost]
public string TestAjax(string data)
{
    return !string.IsNullOrEmpty(data) ? "Success" : "Failure";
}

The value being returned is Failure, because the AJAX isn't being posted back. What am I doing wrong here?

Thanks

Not using any models at the moment, trying to get my head around just serializing a form to JSON, posting it to a controller and returning a value. Do you need to use a model? — JMK
– JMK, Commented Jan 9, 2014 at 11:39

Darin Dimitrov · Accepted Answer · 2014-01-09 11:45:33Z

6

The name of your input field is myinput not data. So make sure you have consistently named the argument of your action as well:

[HttpPost]
public ActionResult TestAjax(string myinput)
{
    return !string.IsNullOrEmpty(myinput) ? Content("Success") : Content("Failure");
}

When you use $("#MyForm").serialize() this will return myinput=some_value where some_value is obviously the value that the user has entered in this input field.

And if you had 2 input fields in your form:

<form id="MyForm">
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <button type="submit" />
</form>

you would of course write a view model:

public class MyViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

that your controller action will take as parameter:

[HttpPost]
public ActionResult TestAjax(MyViewModel model)
{
    return !string.IsNullOrEmpty(model.Foo) ? Content("Success") : Content("Failure");
}

Also please notice that in ASP.NET MVC controller actions should return ActionResults, not strings or whatever.

edited Jan 9, 2014 at 11:45

answered Jan 9, 2014 at 11:40

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

3 Comments

Nitin Varpe Over a year ago

Darin u caught that again ;)

JMK Over a year ago

D'oh, I thought the whole form would be serialised to a single JSON string and passed through as data, thanks very much!

DontVoteMeDown Over a year ago

I have looked about ten times over the JS and C# code and left the HTML aside but sometimes HTML is much important as the rest... +1

Collectives™ on Stack Overflow

Form data not being posted to controller when using AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related