blazor - 如何在 Blazor 中切换主布局?
问题描述
当用户按下包含登录名的左上角链接上的登录链接时,我试图将其存档:
但相反,我收到了这个:
换句话说:我想去一个没有主布局导航栏的页面。如何存档?
MainLayout.razor
inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<a href="/login" target="_blank" class="ml-md-auto">Login</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
登录.razor
@page "/login"
<style>
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 320px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
</style>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
</div>
<div id="register-link" class="text-right">
<a href="#" class="text-info">Register here</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@code {
}
解决方案
您可以在登录组件顶部使用设置为 EmptyLayout 的 @layout Razor 指令
@layout EmptyLayout
**... you componant..**
EmptyLayout 示例
@inherits LayoutComponentBase
<div class="main">
<div class="content px-4">
@Body
</div>
</div>
推荐阅读
- php - 根据mysql php中的日期时间更新记录
- android - @Inject lateinit 属性尚未初始化 Dagger2
- typescript - 提取泛型接口的属性类型仍然需要不必要的泛型类型
- ios - iOS 中的 Squareup 登录集成
- html - 如何使用css将列表手风琴分成两列并做出反应?
- c# - ApplicationUser 始终为空 ASP.NET CORE 3.0 标识
- base64 - 将 base64 图像字符串编码为 JSON 并使用 jq 将其解码回来
- html - 剑道是否提供像轮播这样的平移图标来平移图表?
- pagination - 带有聚合管道的mongodb缓存
- javascript - 获取 MySQL 表中满足条件的所有行的数组