Leonardo Šoškić
Leonardo Šoškić

Reputation: 11

how to return view after using ajax call

I'm trying to load a view after an ajax call. After the ajax call my action method will return a view which is going to be loaded after the call is success. The problem is that the view does not appear at all, please help

Controller

 [HttpPost] public ActionResult Details(Guid id)
    {   

           return PartialView("Details",r.GetKupacById(id));
    }

Ajax

         $.ajax({    type: "POST",
                url: '@Url.Action(controllerName:"Home",actionName:"Details")',
                data: { "id": $(".IDKupac")[ind].value },

                success: function (data) {

                    alert('Succes!');

                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            })

View

   @model Kupac
   @{
    ViewBag.title= "Details"; 

    List<Kupac> lista = ViewBag.kupci as List<Kupac>;
    }

 <table cellpadding="0" cellspacing="0" border="0">
<tr>
    <td valign="top"><b>@Html.DisplayNameFor(model => model.Ime):</b></td>
    <td>
        @Html.DisplayFor(model => model.Prezime)
        <br />
        @Html.DisplayFor(model => model.OIB),

        <br />

    </td>
</tr>

Upvotes: 1

Views: 5175

Answers (1)

Gobind Deep Singh
Gobind Deep Singh

Reputation: 527

Alright, so let's get one thing clear: AJAX makes a HTTP Request. If you make a POST request, it will look for response data, not a page.

A page is something with HTML and CSS, whereas data is a result of a computation process that you ran in your controller.

Now coming to the solution: I understand that you need to redirect to a new page after success. There is a javascript functionality:

window.location = 'https://google.com';

The above code redirects the page to google website. use this in your success callback:

 $.ajax({    type: "POST",
            url: '@Url.Action(controllerName:"Home",actionName:"Details")',
            data: { "id": $(".IDKupac")[ind].value },

            success: function (data) {

                window.location= 'someURLOfNewPage';

            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        })

And it will redirect you.

Remember: AJAX RETURNS DATA IN BODY. Even if you send a page in reponse, It will be treated as data too. not as a page.

All the best.

Upvotes: 1

Related Questions