ASP를 사용합니다.jquery ajax를 사용한 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 submit과 함께 사용할 수 있습니까?제가 하고 있는 일은 단순히 양식을 삭제하고 제출 버튼을 클릭하면 javascript가 데이터를 수집하여 실행합니다.
$.ajax.서버 측에서
ModelState.IsValid작동합니까?검증 문제를 클라이언트에 전송하여 Im이 빌드 int 검증을 사용하는 것처럼 표시하려면 어떻게 해야 합니까?
@Html.ValidationSummary(true))?
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불러
반환된 데이터를 루프하여 반환된 키에 따라 필요에 따라 오류 메시지를 설정할 수 있습니다(내 생각에는 다음과 같습니다).$('input[name="' + err.key + '"]')입력 요소를 찾을 수 있습니다.
양식 데이터를 직렬화하여 컨트롤러 작업으로 전송해야 합니다.ASP.NET MVC가 폼 데이터를 바인드합니다.EditPostViewModel오브젝트(액션 방식 파라미터), MVC 모델바인딩 기능을 사용합니다.
클라이언트 측에서 폼을 검증할 수 있으며, 문제가 없으면 데이터를 서버로 전송합니다.그 방법은 유용할 것이다.
$(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를 통해 처리되는 방법입니다.
$.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);
}
마지막으로 에러 javascript 메서드를 Ajax Begin 폼에 추가했습니다.
@model My.Model.MyModel
@using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" }))
{
}
다음과 같이 할 수 있습니다.
(편집: 응답 대기 중임을 고려)jsondataType: '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)에 에러(ajax)를 받는 방법도 설명해드리겠습니다.하지만 당신의 경우에는 이것이 선택사항이 될 수 있습니다.
언급URL : https://stackoverflow.com/questions/14005773/use-asp-net-mvc-validation-with-jquery-ajax
'programing' 카테고리의 다른 글
| SQL 순서 위치 표기법을 사용하는 이점 (0) | 2023.03.10 |
|---|---|
| 오류: 'types'는 .ts 파일에서만 사용할 수 있습니다. - @ts-check를 사용하는 Visual Studio 코드 (0) | 2023.03.10 |
| Ajax를 통한 레일 플래시 알림 (0) | 2023.03.10 |
| 각도에서는 페이지 변경과 같은 사용자 이벤트에서 $interval을 취소하려면 어떻게 해야 합니까? (0) | 2023.03.10 |
| Next.js 글로벌 CSS는 커스텀 이외의 파일에서 Import할 수 없습니다. (0) | 2023.03.10 |