Using Jquery ajax to call ActionResult method in Controller and return data

Question

I'm trying to understand how the Jquery Ajax methods works. Right now, I have some problems calling the ActionResult method in the controller that will return a PartialView.

Have created an button which I will use to get new data in from the server (Ajax call should run)

Code: (ActionResult in Home controller)

public ActionResult All()
    {
        List<Student> model = db.Students.ToList();

        return PartialView("_Student", model);
    }

This method is the one I'm trying to call when I press the button in the main Index view.

Code: (Index view)

<div class="row">
<div class="small-12 column sbw-travel">
    <h2>Travel</h2>

    <div class="row">
        <div class="small-12 columns">
            <button id="button1" class="sbw-travel-button">Search</button>
        </div>
    </div>

    <div class="small-12 sbw-travel-box" id="rooms">

    </div>
</div>
</div>

When the user hit the button, an Ajax call should run, and the list will appear in the section with id=rooms.

Script: (Ajax code)

 $(document).ready(function () {
    $('#button1').click(function () {
        $.ajax({
            type: 'GET',
            url: @Url.Action("All", "Home"),
            datatype: "html",
            success: function () { 
                $('#rooms').html(???);
            }
        });
        return false;
    });
});

Can any of you see if I have forgot something to make this run like I have described?

P. Frank · Accepted Answer · 2015-10-18 18:28:18Z

7

The result is on the succes event. Try:

$(document).ready(function () {
$('#button1').click(function () {
    $.ajax({
        type: 'GET',
        url: @Url.Action("All", "Home"),
        datatype: "html",
        success: function (data) { 
            $('#rooms').html(data);
        }
    });
    return false;
}); });

answered Oct 18, 2015 at 18:28

P. Frank

5,7456 gold badges25 silver badges52 bronze badges

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

2 Comments

Mikkel Over a year ago

So far nothing happens.. if i debug, I'm getting an error: Invalid flags supplied to RegExp constructor 'All', but not sure what it means yet.

P. Frank Over a year ago

You are invalid character on your response data. You should escape strings and put them to quotes

Community · Accepted Answer · 2017-05-23 12:15:19Z

0

I would suggest loading firebug when you click the button (enable the console), make sure the requested URI is responding with valid HTML data on the click event.

I also generally find using something like:

$('#button1').on('click', function () { ...

usually yields better results, see here: Difference between .on('click') vs .click()

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Oct 18, 2015 at 18:32

hughjidette

1367 bronze badges

Collectives™ on Stack Overflow

Using Jquery ajax to call ActionResult method in Controller and return data

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related