在布局页面上提交表单

本文关键字:提交 表单 布局 | 更新日期: 2023-09-27 18:37:10

我是 mvc 的新手。我喜欢从布局页面提交带有按钮的表单。需要以某种方式将模型传递给视图的控制器。有什么提示或想法吗?

@if (!WebSecurity.IsAuthenticated) {
<form class="navbar-form navbar-right">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Benutzername">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Passwort">
    </div>
    <input type="submit" class="btn btn-success" value="Login"/>
    <input type="submit" class="btn btn-danger" value="Registrieren" />
</form>
}
else {
    <form class="navbar-form navbar-right">
        <input type="submit" class="btn btn-danger" value="Logout">
    </form>
}

public class LoginModel
{
    [Required]
    [Display(Name = "Benutzername")]
    public string UserName { get; set; }
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Kennwort")]
    public string Password { get; set; }
    [Display(Name = "Speichern?")]
    public bool RememberMe { get; set; }
}
public class RegisterModel
{
    [Required]
    [Display(Name = "Benutzername")]
    public string UserName { get; set; }
    [Required]
    [StringLength(100, ErrorMessage = "&quote{0}&quote muss mindestens {2} Zeichen lang sein.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Kennwort")]
    public string Password { get; set; }
    [DataType(DataType.Password)]
    [Display(Name = "Kennwort bestätigen")]
    [Compare("Password", ErrorMessage = "Das Kennwort entspricht nicht dem Bestätigungskennwort.")]
    public string ConfirmPassword { get; set; }
}

在布局页面上提交表单

每个input标签的属性name绑定到Model类的属性中,因此,只需在要绑定的属性名称中添加 name 属性,例如:

<form class="navbar-form navbar-right">
    <div class="form-group">
        <input type="text" class="form-control" name="UserName" placeholder="Benutzername">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="Password" placeholder="Passwort">
    </div>
    <input type="submit" class="btn btn-success" value="Login"/>
    <input type="submit" class="btn btn-danger" value="Registrieren" />
</form>

技巧

我建议您将此代码更改为PartialView,而不是保留在Layout页面上。这很有用,因为您可以使用模型键入PartialView并使用Html帮助程序(如 Html.TextBoxFor(model => model.UserName, ...) )生成输入标记。有很多 Html 助手可以帮助你喜欢 Html.BeginForm() 方法 我在这里说的,这是一个很好的实践,但你的代码会运行良好,因为这些好的实践生成了像你这样的代码。

布局的模型必须与页面的模型相同。 因此,这不是特别实用,除非您想对所有不是良好做法的内容使用基本模型。

更好的方法是使用Html.Action()并为登录表单使用单独的控制器操作,然后它可以有自己的模型和自己的执行上下文。

几个 Partial View 怎么样? 这是一个粗略/一般的例子:

public class Login {
    public string UserName { get; set; }
    public string Password { get; set; }
}
public class Register : Login {
    public string ConfirmPassword { get; set; }
}

部分登录:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Login</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>
        <p>
            <input type="submit" value="Login" />
        </p>
    </fieldset>
}

部分用于寄存器:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Register</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.ConfirmPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>
        <p>
            <input type="submit" value="Register" />
        </p>
    </fieldset>
}

在布局(或任何其他视图)中引用部分:

@Html.Partial("LoginPartial")
@Html.Partial("RegisterPartial")