asp.net MVC responding to jQuery AJAX request

Question

I have the following code in a razor .cshtml file. Clicking a button should fire an ajax GET request which should pop up an alert with whatever data the server returned. (the JS below is within document.ready)

    $("#ajax-form").click(function () {

        alert("event fired");

        $.ajax({
            url: '/apartments/getData',
            type: 'GET',
            dataType: "text",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("Error");
            }
        });
    });

And the view code:

<div class="row">
    <form id="ajax-form">
        <input type="submit"/>
    </form>
</div>

Here is the controller code:

    [HttpGet]
    public string getData()
    {
        return "Some dummy data here";
    }

The event is definitely firing but the request fails (the error function fires). I could not get this to work with $.post or $.get either. Also typing localhost:54637/apartments/getData opens a page with "Some dummy data here".

Any ideas? Is there some particular way an asp.net MVC route must be settup to respond to an AJAX request?

please pot your view as well

Ehsan Sajjad
– Ehsan Sajjad

2014-04-25 04:34:38 +00:00
Commented Apr 25, 2014 at 4:34 — Ehsan Sajjad
– Ehsan Sajjad, Commented Apr 25, 2014 at 4:34

Ehsan Sajjad · Accepted Answer · 2014-04-25 05:27:28Z

2

you can use form submit event, when form is submitted ajax request will be sent:

$(document).ready(function(){  

$("#ajax-form").submit(function () {

        alert("event fired");

        $.ajax({
            url: '@Url.Action("getData","apartments")',
            type: 'GET',
            dataType: "html",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("Error");
            }
        });
    });
});

or you can use submit button click event like this:

$(document).ready(function(){  

$('#ajax-form input[type="submit"]').click(function () {

        alert("event fired");

        $.ajax({
            url: '@Url.Action("getData","apartments")',
            type: 'GET',
            dataType: "html",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("Error");
            }
        });
    });
});

Update:

you can post form via ajax this way:

$(document).ready(function(){  

    $("#ajax-form").submit(function (e) {
     var form = $(this);
            alert("event fired");

            $.ajax( {
      type: "POST",
      url: form .attr('action'),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );

       e.preventDefault(); //STOP default action
       e.unbind(); //unbind. to stop multiple form submit.
        });
});

edited Apr 25, 2014 at 5:27

answered Apr 25, 2014 at 4:35

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

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

10 Comments

Steel Nation Over a year ago

Still doesn't work... tried both the submit and click events. The event fired dialogue pops so the event is wired correctly! Just have no idea why the request fails...

Steel Nation Over a year ago

Like I said the route is definitely working because putting: localhost:54637/Apartments/Index in the url window returns the data!

Steel Nation Over a year ago

Yea it does reload afterward the alert("error") fires

Ehsan Sajjad Over a year ago

if you want to send ajax call after form data processed on server post form via ajax, bec because when form postes page reloads and clinet script will not be executed completely

Steel Nation Over a year ago

I just changed the <form> to just a <button> and it works... damn. I understand what you mean now. What is the correct way to submit data from a <form> via ajax then? Would you mind updating your answer with a sample?

|

Collectives™ on Stack Overflow

asp.net MVC responding to jQuery AJAX request

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related