将表单添加到布局
Posted
技术标签:
【中文标题】将表单添加到布局【英文标题】：Add form to layout 【发布时间】：2022-01-12 23:51:28 【问题描述】：我需要在每个页面的头部添加一个登录弹出窗口，所以我自然想将它作为局部视图添加到布局中。
问题是，布局没有页面模型。
我们确实使用了每个页面都继承自的 BasePageModel，我可以在其中添加 2 个字符串作为用户名/密码。但是布局如何看到这些字段？
【问题讨论】：
您可以使用引导模式作为弹出窗口，并在引导模式上动态加载部分登录视图。 【参考方案1】：您可以像指定标准内容页面一样为布局页面指定模型：
@model BasePageModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
然后您的属性可以通过布局页面的Model 属性访问。 BasePageModel 也将传递给您添加到布局中的任何部分（除非您为部分指定不同的模型），因此您也可以访问其中的属性。
【讨论】：
【参考方案2】：我需要在每个页面的标题中添加一个登录弹出窗口，所以很自然 我想将它作为局部视图添加到布局中。
根据您的描述，我针对这种情况做了一个演示。但我不使用每个页面都继承自的 BasePageModel。
下面的demo，希望对你有帮助。
1.添加登录页面，页面模型，post方法
登录.cshtml.cs：
public class LoginModel : PageModel
[BindProperty]
public string Username get; set;
[BindProperty]
public string Password get; set;
public string Msg get; set;
public void OnGet()
public IActionResult OnPost(string Username, string Password)
//do your other things...
return Page();
登录.cshtml：
@page
@model Login.Pages.LoginModel
@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
<h3>Login Form</h3>
@Model.Msg
<form method="post" asp-page="Login">
<table>
<tr>
<td>Username</td>
<td><input type="text" asp-for="@Model.Username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" asp-for="@Model.Password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
-
在布局中添加登录表单。使用名称属性：将 input type="text" asp-for="@Model.Username" 更改为 input type="text" name= “用户名”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button"
class="btn btn-sm btn-default pull-left col-lg-11 button button4">
login
</button>
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form method="post" asp-page="Login">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Username</td>
<td><input type="text" name="Username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="Password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - Login - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<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>
@await RenderSectionAsync("Scripts", required: false)
<script type="text/javascript">
$(document).ready(function ()
$("#btnShowModal").click(function ()
$("#loginModal").modal('show');
);
$("#btnHideModal").click(function ()
$("#loginModal").modal('hide');
);
);
</script>
</body>
</html>
结果：
【讨论】：
以上是关于将表单添加到布局的主要内容，如果未能解决你的问题，请参考以下文章