CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Strax Tillbaka
Strax Tillbaka

Reputation: 83

Displaying a different view from an ajax call

I have a Test view that displays a table of checkboxes from which the user selects one or more tests to run.

I want these tests run in a different view so that I can display errors and warnings for each test run.

Inside the Test view, I'm making an ajax call to the RunTest controller:

        var testsToRun = [];

        // Enumerate Test checkboxes
        var chk = document.getElementsByName('test');
        var len = chk.length;

        for (var i = 0; i < len; i++) {
            if (chk[i].type === 'checkbox'
            && chk[i].checked) {
                var test = new Object();
                test.Action = chk[i].id;
                testsToRun.push(test);
            }
        }

        if (testsToRun.length > 0) {
            $.ajax({
                url: "@Url.Action("Index", "RunTest")",
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ 'testsToRun': testsToRun}),
                cache: false,
                success: function (result) {
                },
                error: function (result) {
                }
            });
        }

This all works. My RunTests controller's Index method is called as expected.

The RunTests controller's Index method then returns a RunTest view:

    public ActionResult Index(List<Test>testsToRun)
    {
        return View("~/Views/RunTest.cshtml");
    }

I've set a breakpoint on the return statement and my code gets there, but the RunTest view is never displayed. My Test view continues to be the view displayed.

I've looked into things like the RedirectToAction methods, but nothing seems to work as I'm probably not even looking in the right area.

Upvotes: 0

Views: 481

Answers (1)

blgt
blgt

Reputation: 8205

You're attempting to use jQuery's $.ajax method without doing anything in the callbacks. It doesn't have an equivalent to a plain html POST form's target= attribute; instead, you should handle it in the success and/or error callback, for example:

success: function(data, status, jqXHR) {
    $(myContainer).html(data);
}

More info available in the documentation.

Ps. I believe a return View(...'s return type should be dataType: "html" rather than dataType: "json" but I could be wrong.

Pps. Consider using the short-hand post as it's a lot more readable

Upvotes: 1

Related Questions