MVC 4 Ajax Post not working

Question

@using(Html.BeginForm("About", "User", FormMethod.Post , new { id="aboutme"}))
{
    <fieldset>
          <ul>
            <li> <label class="block">About me</label> @Html.TextAreaFor(m=>m.About.AboutMe)</li>
            <li> <input type="button" id="submit" class="input-button" /> </li>
          </ul>
    </fieldset>
}

<script type="text/javascript">
    $(function () {
        $('#submit').click(function () {

            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // The AJAX call succeeded and the server returned a JSON
                    // with a property "s" => we can use this property
                    // and set the html of the target div
                    alert(result.s);
                    $('#ShowResultHere').html(result.s);
                }
            });
            // it is important to return false in order to
            // cancel the default submission of the form
            // and perform the AJAX call
            return false;
        });
    }); 
</script>

When i debug this, action URL becoming /User/undefined.

How can i fix it?

score 4 · Accepted Answer · answered Oct 06 '12 at 19:09

The this keyword refers to the source of the event, which is the submit button in this case. You want the form, so try this (using JQuery traversing):

url: $(this).closest("form").prop("action"),
type: $(this).closest("form").prop("method"),
data: $(this).closest("form").serialize()

The alternative would be to use <input type='submit' class='input-button' /> instead of the button, and listen for the event $("#aboutme").submit (that way this would actually refer to the form, as your code assumes).

score 1 · Answer 2 · answered Oct 08 '12 at 14:58

As an alternative attr function, to get the value of the attribute http://api.jquery.com/attr/ and also, jQuery has a shorthand for ajax post, $.post http://api.jquery.com/jQuery.post/ so your code could end like this

$("#submit").click(function(event){
    event.preventDefault();
    $.post($("#aboutme").attr("action"), $("#aboutme").serialize(), function (data) {
        if (data != null) {
            alert(result.s);
            $('#ShowResultHere').html(result.s);
        }
    });
});

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

Alternatively you could use the Ajax.BeginForm method instead, which lets you set a update target for any html returned.

Example: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

edited May 23 '17 at 12:27

Community

1
1

answered Oct 06 '12 at 19:21

Betty

9,109
2
34
48

MVC 4 Ajax Post not working

3 Answers3