Page is not redirecting to the view after successful call of a Jquery Ajay method

Question

I am using Jquery ajax method to call a controller from a view. The controller action method is successfully called, it retrieves data from the database and displaying the data in the respective view, but at the end the view is not generating its showing the same view.

Here is my Jquery code to call the action method.

<script type="text/javascript">
        $(document).ready(function () {
            $('#btn_Search').click(function (e) {
                var category = $("#ddl_Category option:selected").text();
                var location = $('#txtSource').val();
                $.ajax({
                    url: "/Classified/GlobalSearch",
                    type: 'GET',
                    data: { searchcategory: category, Location: location },

                    success: function (data) {
                        alert("Hi");
                    },
                });
            });

     });
</script>

It called to this action method.

public ActionResult GlobalSearch(string searchcategory,string Location)
{
   //Connect to db and fetch data in form of List
   return View(list);
}

At the end the data is setting in Global search view also. But the view is not coming.

To check the success of the call I have put a hi message:

Can anyone please suggest me what need to change?

I think this post [Return view after ajax post to controller](https://stackoverflow.com/questions/47231259/return-view-after-ajax-post-to-controller) may help you. — JRamirez1992, Dec 11 '18 at 17:37
no it will throw error as the data i am passing will be null. — Debendra Dash, Dec 11 '18 at 17:38
If you want to refresh the page, it doesn't really make sense to use an ajax call. If you *don't* want to refresh the page, but return view content, you should be using `return PartialView();` — wahwahwah, Dec 11 '18 at 17:39
Is the issue that you're not returning data? Or, is it the redirect? It's sort of unclear from your question and comments what the actual problem is. Could you please clarify? — wahwahwah, Dec 11 '18 at 17:45
[Take a look at this post](https://stackoverflow.com/questions/39523270/call-controller-method-which-return-view-with-ajax-call-from-asp-net-view-page). Is there any particular reason why you are using ajax? — wahwahwah, Dec 11 '18 at 18:48
The whole point of ajax is to _not_ redirect your user to a different page. If you want to redirect your user, use a normal form post and redirect the user from the server side. — Heretic Monkey, Dec 11 '18 at 19:45

score 0 · Answer 1 · edited Dec 11 '18 at 18:44

0

Try this:

$.ajax({
url: "/Classified/GlobalSearch",
type: 'GET',
data: { searchcategory: category, Location: location },
success: function (data) {
    alert("Hi");
    window.location.href = "/page/xyz"; // Try this line after alert.
},
});

edited Dec 11 '18 at 18:44

Blackbam

17,496
26
97
150

answered Dec 11 '18 at 17:28

Rehan Shah

1,505
12
28

no it will throw error as the data i am passing will be null. – Debendra Dash Dec 11 '18 at 17:39

score 0 · Answer 2 · answered Dec 12 '18 at 01:11

As @HereticMonkey mentioned before, the AJAX callback intended to stay in the same page by loading partial views. If you want redirect to another page from client-side script, it is necessary to use location.href assigned with intended URL string, without using AJAX at all:

$(document).ready(function () {
    $('#btn_Search').click(function (e) {
        var category = $("#ddl_Category option:selected").text();
        var location = $('#txtSource').val();

        window.location.href = '@Url.Action("GlobalSearch", "Classified")' + '?searchcategory=' + category + '&Location=' + location;
    });
});

Another way to do redirection is using normal form submit (with POST method) and use RedirectToAction containing route parameters from server-side variables:

// POST controller action example

string category = "somecategory";
string location = "somelocation";

return RedirectToAction("GlobalSearch", "Classified", new { searchcategory = category, Location = location });

But if you want to load partial view on the same page with AJAX, just replace return View() with return PartialView():

public ActionResult GlobalSearch(string searchcategory, string Location)
{
   //Connect to db and fetch data in form of List
   return PartialView(list);
}

Then use html() function to display partial view contents into target HTML element:

$('#btn_Search').click(function (e) {
    var category = $("#ddl_Category option:selected").text();
    var location = $('#txtSource').val();
    $.ajax({
        url: "/Classified/GlobalSearch",
        type: 'GET',
        data: { searchcategory: category, Location: location },

        success: function (data) {
            alert("Hi");
            $('#targetElement').html(data); // show partial view content to target element
        },
        // other stuff
    });
});

Page is not redirecting to the view after successful call of a Jquery Ajay method

2 Answers2