My problem is that I want to enable an html element in master page layout after login, but I can't

Question

That is all my code. My problem is that I want to enable an html element in master page layout afer login. But I can't.

<li>
    <a href="@Href("~/Admin/")" id="btn_admin">Admin</a>
</li>

I am giving id here. It's loading when I run. In the script section, I write this

document.getElementById('btn_admin').style.display = "none";   

and Within sign button,after clicking it, I want to show admin That following code is in same script in master page.

 $(document).ready(function () {
            $("#btn_submit").click(function () {
                var user = {};
                user.Email = $('#username').val();
                user.Password = $('#password').val();
                $.ajax({
                    url: 'https://localhost:44300/api/auth/Login',
                    type: 'POST',
                    data: user,
                    success: function (response) {
                        console.log(response);
                        if (response.Succeeded) {
                            $.cookie('UserId', response.UserId, { expires: 7, path: '/' });
                            $.cookie('Token', response.Token, { expires: 7, path: '/' });
                            //$("#btnLogin").fadeOut();
                            document.getElementById('btnLogin').style.display = "none";
                            document.getElementById('btn_admin').style.display = "block";
                            window.location.href = '/Home';

                        }
                        else {
                            alert(response.Message);
                        }
                        // setCookie("UserId", response.UserId);
                        //setCookie("Token", response.Token);

                    },
                    error: function () {
                        console.log('Error in Operation');
                    }
                });
            });

Answer 1

after clicking it, I want to show admin

You are successfully doing that here:

document.getElementById('btn_admin').style.display = "block";

However, the very next thing you do is redirect the user:

window.location.href = '/Home';

So any change made to the state of the page is of course going to be lost when the user navigates to another page. After all, how would one expect the link to still be visible when the user is no longer on that page?

Taking a step back conceptually, it sounds like what you want can be described as:

On the master layout, if the user is currently logged in, show the "admin" link.

That's server-side logic, not client-side logic. Presumably (hopefully) somewhere in the server-side logic at https://localhost:44300/api/auth/Login you set some way of tracking the user. ASP.NET MVC has built-in authentication and authorization function, so I'll assume you're using that or a reasonable alternative. In that case, in the layout view you might do something like this:

@if (Request.IsAuthenticated) {
    <li>
        <a href="@Href("~/Admin/")" id="btn_admin">Admin</a>
    </li>
}

If you're using roles, you might even do something like this:

@if (Request.IsAuthenticated) {
    @if (User.IsInRole("Admin")) {
        <li>
            <a href="@Href("~/Admin/")" id="btn_admin">Admin</a>
        </li>
    }
}

This way you don't even need to bother with hiding the link client-side:

document.getElementById('btn_admin').style.display = "none";

(Which, incidentally, is not a security measure. I'm going to assume you didn't think it was, but for completeness here any future readers should absolutely be aware that hiding a link does nothing to stop a user from visiting a page.)

Since the user is navigating from page to page, the server-side code is going to be re-invoked on each page load anyway. So in this case that's really the ideal place to put these conditions which check for authorization before displaying page content.