Controller code is executed but nothing happens

Question

After much research without results I come here to ask you. The project is in MVC 5 using C#.

This is the code that calls a MVC controller

$('#btnPesquisa').click(function () {
    var textAPesquisar = $("#txtTermoDePesquisa").val();
    $.ajax({
           url: "/Pensamento/Pesquisar",
           type: 'POST',
           contentType: "application/json; charset=utf-8",
           data: '{termoAPesquisar:' + JSON.stringify(textAPesquisar) + '}',
           async: false
    });
});

When I debug I see that the controller receives the value and even redirects me to the Home Index and in this controller everything happens as it should, however in the browser the page does not change, everything is the same.

[HttpPost]
public ActionResult Pesquisar(string termoAPesquisar)
{
   return RedirectToAction("Index", "Home", new {query = termoAPesquisar });
}    

If I call the Home Index manually, through the browser’s address bar, everything happens as it should.

How is it possible for code to be executed and nothing happens?

Answer 1

You’re making some trouble there.

First, you are using Ajax to do a normal search. However, you are not doing anything with it. As your return is a RedirectToAction(), Ajax doesn’t know what to do.

For your problem, there are some simple solutions, among them only a redirec via javascript even (there is no need for this Ajax and this redirect), in this way:

$('#btnPesquisa').click(function () {
    var textAPesquisar = $("#txtTermoDePesquisa").val();
    window.location.href = '@Url.Action("Index", "Home")?query=' + textAPesquisar;
});

Note that your POST to /Pensamento/Pesquisar no longer exists. That’s because you do nothing but Redirect, so I see no need for it.

Now, there’s the way I recommend it to be done, which is using a GET form instead of javascript. It would be something like this:

@using (Html.BeginForm("Index", "Home", FormMethod.Get, new { @class = "search" }))
{
    <div>
        <input name="query" value="" type="search" id="txtTermoDePesquisa"/>
        <input type="submit" value="Pesquisar" id="btnPesquisa"/>
    </div>
}

If you want to understand more about the subject, this question has a doubt very similar to its.

Answer 2

This code snippet performs an asynchronous request to your Controller:

 $.ajax({
           url: "/Pensamento/Pesquisar",
           type: 'POST',
           contentType: "application/json; charset=utf-8",
           data: '{termoAPesquisar:' + JSON.stringify(textAPesquisar) + '}',
           async: false
    });

And for being an asynchronous requisition, you Controller processes this request but you are not doing anything with its result. For this, you need to add to the code the callback responsible for treating this return:

$.ajax({
           url: "/Pensamento/Pesquisar",
           type: 'POST',
           contentType: "application/json; charset=utf-8",
           data: '{termoAPesquisar:' + JSON.stringify(textAPesquisar) + '}',
           async: false,

           success: function(data){
               console.log(data);
           }
    });

However, I believe what you really want is to redirect your page according to the text typed in the element #txtTermoDePesquisa. If this is the case, update the question with the used HTML that I update the answer with what you need for it to happen without using ajax.

Below is a way to post a form to your controller method;

@using (Html.BeginForm("Pesquisar", "Pensamento", FormMethod.POST))
{
        <input value="" type="text" name="termoAPesquisar" id="txtTermoDePesquisa" />
        <input type="submit" value="Pesquisar"/>
}