Asp.net core 当局部视图位于视图中时，如何显示局部视图模型错误？

我正在从事Asp.net Core 2.0项目，有一个

部分视图

，显示在

索引

视图中。此

局部视图

的模型存在一些验证错误

您可以继续查看我的模型、局部视图、控制器和

LoginViewModel

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; }
}

@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>

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

@Html.Partial("_loginpartialView")

我在

\u loginpartialView

中使用了

loginView模型

作为

模型

。还有

asp验证

，用于在每次

输入后显示验证错误

\u loginpartialView.cshtml

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; }
}

@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>

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

@Html.Partial("_loginpartialView")

最后这是我的

AccountController

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);
    }

[HttpPost]
公共异步任务登录（LoginViewModel模型）
{
if（ModelState.IsValid）
{
//成功登录
//做点什么
}
其他的
{
//如果ModelState无效
返回PartialView（“loginpartialView”，模型）；
}
//如果用户名或密码不正确
返回PartialView（“loginpartialView”，模型）；
}

但问题是，当我单击

submit

按钮而不输入输入值时，会打开一个新页面，

partial view

和模型错误会显示在新页面上。

---

如何在同一视图中显示

部分视图中的模型错误而不是新页面？
这是一个标准表单提交标签，它发送POST请求并按预期的响应返回新页面：

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



由于您希望将部分视图返回到带有验证错误的同一页面中，所以必须使用基于AJAX的表单。您可以将上述标准表单submit转换为基于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值提供给
dataajaxupdate
属性，以便ajax回调后面的jQuery选择器能够识别它

data ajax mode=“replace”
设置为在ajax
success
result从服务器响应后，将上一个表单元素及其内部元素一起替换

注意：用
data ajax mode=“replace”
替换表单内部元素是由
jquery完成的。不引人注目的ajax.js
脚本在后台运行。
听起来，当发生验证错误时，您需要使用ajax POST而不是标准表单POST来返回主视图中的部分视图（
创建标准的POST表单，而不是AJAX表单）。@TetsuyaYamamoto您能给我介绍一下好的教程或示例代码吗？尝试将
data AJAX=“true”data AJAX method=“POST”data AJAX mode=“replace”data AJAX update=“#formID”
添加到部分视图的表单中（您应该使用表单ID来更新表单内容）.此AJAX表单不是创建新的分部，它只是用从服务器获取的新响应替换现有分部视图。