How to make login details after login success with form below

Question

I work on razor page on asp.net core 7 I need to make form or box with details of users success as below

but I don't know what is name of box have user details

I pass data after login success by following

@TempData["UserId"]

@TempData["UserName"]

@TempData["Company"]

@TempData["Branch"]

@TempData["Env"]

so how to generate box with details as below :

Answer 1

This is all done with JavaScript. You will want to use a library either popper or floating ui

https://popper.js.org/docs/v2/

https://floating-ui.com/docs/tutorial

most likely you will use a hover event to trigger the pop up. Your razor page will render the html for the pop up content. If using popper, probably a html template that JavaScript extracts, or the pop up body if floating ui

Answer 2

Hi @Ahmed Salah Abed Elaziz

You can refer to the following steps and sample:

In _Layout.cshtml page, add the following CSS and JS reference (Boostrap Icons and popper) and JavaScript scripts:

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    @*bootstrap icon reference*@
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <script src="~/lib/jquery/dist/jquery.min.js"></script>     
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>     
    <script src="~/js/site.js" asp-append-version="true"></script>     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>    
    @await RenderSectionAsync("Scripts", required: false)
    <script> 
        $(function () { 
            $("[data-toggle=popover]").popover({
                html: true,
                content: function () {
                    var content = $(this).attr("data-popover-content");
                    return $(content).children(".popover-body").html();
                },
                title: function () {
                    var title = $(this).attr("data-popover-content");
                    return $(title).children(".popover-heading").html();
                }
            });

        });
    </script>

Then, in the _LoginPartial.cshtml partial view:

<ul class="navbar-nav">
@if (SignInManager.IsSignedIn(User))
{
    <li class="nav-item">
            <span class="nav-link text-dark" title="Manage">Hello @User.Identity?.Name!
                <!-- Popover #1 -->
                <a data-html="true" data-placement="top" data-popover-content="#a1" data-toggle="popover"
                   data-trigger="focus" href="#" tabindex="0"><i class="bi-person-circle"></i></a> 
            </span>
    </li>
}
else
{
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
    </li>
}
</ul>

<!-- Content for Popover #1 -->
<div class="hidden d-none" id="a1">
    <div class="popover-heading">
        Hi @TempData["UserName"]
    </div>

    <div class="popover-body container"> 
        <div class="row">
            <div class="col-5">
                UserName:
            </div>
            <div class="col-7">
                @TempData["UserName"]
            </div>
        </div>
        <div class="row">
            <div class="col-5">
                Company:
            </div>
            <div class="col-7">
                @TempData["Company"]
            </div>
        </div> 
        <div class="row">
            <div class="col-5">
                Branch:
            </div>
            <div class="col-7">
                @TempData["Branch"]
            </div>
        </div>
    </div>
</div> 

And in the Index page, set the TempData value:

        public void OnGet()
        {
            TempData["UserId"] = "ADC4589044";
            TempData["UserName"] = "ADC";
            TempData["Company"] = "UNION CO_OPERATIVE SOCIETY";
            TempData["Branch"] = "AL AWEER";
            TempData["Env"] ="PY";
        }

After running the application and login success, the result as below:

You can change the popover body to add the required property based on your requirement. Note: please pay attention to the Tempdata lifetime.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion