locked
Need Help using a Modal as a login option in all pages in website RRS feed

  • Question

  • User-1880744392 posted

    Getting this error:  The model item passed into the ViewDataDictionary is of type 'TroydonFitnessWebsite.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'TroydonFitnessWebsite.Pages.Account.LoginModel'.

    when I am attempting to use the @model in my partial page that I am inserting into the layout, it seems it is trying to use the same model even when i nav to other pages and im guessing this clash is causing the issue

    I am trying to make my login option using a pop up Modal globally accessible in my website. If there is a way around this would be great, otherwise it seems I may have to just make the modal login option only available in my Index page, and for other webpages make some kind of redirect to a main login page but that seems kind of off... either that or maybe make every single model inherit from the main index page if possible and i dont know if it will use extra resources that way.

    Here is my partial:

    @using Microsoft.AspNetCore.Identity
    @using TroydonFitnessWebsite.Areas.Identity.Data
    @model IndexModel @* The culprit *@
    
    @inject SignInManager<TroydonFitnessWebsiteUser> SignInManager
    @inject UserManager<TroydonFitnessWebsiteUser> UserManager
    
    .......
                                <div class="dropdown-right  mr-auto" style="display: inline-flex">
                                    <div class="search-container">
                                        <form action="/Search.cshtml">
                                            <input type="search" placeholder="Search.." name="search" class="hidden search-input">
                                        </form>
                                        <button type="submit"><i class="fa fa-search"></i></button>
    
                                        @if (SignInManager.IsSignedIn(User))
                                        {
                                            // Always display the logout option and greeting when logged in
                                            <a id="manage" class="nav-link text-light" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
                                            <form id="logoutForm" class="dropdown-item nav-link text-light" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/Index", new { area = "" })">
                                                <button id="logout" type="submit" class=" btn-danger  text-light">Logout</button>
                                            </form>
                                        }
                                        else
                                        {
                                            <button type="submit" id="myBtn">User Login <i class="fa fa-user"></i></button>
                                        }
    
                                        <button><i class="fa fa-shopping-cart"></i></button>
                                    </div>
           -----
    <!-- login modal -->
    <div id="myModal" class="modal">
        @* Add this here for now, can look into mods if required *@
    
        <!-- Modal content -->
        <div id="modal-content">
            <div id="modal-header">
                <span class="close">&times;</span>
                <h2>Login to user</h2>
            </div>
    
            <form id="account" method="post">
                <hr />
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="modal-body">
                    <h5>Use a local account to log in.</h5>
    
                    <label asp-for="Input.Email"></label>
                    <input asp-for="Input.Email" class="login" />
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
    
                    <label asp-for="Input.Password"></label>
                    <input asp-for="Input.Password" class="password" />
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
    
                    <div class="checkbox">
                        <label asp-for="Input.RememberMe">
                            <input asp-for="Input.RememberMe" />
                            @Html.DisplayNameFor(m => m.Input.RememberMe)
                        </label>
                    </div>
                </div>
                <div id="modal-footer">
    
                    <div class="credentials">
                        <button type="submit" class="btn btn-primary">Log in</button>
                        <h4><a class="nav-link text-light" asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">SignUp</a></h4>
                    </div>
                    <p>Forgotten Password? Click <a id="forgot-password" asp-page="./ForgotPassword">here</a> to reset password.</p>
                </div>
            </form>
        </div>
    </div>
    
    @section Scripts {
        <partial name="_ValidationScriptsPartial" />
    }
    

    Then i put it into my layout file with <partial name="_LoginPartial" />

    Monday, June 8, 2020 10:09 AM

Answers

  • User475983607 posted

    Pretty simple.  Do not create a strongly type partial page.  Create a basic HTML login form without tag or html helpers.

    Also, the is an ASP.NET Core question but you posted it in an ASP.NET Web Page support forum.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 8, 2020 10:45 AM

All replies

  • User475983607 posted

    Pretty simple.  Do not create a strongly type partial page.  Create a basic HTML login form without tag or html helpers.

    Also, the is an ASP.NET Core question but you posted it in an ASP.NET Web Page support forum.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 8, 2020 10:45 AM
  • User-1880744392 posted

    Pretty simple.  Do not create a strongly type partial page.  Create a basic HTML login form without tag or html helpers.

    Also, the is an ASP.NET Core question but you posted it in an ASP.NET Web Page support forum.

    Hmm true, this is my first own custom login app im making so I am not too familiar with this, seems like I might need to learn a bit too be able to implement the same level on this as the security from the strongly typed scaffolded code. I guess this answers my question anyhow.

    Monday, June 8, 2020 11:37 AM
  • User475983607 posted

    seems like I might need to learn a bit too be able to implement the same level on this as the security from the strongly typed scaffolded code.

    You tied the partial model to an IndexPage class which does not make sense.   Also, the code shown does not look like a partial at all.  It looks like you created an IndexPage but maybe return the page as a partial?

    You can generate HTML anyway you like.   Using a strong type helps with model binding by keeping the inputs names and input parameters names consistent.  Plus scaffolding comes into play.  But, still many novice developer mess this up anyway.  IMHO, it is more important to understand HTTP and how the framework handlers HTTP.

    Monday, June 8, 2020 11:54 AM
  • User-1880744392 posted

    TroydonAnabolic

    seems like I might need to learn a bit too be able to implement the same level on this as the security from the strongly typed scaffolded code.

    You tied the partial model to an IndexPage class which does not make sense.   Also, the code shown does not look like a partial at all.  It looks like you created an IndexPage but maybe return the page as a partial?

    You can generate HTML anyway you like.   Using a strong type helps with model binding by keeping the inputs names and input parameters names consistent.  Plus scaffolding comes into play.  But, still many novice developer mess this up anyway.  IMHO, it is more important to understand HTTP and how the framework handlers HTTP.

    True, it was originally supposed to tie to the Login class but it kept giving me a dictionary error or something, seemed like adding the login pagemodel into the root index page model was the only way to get passed that error.

    Apologies, I should have mentioned that the code under where it says <!-- login modal --> is all on the index.cshtml page..

    Got it, will focus on how HTTP works.

    Monday, June 8, 2020 1:28 PM