모달 부스트랩이 있습니다. 내가 boostrap 모달에 대한 유효성 검사의 오류를 보여주고 싶습니다. 그러나 모델을 비워두고 제출 버튼을 클릭하면 독립형 페이지로 보입니다.모델이 유효하지 않은 경우 asp.net 코어를 사용하는 오류 메시지와 함께보기 내에서 부분보기로 돌아갑니다.
부분보기 :
@model WebApplication1.Models.Book
<form asp-controller="Home" asp-action="AddBook"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#frmaddbook">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Header of Modal</h4>
</div>
<div class="modal-body form-horizontal" id="frmaddbook ">
<span class="alert-danger">
@Html.ValidationSummary()
</span>
<div class="row">
<div class="form-group">
<label asp-for="BookName" class="col-lg-3 col-sm-3 control-label"></label>
<div class="col-lg-6">
<input asp-for="BookName" class="form-control" />
<span asp-validation-for="BookName" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="BookDescription" class="col-lg-3 col-sm-3 control-label"></label>
<div class="col-lg-6">
<input asp-for="BookDescription" class="form-control" />
<span asp-validation-for="BookDescription" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
색인보기 :
<div class="panel panel-primary">
<div class="panel-body">
<div class="btn-group">
<a class="btn btn-primary marginbutoon" id="showBookgroup" data-toggle="modal" asp-action="AddBook"
data-target="#modal-book">
<i class="glyphicon glyphicon-plus"></i>
Add Book
</a>
</div>
</div>
나는 인덱스 뷰의 상단에이 라이브러리를 사용
- -jquery.unobtrusive ajax.min.js
- jquery.validate.unobtrusive.min.js
과에서 사용 인덱스보기 하단 :
<script src="~/js/book-index.js"></script>
책하는 index.js :
(function ($) {
function Home() {
var $this = this;
function initilizeModel() {
$("#modal-book").on('loaded.bs.modal', function (e) {
}).on('hidden.bs.modal', function (e) {
$(this).removeData('bs.modal');
});
}
$this.init = function() {
initilizeModel();
}
}
$(function() {
var self = new Home();
self.init();
})
} (jQuery를))
컨트롤러 :
[HttpGet]
public IActionResult AddBook()
{
var b = new Book();
return PartialView("_AddBook", b);
}
[HttpPost]
[ValidateAntiForgeryToken]
//[HandleError]//not in core
public IActionResult AddBook(Book model)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
return PartialView("_AddBook", model);
}
모델 :
public class Book
{
[Key]
public int BookId { get; set; }
[Display(Name = "Book Name :")]
[Required(ErrorMessage = "Enter Book Name Please ")]
public string BookName { get; set; }
[Display(Name = "Book Description")]
[Required(ErrorMessage = "Enter Book Description Please ")]
public string BookDescription { get; set; }
}
내 코드는 위와 같이된다. 모달 부분 뷰에서 유효성 검사 오류를 표시하려면 어떻게해야합니까?
버튼 추가 클릭시 모달 대화 상자를 어떻게 호출합니까? 거기에 사용자 정의 코드가 있습니까? – Shyju
@Shyju 색인보기 모달보기에서 태그 a를 클릭하면. – saeed