在 asp.net 核心 MVC 中的部分視圖上顯示驗證消息
[英]Show validation messages on partial views in asp.net core MVC
問題描述
為了在多選列表上顯示驗證，我有以下 model
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace AccountManagementUI.Models
{
public class NewMembersAddViewModel
{
public string GroupId { get; set; }
public string GroupName { get; set; }
public List<SelectListItem> membersList { get; set; }
[Required(ErrorMessage ="Please select atlast 1 employee")]
public List<Guid> selectedMembersId { get; set; }
}
}
我的 Controller 后置方法如下：
[HttpPost]
public IActionResult GetNewMembers(NewMembersAddViewModel groupMemberData)
{
if (ModelState.IsValid)
{
AddMembersToGroup addMembersToGroup = new AddMembersToGroup();
addMembersToGroup.GroupId = groupMemberData.GroupId;
foreach (var memberId in groupMemberData.selectedMembersId)
{
addMembersToGroup.UserIds.Add(memberId.ToString());
}
_gateway.AddMembersToGroup(addMembersToGroup);
return RedirectToAction("GroupMembers", "Group", new { groupId = groupMemberData.GroupId });
}
else
{
return PartialView("_GetNewMembers", groupMemberData);
}
}
我的看法如下：
@model AccountManagementUI.Models.NewMembersAddViewModel
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Active Directory Management Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- Latest compiled and minified CSS -->
<!-- Pagelevel Initializations Of Plugins -->
</head>
<body>
<form class="console-panel grid-stack-item-content" asp-action="GetNewMembers" asp-controller="Group" method="post">
<input type="hidden" asp-for="GroupId" />
<input type="hidden" asp-for="GroupName" />
<div class="console-panel-body pl-0 pr-0">
<div class="console-form-body ">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="form-group row">
<label class="col-2 col-form-label">Members</label>
<div class="col-10">
<select asp-for="selectedMembersId" asp-items="Model.membersList" multiple="multiple" placeholder="Select Members" onchange="console.log($(this).children(':selected').length)" class="search-box form-control">
</select>
<span asp-validation-for="selectedMembersId" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="console-footer">
<button class="btn btn-sm btn-info" type="submit">Submit</button>
<a id="addMembersCancel" class="btn btn-sm btn-secondary" onclick="AddNewMembersCancel()">Cancel</a>
</div>
</form>
<script>
$('.search-box').SumoSelect({ csvDispCount: 3, search: true, searchText: 'Enter here.' });
</script>
<script>
function AddNewMembersCancel() {
$('#addNewMemberModal').modal('hide');
}
</script>
</body>
</html>
我已經驗證了選擇至少一個成員，但是當我單擊提交按鈕而不選擇成員時，它會重定向到新頁面並在那里顯示消息。 單擊提交時，我想在同一個局部視圖上顯示消息嗎？
3 個解決方案
解決方案1
0 2020-08-17 05:44:25
您需要添加驗證腳本jquery.validate.min.js和jquery.validate.unobtrusive.min.js 。
共享文件夾中的部分視圖 _ValidationScriptsPartial.cshtml 可以添加到您的視圖中：
<partial name="_ValidationScriptsPartial" />
解決方案2
0 2020-08-17 07:33:30
你有一個帶有submit按鈕的<form>元素，默認情況下會導致你的頁面在submit時重新加載。
為了在單擊提交時在同一頁面上顯示錯誤，您需要防止表單的默認行為。
首先，您需要在form元素上添加某種id 。 假設id是new-members-form 。
<form id="new-members-form" class="console-panel grid-stack-item-content" asp-action="GetNewMembers" asp-controller="Group" method="post">
...
</form>
然后，您需要 select 表單並告訴它停止執行表單提交時的默認行為。
使用 JQuery：
$("new-members-form").on("submit", (event) => { event.preventDefault(); });
或者普通的 JS：
document.getElementById("new-members-form").addEventListener("submit", function(event) {
event.preventDefault();
});
解決方案3
0 2020-08-17 08:31:01
第一次查看或添加失敗時，記得設置memberList 。
controller的代碼：
//Members to SelectListItem
public IList<SelectListItem> GetMembers()
{
var members = new List<Member>
{
new Member {Id = Guid.NewGuid(), Name = "Ada"},
new Member {Id = Guid.NewGuid(), Name = "Brain"},
new Member {Id = Guid.NewGuid(), Name = "Cater"},
};
var memberListItem = members
.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() })
.ToList();
return memberListItem;
}
[Route("/members")]
public IActionResult _GetNewMembers()
{
var model = new NewMembersAddViewModel {
membersList = GetMembers()
};
return View(model);
}
[Route("/api/Group/GetNewMembers")]
[HttpPost]
public IActionResult GetNewMembers(NewMembersAddViewModel groupMemberData)
{
if (ModelState.IsValid)
{
//Success
return RedirectToAction("GroupMembers", "Group", new { groupId = groupMemberData.GroupId });
}
else
{
//when failed, set the memberList again.
groupMemberData.membersList = GetMembers();
return PartialView("_GetNewMembers", groupMemberData);
}
}
視圖代碼和你一樣。
當 ASP.NET MVC 中的 Model.isvalid 為 false 時，如何將驗證消息重定向並顯示回部分視圖
[英]How to redirect and show validation messages back to a partial view when Model.isvalid is false in ASP.NET MVC
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.