How can i use Ajax Jquery and return View?

I have an Ajax Jquery function which sends Values (location and parameters) to an IActionresult which does a search in a Database and returns a new View with the right Objectdata of a Model.

Breakpoints are showing me that it enters the Actionresult and pass the parameters correct and it runs the return View, but it doesn’t return the View. It just do nothing.

Does the Jquery Ajax expect some other data type ?

In Browser Console i can see that the Post Method ist done.

Thanks for your help.

Index.cshtml

var LatPosition;
var LongPosition;

const successCallback = (position) => {
    console.log(position);
    LongPosition = position.coords.longitude;
    LatPosition = position.coords.latitude;
    console.log(LatPosition);
}

const errorCallback = (error) => {
    console.error(error);
}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function sendAjaxRequest(element, urlToSend) {
    var clickedButton = element;
    $.ajax({
        type: "POST",
        url: urlToSend,
        dataType: "json",
        data: { 
            LongPosition: LongPosition, 
            LatPosition: LatPosition, 
            id: clickedButton.val(), 
            takeValue: $("#TabakName").val()
        },
        success: function (data) {
            alert(data);
        },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });

    }

    $(document).ready(function () {
        $('#button_1').click(function (e) {
            e.preventDefault();
            sendAjaxRequest($(this), '@Url.Action("Tabakvalidierung","Home")');
        });
    });
 
$(document).ready(function () {
    $("#TabakName").autocomplete({
     source: '@Url.Action("Search", "Tabaksuche")',

    });
});

HomeController.cs

[HttpPost]
public IActionResult Tabakvalidierung(
    string takeValue, 
    string LongPosition, 
    string LatPosition) 
{
    return  View("Shopliste", shopDatens); //returning View with right object
}      

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Change your ajax to this:

$.ajax(
            {
               
                  url: urlToSend,
                 data: { 
            LongPosition: LongPosition, 
            LatPosition: LatPosition, 
            id: clickedButton.val(), 
            takeValue: $("#TabakName").val()
        },
                
                type: "POST",
              
                success: function (result) {
                    $(div).html(result);

// div is  Id of <div>  where you have to show you partial view
                
                },
                error: function (xhr, exception) {
                    ........
                }
            });

and change your controller to this:

[HttpPost]
public IActionResult Tabakvalidierung(
    string takeValue, 
    string LongPosition, 
    string LatPosition) 
{
    return  PartialView("Shopliste", shopDatens); 

// return partial View, if you use View it will be returned with the whole Layout
}  
```

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0