代码之家 › 专栏 › 技术社区 › topcool

当部分视图在视图中时,如何显示部分视图模型错误?

partial-views asp.net-core-mvc asp.net-core

topcool · 技术社区 · 6 年前

我正在进行Asp.net Core 2.0项目,并且有一个 partial view 显示在 index 查看。这个 局部视图 有一个模型有一些验证错误。

你可以继续看到我的模型,局部视图,控制器和。。。

登录视图模型

public class LoginViewModel
{
    [Display(Name = "UserName")]
    [Required(AllowEmptyStrings = false, ErrorMessage = "Please Enter UserName")]
    public string UserName { get; set; }

    [Display(Name = "Password")]
    [Required(AllowEmptyStrings = false, ErrorMessage = "Please Enter Password")]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [Display(Name = "Remember Me")]
    public bool RememberMe { get; set; }
}

我用过 LoginViewModel 作为 model 在里面 _loginpartialView . 还有 asp-validation-for 每次验证后显示验证错误 input

_loginpartialView.cshtml

@model partialView.Models.LoginViewModel

    <div id="login">
        <span class="header-lastnews">Login</span>
        <div class="hr"></div>

        <form asp-controller="Account" asp-action="Login" method="post">


            <div class="form-group">
                <label asp-for="UserName" class="col-sm-4 control-label"></label>
                <div class="col-sm-8">
                    <input asp-for="UserName" class="form-control" />
                    <span asp-validation-for="UserName" class="text-danger"></span>
                </div>
            </div>


            <div class="form-group">
                <label asp-for="Password" class="col-sm-4 control-label"></label>
                <div class="col-sm-8">
                    <input asp-for="Password" class="form-control" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label asp-for="RememberMe">
                            <input asp-for="RememberMe" />
                            @Html.DisplayNameFor(m => m.RememberMe)
                        </label>
                    </div>
                </div>
            </div>

            <div class="row" style="width: 100%">
                <div class="form-group pull-left ">
                    <button type="submit" class="btn btn-success">Enter</button>
                </div>
            </div>
        </form>
    </div>

我用过 @Html.Partial 渲染和显示 局部视图 在里面 指数 当心 指数 视图位于 HomeController

Index.cshtml索引

@{
     ViewData["Title"] = "Home Page";
}

@Html.Partial("_loginpartialView")

最后这是我的 AccountController

会计主管

    [HttpPost]
    public async Task<IActionResult> Login(LoginViewModel model)
    {
        if (ModelState.IsValid)
        {
            //Success Login
            //do Something
        }
        else
        {
            //if ModelState is invalid
            return PartialView("_loginpartialView", model);
        }

        //if UserName Or Password is incorrect
        return PartialView("_loginpartialView", model);
    }

但问题是当我点击 submit 按钮在不输入输入值的情况下,将打开一个新页面并 局部视图 模型错误显示在新页面上。如何在中显示模型错误 局部视图 在同一视图中不是新页面?

1 回复 | 直到 6 年前

Tetsuya Yamamoto 6 年前

这是一个标准表单提交标记,它发送POST请求并按预期响应返回新页面:

<form asp-controller="Account" asp-action="Login" method="post">

由于要将部分视图返回到具有验证错误的同一页中,因此必须使用基于AJAX的表单。您可以将上述标准表单提交转换为基于AJAX的表单,该表单在同一主视图中返回部分视图,如下例所示:

<form id="partialform" asp-controller="Account" asp-action="Login" data-ajax="true" data-ajax-update="#partialform" data-ajax-mode="replace">
    <!-- form inner elements here -->
</form>

你应该记住的最重要的事情是:

data-ajax="true" 必须存在以确保表单接受Ajax数据。
设置 id 属性并将该ID值提供给 data-ajax-update 属性,以便AJAX回调后面的jQuery选择器能够识别它。
data-ajax-mode="replace" 设置为在AJAX之后将以前的表单元素与其内部元素一起替换 success 服务器响应的结果。

注: 表单内部元素替换为 data ajax mode=“替换” 是由 jquery.unobtrusive-ajax.js 在后台运行的脚本。