C# & ASP.NET MVC : call a view with ajax call

Question

I want to call a view with an ajax call on my current view. The following is my Ajax call that calls a function of my controller.

$.ajax({
        type: 'POST',
        url: '@Url.Action("EditCertificateObservation", "Frühwarnsystem")',
        data: {
            serverName: '@Model[0].ServerName',
            name: event.data.name,
            thumbprint: event.data.thumbprint,

            expiringDateStr: event.data.expiringDate,
            isChecked: document.getElementById(store + event.data.index).checked,
            model: data,
        },
    });

This code is my controller function that returns a view to load.

[HttpPost]
public ActionResult EditCertificateObservation(string serverName, string name, string thumbprint, string expiringDateStr, bool isChecked, string model)
{
    var newModel = JsonConvert.DeserializeObject<List<Store>>(model);

    var cert = new Certificate(serverName, name, thumbprint, expiringDateStr);
    var server = new Server(serverName);
    server.FetchIdByServerName();

    if (isChecked)
    {
        cert.AddToObservation(server.Id);
    }
    else
    {
        cert.DeleteFromObservation();
    }

    return View("Index");
}

To know for you: I call the ajax call with a checkbox on my view, which is dynamically generated. If I debug the controller function get called and runs but the browser doesn't load the view I return.

If you need more information, just ask here.

Thank you for your help

question from:https://stackoverflow.com/questions/65831120/c-sharp-asp-net-mvc-call-a-view-with-ajax-call

Answer 1

If you want to open a view with after Ajax request than you just have to wait for the response of your controller then you can use success, but you can also use failure or error depend on your need, so your Ajax will be like this:

$.ajax({
    type: 'POST',
    url: '@Url.Action("EditCertificateObservation", "Frühwarnsystem")',
    data: {
        serverName: '@Model[0].ServerName',
        name: event.data.name,
        thumbprint: event.data.thumbprint,

        expiringDateStr: event.data.expiringDate,
        isChecked: document.getElementById(store + event.data.index).checked,
        model: data,
    },
        success: function (response) { 
        alert(response.message); 
        window.location.href = "/Frühwarnsystem/Index";

        // or with some parameter
        window.location.href ="/Frühwarnsystem/Index?id=" + response.counter;

        // or if you prefer with helper ...
        window.location.href = '@Url.Action("Frühwarnsystem","Index")';
        
        },
        failure: function (response) { alert("failure"); },
        error: function (response) { alert("error"); }
});

And to be a little more useful, your controller can send a Json response with some parameter for example, as follow:

[HttpPost]
public JsonResult EditCertificateObservation(string serverName, string name, string thumbprint, string expiringDateStr, bool isChecked, string model)
{
    var newModel = JsonConvert.DeserializeObject<List<Store>>(model);

    var cert = new Certificate(serverName, name, thumbprint, expiringDateStr);
    var server = new Server(serverName);
    server.FetchIdByServerName();

    if (isChecked)
    {
        cert.AddToObservation(server.Id);
    }
    else
    {
        cert.DeleteFromObservation();
    }
    // Do some condition here to send an answer ...
    string message = "";
    int counter = 0;
    var response = new { counter, message };
    return Json(response);
}