如何将登录表单移动到导航栏

问题描述 投票:0回答:1

我目前正在处理一个我一直试图通过“边做边学”来解决的问题,但是我没有得到任何地方,几乎处于不知所措的边缘,让它以我知道它运作的方式运行。

它现在的工作方式:目前我已经从asp.net中折叠了整个身份区域,登录和注册都在不同的视图中运行

我想要它的方式:登录应放在导航栏中,但为此我需要模型粘贴用户名和密码。如果我在_LoginPartial中使用模型,则注册不起作用。目前我可以使用表单将登录表单移动到导航栏并正常登录/注销,但是我不再允许注册,因为它想要我的注册页面的loginmodel。

如果需要,我可以添加其他代码,但它们或多或少是默认的折叠类。

_LoginPartial

@inject SignInManager<User> SignInManager
@inject UserManager<User> UserManager
@using Microsoft.AspNetCore.Identity
@using TVScreenViewer.Models.Identity
@model TVScreenViewer.Areas.Identity.Pages.Account.LoginModel

@if (SignInManager.IsSignedIn(User))
{
    <form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new {area = ""})" method="post" id="logoutForm" class="navbar-nav navbar-right">
        <ul class="navbar-nav navbar-right">
            <li class="nav-item">
                <a class="nav-link" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserAsync(User).Result.Name!</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                    <a class="dropdown-item" href="#">Settings</a>
                    <div class="dropdown-divider"></div>
                    <button type="submit" class="btn btn-secondary btn-block" style="padding: 4px 24px; text-align: left;">Logout</button>
                </div>
            </li>
        </ul>
    </form>
}
else
{
    <form asp-area="Identity" asp-page="/Account/Login" method="post" class="navbar-nav navbar-right">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="row">
            <div style="margin: 0rem 1rem">
                <input class="form-control form-control-sm" asp-for="Input.Username"/>
                <span asp-validation-for="Input.Username" class="text-danger"></span>
            </div>
            <div>
                <input class="form-control form-control-sm" asp-for="Input.Password"/>
                <span asp-validation-for="Input.Password" class="text-danger"></span>
            </div>
            <div style="margin: 0rem 1rem">
                <button type="submit" class="btn btn-primary btn-sm">Log in</button>
            </div>
        </div>
    </form>

    @*<a asp-area="Identity" asp-page="/Account/Login">Login</a>*@
    <a asp-area="Identity" asp-page="/Account/Register">Register</a>
}

@section Scripts {
    <partial name="_ValidationScriptsPartial"/>
}
c# asp.net .net model-view-controller
1个回答
-1
投票

寻找用户界面:

这是bootstrap 3中的一个示例,它是您需要的登录表单:https://getbootstrap.com/docs/3.4/examples/jumbotron/

另一个在v4中是一个搜索栏:https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/

你可以检查元素:enter image description here

并复制这部分(根据版本,它可能会有所不同enter image description here

编码(实际问题)

登录它自己不是特别的你可以使用旧的html表单,或MVC beginForm并设置动作将数据发送到帐户页面...身份验证执行服务器,服务器分配cookie,所以只要有效您将数据发送到服务器。你需要两个输入,具体取决于你的型号,可以是用户名和密码,

还有这些:asp-pageasp-for ......对我来说是新手,我不记得在任何地方看到它们,确保你使用@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })类rezor支持的字段,或<input name=""> html输入与name属性

这也是微软在.NetBased MVC上的默认表格:

@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

用于登录的默认Microsoft代码

注意我注意到你正在使用Core MVC,因为这行@using Microsoft.AspNetCore.Identity,它的模板可能与.netframwork模板不同,但概念应该是相同的

@using OpenAndDelete.Models
@model LoginViewModel
@{
    ViewBag.Title = "Log in";
}

<h2>@ViewBag.Title.</h2>
<div class="row">
    <div class="col-md-8">
        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                <h4>Use a local account to log in.</h4>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <div class="checkbox">
                            @Html.CheckBoxFor(m => m.RememberMe)
                            @Html.LabelFor(m => m.RememberMe)
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Log in" class="btn btn-default" />
                    </div>
                </div>
                <p>
                    @Html.ActionLink("Register as a new user", "Register")
                </p>
                @* Enable this once you have account confirmation enabled for password reset functionality
                    <p>
                        @Html.ActionLink("Forgot your password?", "ForgotPassword")
                    </p>*@
            }
        </section>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm">
            @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })
        </section>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
© www.soinside.com 2019 - 2024. All rights reserved.