CODEWITHSUNDEEP
javascriptajaxasp.net-mvc
CloudyKooper
CloudyKooper

Reputation: 717

How can I get a partial view to load on button click?

I have a scenario where I’m using Ajax.ActionLink() to call and load a child view in a parent view. I have a button on the child view that calls another child view. I would like for this child view to also show on the parent view.

I could load the child view into the calling child view if I use Ajax.ActionLink and it would look as if it’s in the parent view which is fine but the button offers me more benefits including sending stuff in the beginform and checking the field before submitting.

When the user clicks on the button it sends selected data from two drowdown lists as well as other data in BeginForm like:

  @using (Html.BeginForm("Action", "Controller", new { courseID = 1001 }, FormMethod.Post, new { @id = "formName", @name = "formName" }))

However when the view returns it opens in a new window not in the parent view or the child view that called it.

How can I get the partial view to show in the child view that calls it or on the parent. Meaning parent calls child A and child A calls child B.

Upvotes: 0

Views: 78

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239460

Reason #2,343,657 why I despise the Ajax.* family of helpers. They hide functionality, such that when something doesn't work as you expect, you don't know why. Write your own AJAX; you'll never be sorry you did.

Anyways, your problem here is that Ajax.ActionLink writes JavaScript to the page that wires all this functionality up for you. You didn't write that JavaScript (and apparently didn't even know it was there), but it was there, nonetheless.

Now that you've switched to using Html.BeginForm, that JavaScript has gone away, leaving nothing but a standard HTML form, that causes a page reload on submit. If you want the same functionality, you could use Ajax.BeginForm instead. But, before you run off and do that, take the opportunity to improve your code and write the JavaScript yourself. Then, things are very explicit, and you (or another developer) never have to wonder how it works, because it's right there.

All you need to do is attach a handler to the form's submit event, serialize the form, then post it over AJAX, and then do something with the response. I'm going to use jQuery for this example because 1) AJAX is one of those things you should use some sort of framework for to avoid a bunch of repetitive boilerplate code and 2) since it comes with an MVC project by default, there's a fair chance you already have to there and available to use.

$(document).ready(function () {
    $('#YourForm').on('submit', function (e) {
        e.preventDefault();
        $.post('/url/to/post/to', $(this).serializeArray(), function (result) {
            // do something with `result`
            // For example, if `result` is a string of HTML, you can just
            // write it out to some element:
            $('#ResultDiv').html(result);
        });
    });
});

Upvotes: 1

Related Questions