Call an action inside different Controller/Action using Ajax C#

Question

I have _layout file what I want to show on different pages of my project

_layout.cshtml

<html>
xxxxx
</html>

my _layout has a navigation bar I decided to create a partialView to be able to show that navigation bar using another controller different from my "home" controller

NavegationController

public class NavBarController : Controller
{
    // GET: NavBar
   [ChildActionOnly]
    public PartialViewResult BarraNavegacion()
    {
        return PartialView("~/Views/Shared/_navbar.cshtml");
    }

    [HttpPost]
    public string LogOut(string data)
    {
        FormsAuthentication.SignOut();
        return "bye";
    }
}

In my _layout I added the following line:

@{Html.RenderAction("BarraNavegacion", "NavBar");}

So far everything works, the navigation bar is displayed well

My navbar has a log out button, so I tried to implement the LogOut method using ajax

script Log out

//Boton salir
    $('.salirUsuario').click(function() {

        console.log("salio");

        $.ajax({
            url: 'LogOut',
            method: "POST",
            data: { data: "xx" },
            async: false,
            dataType: "json",
            success: function (json) {

                window.location.href = '@Url.Action("Login","Login")';
            }
        });

but received the following console error

jquery-3.4.1.min.js:2 POST http://localhost:9887/Home/LogOut 404 (Not Found)

I know The application tries to find the method/Action "LogOut" in "Home" (which is the view where I am at the moment), but how do I go to NavBar / LogOut of the controller that I created called NavBar and not go to "Home "or any other view where I am at time?

I think you are missing out on the point. Your partial view has nothing to do with your action methods and how you implement them. As long as your routes are correctly defined, you can use AJAX to call any action method of any controller and process your logic there. Technically you would call your `Logout` method of the `Home` controller and based on your logic, you can send back the logout status and do the appropriate redirects on your `View`. You should also read this answer for more information: https://stackoverflow.com/questions/10253769/using-childactiononly-in-mvc — Rahul Sharma, Sep 17 '19 at 05:39

Russell Jonakin · Accepted Answer · 2019-09-17T06:50:54.403

The LogOut action you are wanting to Post to is on your NavBarController, but in your current AJAX function the asp.net MVC framework will try to find the LogOut route on the default controller path, which is your "Home" controller because you are setting your AJAX URL property to url: 'LogOut'. You need to be more specific about the route location in your URL.

For Razor page javascript:

Your AJAX Url needs to include your controller path, so you can do something like this if this javascript is in a razorpage (.cshtml) file:

    $.ajax({
        url: '@Url.Content("~/NavBar/LogOut")',
        method: "POST",
        data: { data: "xx" },
        async: false,
        dataType: "json",
        success: function (json) {

            window.location.href = '@Url.Action("Login","Login")';
        }
    });

For referenced javascript file:

If your javascript code is in a separate javascript file that is referenced, then you can make a variable in your Layout page for your application's base URL path, and then you can use that variable in any included javascript file as long as you declare that variable in your layout page before adding any script tags to reference javascript files.

layout page file first script tag could be:

<script type="text/javascript">
    var baseApplicationPath = '@Url.Content("~/")';
</script>

then if your AJAX is in another referenced javascript file, you could do something like this wherever needed:

    $.ajax({
        url: baseApplicationPath + 'NavBar/LogOut',
        method: "POST",
        data: { data: "xx" },
        async: false,
        dataType: "json",
        success: function (json) {
            window.location.href = baseApplicationPath + 'Login/Login';
        }
    });

Nijin P J · Answer 2 · 2019-09-17T06:32:05.590

You can add the following line if you want to include the navbar for few views like

@Html.Partial("~/Views/Controller/View.cshtml", model)

Suppose you want to use it in the master layout page, add the above in _layout.chtml and you can call the below codes for rendering the master layout

@{
Layout = "~/Views/Shared/_layout.cshtml";
}

and for logout just do the following script

 $('.salirUsuario').click(function() {
      window.location.href = '/NavBar/LogOut';          
 });

Call an action inside different Controller/Action using Ajax C#

2 Answers2