Question

我正在研究Asp.net Core 2.0项目，并且在partial view视图中显示了index。这个partial view的模型带有一些验证错误。

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

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

我在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在partial view中渲染和显示index 请注意index视图位于HomeController

内部

Index.cshtml

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

但是问题是，当我在不输入输入值的情况下单击submit按钮时，会打开一个新页面，并且在新页面上显示partial view和模型错误。如何在同一视图（而非新页面）中的partial view中显示模型错误？

Answer 1

这是一个标准的表单提交标签，它发送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="replace"替换表单内部元素是由在后台运行的jquery.unobtrusive-ajax.js脚本完成的。

当局部视图出现在视图中时，如何显示局部视图模型错误？

1 个答案: