Uncaught ReferenceError - calling a JavaScript function from a Razor v

I am trying to call a function but I am getting - Uncaught ReferenceError: SetNavStateToX not defined.

@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")

<div class="my-user-index">
    @switch (@Session["NavState"])
    {
        case "Exists":
            <p>Welcome back <span class="my-username">@Session["UserName"]</span>.</p>
            <p>I hope you are back because you enjoy the forum and blog and what it has to offer.</p>

            @* NOTE: this one works fine. *@
            @*<script type="text/javascript">
              $.post("UserProfile/SetSessionVar", { variable: "NavState" });
            </script>*@
        
            <script type="text/javascript">
                SetNavStateToX();
            </script>

            break;

        default:
            break;
    }
</div>

<script type="text/javascript">
    function SetNavStateToX() {
         $.ajax({
            type: 'POST',
            url: '@Url.Action("SetSessionVar", "UserProfile")',
            data: { variable: "NavState" },
            success: function () {
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Critical Error: something is wrong in the call to SetNavStateToXStatus: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
            }
        })
    }
</script>