我正在处理 Asp.net Core 2.0 项目,并且有一个显示在 index
View 中的 partial view
。此部分 View
的模型存在一些验证错误。
您可以继续查看我的模型、局部 View 、 Controller 和...
登录 View 模型
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; }
}
我在 _loginpartialView
中使用 LoginViewModel
作为 model
。还有 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
在 index
中呈现和显示 partial view
请注意 index
View 位于 HomeController
Index.cshtml
@{
ViewData["Title"] = "Home Page";
}
@Html.Partial("_loginpartialView")
最后这是我的 AccountController
账户 Controller
[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
和模型错误会显示在新页面上。
如何在同一 View 而不是新页面的部分 View
中显示模型错误?
最佳答案
这是一个标准的表单提交标签,它发送 POST 请求并按预期响应返回新页面:
<form asp-controller="Account" asp-action="Login" method="post">
由于您希望将部分 View 返回到具有验证错误的同一页面,因此您必须使用基于 AJAX 的表单。您可以将上面的标准表单提交转换为基于 AJAX 的表单,该表单在同一主视图中返回部分 View ,如下例所示:
<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"
设置为在 AJAXsuccess
结果来自服务器的响应后替换之前的表单元素及其内部元素。
注意: data-ajax-mode="replace"
表单内部元素替换由 jquery.unobtrusive-ajax.js
完成> 在后台运行的脚本。
关于asp.net-core - 部分 View 在 View 中时如何显示部分 View 模型错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51779944/