jquery ajax와 함께 ASP.NET MVC 유효성 검사를 사용 하시겠습니까?
다음과 같은 간단한 ASP.NET MVC 작업이 있습니다.
public ActionResult Edit(EditPostViewModel data)
{
}
다음 EditPostViewModel과 같은 유효성 검사 속성이 있습니다.
[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }
보기에서 나는 다음 도우미를 사용하고 있습니다.
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })
이 텍스트 상자가 유효성 검사에 배치 된 양식을 출시하면 클라이언트에서 먼저 수행 한 다음 서비스 ( ModelState.IsValid)에서 수행합니다.
이제 몇 가지 질문이 있습니다.
대신 jQuery ajax를 사용하여 사용할 수 있습니까? javascript가 데이터를 수집 한 다음을 실행하는 것
$.ajax입니다.서버 쪽이
ModelState.IsValid작동?유효성 검사 문제를 클라이언트에 다시 전달하고 빌드 int 유효성 검사 (
@Html.ValidationSummary(true))를 사용하여 Im처럼 어떤 방법은 무엇입니까?
Ajax 호출의 예 :
function SendPost(actionPath) {
$.ajax({
url: actionPath,
type: 'POST',
dataType: 'json',
data:
{
Text: $('#EditPostViewModel_Text').val(),
Title: $('#EditPostViewModel_Title').val()
},
success: function (data) {
alert('success');
},
error: function () {
alert('error');
}
});
}
편집 1 :
페이지에 포함 :
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
고객 입장에서
jQuery.validate라이브러리 사용은 설정이 매우 간단해야합니다.
Web.config파일 에서 다음 설정을 지정 하십시오.
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
뷰를 구축 할 때 다음과 같이 정의해야합니다.
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)
참고 : 유전자 양식 요소를 정의해야한다.
그런 다음 다음 라이브러리를 포함해야합니다.
<script src='@Url.Content("~/Scripts/jquery.validate.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")' type='text/javascript'></script>
클라이언트 측 유효성 검사를해야합니다.
자원
서버 측
참고 :이 라이브러리 jQuery.validation위에 추가 서버 측 유효성 검사를위한 것입니다.
아마도 이와 같은 것이 도움이 될 수 있습니다.
[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
//Save data
return Json(new { Success = true } );
}
어디 ValidateAjax속성은 다음과 같이 정의된다
public class ValidateAjaxAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (!filterContext.HttpContext.Request.IsAjaxRequest())
return;
var modelState = filterContext.Controller.ViewData.ModelState;
if (!modelState.IsValid)
{
var errorModel =
from x in modelState.Keys
where modelState[x].Errors.Count > 0
select new
{
key = x,
errors = modelState[x].Errors.
Select(y => y.ErrorMessage).
ToArray()
};
filterContext.Result = new JsonResult()
{
Data = errorModel
};
filterContext.HttpContext.Response.StatusCode =
(int) HttpStatusCode.BadRequest;
}
}
}
모든 모델 오류를 지정하는 JSON 객체를 반환하는 것입니다.
응답 예는
[{
"key":"Name",
"errors":["The Name field is required."]
},
{
"key":"Description",
"errors":["The Description field is required."]
}]
이 당신의 오류 처리에 반환되는 $.ajax호출
된 키를 반환-based으로 필요한만큼 반환 된 데이터를 반복하여 오류 메시지를 설정할 $('input[name="' + err.key + '"]')수 있습니다 (요소를 찾는 입력 입력 것과 같은 것으로 생각합니다)
해야 할 일은 양식 데이터를 작성하여 컨트롤러 작업으로 개인 것입니다. ASP.NET MVC는 EditPostViewModelMVC 모델 바인딩 기능을 사용하여 양식 데이터를 개체 (액션 메소드 매개 변수)에 바인딩합니다.
클라이언트 측에서 양식의 유효성을 검사하고 모든 것이 정상이면 데이터를 서버로 보냅니다. 이 방법이 유용 할 것입니다.valid()
$(function () {
$("#yourSubmitButtonID").click(function (e) {
e.preventDefault();
var _this = $(this);
var _form = _this.closest("form");
var isvalid = _form .valid(); // Tells whether the form is valid
if (isvalid)
{
$.post(_form.attr("action"), _form.serialize(), function (data) {
//check the result and do whatever you want
})
}
});
});
다음은 다소 간단한 해결 방법입니다.
컨트롤러에서 다음과 같이 오류를 반환합니다.
if (!ModelState.IsValid)
{
return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
}
다음은 클라이언트 펼쳐 중 일부입니다.
function displayValidationErrors(errors)
{
var $ul = $('div.validation-summary-valid.text-danger > ul');
$ul.empty();
$.each(errors, function (idx, errorMessage) {
$ul.append('<li>' + errorMessage + '</li>');
});
}
이것이 우리가 아약스를 통해 처리하는 방법입니다.
$.ajax({
cache: false,
async: true,
type: "POST",
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
var isSuccessful = (data['success']);
if (isSuccessful) {
$('#partial-container-steps').html(data['view']);
initializePage();
}
else {
var errors = data['errors'];
displayValidationErrors(errors);
}
}
});
또한 다음과 같은 방법으로 ajax를 통해 부분 뷰를 수행합니다.
var view = this.RenderRazorViewToString(partialUrl, viewModel);
return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);
RenderRazorViewToString 메서드 :
public string RenderRazorViewToString(string viewName, object model)
{
ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View,
ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}
@Andrew Burgess가 제공 한 솔루션에 더 많은 로직을 추가했습니다. 다음은 전체 솔루션입니다.
ajax 요청에 대한 오류를 가져 오는 작업 필터를 만들었습니다.
public class ValidateAjaxAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (!filterContext.HttpContext.Request.IsAjaxRequest())
return;
var modelState = filterContext.Controller.ViewData.ModelState;
if (!modelState.IsValid)
{
var errorModel =
from x in modelState.Keys
where modelState[x].Errors.Count > 0
select new
{
key = x,
errors = modelState[x].Errors.
Select(y => y.ErrorMessage).
ToArray()
};
filterContext.Result = new JsonResult()
{
Data = errorModel
};
filterContext.HttpContext.Response.StatusCode =
(int)HttpStatusCode.BadRequest;
}
}
}
내 컨트롤러 메서드에 필터를 다음과 같이 추가했습니다.
[HttpPost]
// this line is important
[ValidateAjax]
public ActionResult AddUpdateData(MyModel model)
{
return Json(new { status = (result == 1 ? true : false), message = message }, JsonRequestBehavior.AllowGet);
}
jquery 유효성 검사를위한 공통 스크립트를 추가했습니다.
function onAjaxFormError(data) {
var form = this;
var errorResponse = data.responseJSON;
$.each(errorResponse, function (index, value) {
// Element highlight
var element = $(form).find('#' + value.key);
element = element[0];
highLightError(element, 'input-validation-error');
// Error message
var validationMessageElement = $('span[data-valmsg-for="' + value.key + '"]');
validationMessageElement.removeClass('field-validation-valid');
validationMessageElement.addClass('field-validation-error');
validationMessageElement.text(value.errors[0]);
});
}
$.validator.setDefaults({
ignore: [],
highlight: highLightError,
unhighlight: unhighlightError
});
var highLightError = function(element, errorClass) {
element = $(element);
element.addClass(errorClass);
}
var unhighLightError = function(element, errorClass) {
element = $(element);
element.removeClass(errorClass);
}
마지막으로 Ajax Begin 양식에 오류 javascript 메소드를 추가했습니다.
@model My.Model.MyModel
@using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" }))
{
}
다음과 같이 할 수 있습니다.
( 편집 : 당신이 응답 json을 기다리고 있음을 고려 dataType: 'json')
.그물
public JsonResult Edit(EditPostViewModel data)
{
if(ModelState.IsValid)
{
// Save
return Json(new { Ok = true } );
}
return Json(new { Ok = false } );
}
JS :
success: function (data) {
if (data.Ok) {
alert('success');
}
else {
alert('problem');
}
},
필요한 경우 500 오류를 반환하고 이벤트 오류 (ajax)에서 오류를 가져 오는 방법을 설명 할 수도 있습니다. 그러나 귀하의 경우 이것은 옵션이 될 수 있습니다
참고 URL : https://stackoverflow.com/questions/14005773/use-asp-net-mvc-validation-with-jquery-ajax
'IT' 카테고리의 다른 글
| Java Enumeration과 Iterator의 차이점 (0) | 2020.07.22 |
|---|---|
| 메모장에서 컬러로 텍스트 복사하기 ++ (0) | 2020.07.22 |
| C # 대 Java 제네릭 (0) | 2020.07.22 |
| 부트에서 사용 가능한 텍스트 색상 클래스 (0) | 2020.07.22 |
| 팀 약력에 장치 추가 (0) | 2020.07.22 |