How to make login details after login success with form below

Ahmed Salah Abed Elaziz 390 Reputation points
2023-06-03T10:00:50.41+00:00

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 :

2023-06-01 13 18 18

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,385 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,496 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,411 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 61,266 Reputation points
    2023-06-03T20:20:02.4166667+00:00

    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

    0 comments No comments

  2. Zhi Lv - MSFT 32,096 Reputation points Microsoft Vendor
    2023-06-08T08:49:12.9233333+00:00

    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:

    image2

    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

    0 comments No comments