将表单添加到布局

Question

我需要在每个页面的标题中添加一个登录弹出窗口，所以我自然想将其作为部分视图添加到布局中。

问题是，布局没有页面模型。

我们确实使用每个页面都继承的 BasePageModel，我可以在其中添加 2 个字符串作为用户名/密码。但是布局如何看到这些字段呢？

Answer 1

您可以为布局页面指定模型，就像标准内容页面一样：

@model BasePageModel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    ...

然后可以通过布局页面的

Model

属性访问您的属性。

BasePageModel

还将传递到您添加到布局中的任何部分（除非您为部分指定不同的模型），因此您还可以访问其中的属性。

Answer 2

我需要在每个页面的标题中添加一个登录弹出窗口，所以很自然我想将其作为部分视图添加到布局中。

根据你的描述，我针对这种情况做了一个demo。但我不使用每个页面都继承的 BasePageModel。

演示如下，希望对您有帮助。

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>&nbsp;</td>
                <td><input type="submit" value="Login" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

在布局中添加登录表单。使用 name 属性：将 input type="text" asp-for="@Model.Username" 更改为 input type="text" name="Username"

<!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>&nbsp;</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">
            &copy; 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>

结果：

将表单添加到布局

问题描述投票：0回答：2

2个回答

最新问题

将表单添加到布局

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2