jQuery UI 대화 상자 내에서 양식이 실행되는 경우 서버 측 유효성 검사 오류를 어떻게 처리합니까?

Question

사용자가 양식을 게시 한 후 컨트롤러에 다음 코드가 있지만 유효성 검사가 실패하면 (_applicationValidator.validate) 일반적으로 "편집"보기를 다시로드하지만이 경우 대화 상자를 열어두고 간단히 오류를 표시하려고합니다. 대화 상자.

컨트롤러 코드 :

  [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Update(ApplicationUpdater applicationUpdater_)
    {
        if (_applicationValidator.Validate(applicationUpdater_, ModelState, ValueProvider))
        {
            _repo.UpdateApplication(applicationUpdater_);
            ApplicationsViewModel vm = new ApplicationsViewModel();
            vm.Applications = _repo.GetApplications();
            return View("Index", vm);
        }
        else
        {
            ApplicationViewModel vm = GetApplicationVM();
            return View("Edit", vm);
        }
    }

코드보기 (jQuery)

 $(".showEditPopup").click(function() {
            $.post("Applications/ShowEdit",
                { recnum: $(this).parents('tr:first').attr("recnum") },
                function(htmlResult) {
                    $("#EditUserControlDiv").remove();
                    $("#container").append(htmlResult);
                    $("#container select[multiple]").asmSelect();
                    $("#EditUserControlDiv").dialog(
                    {
                        height: 675,
                        width: 650,
                        modal: true
                    }
                    );
                }
           );
        });

Answer 1

말했듯이

그러나이 경우 대화를 열고 싶습니다 대화 상자 내부에 이러한 오류를 표시합니다

확인.

대화 상자를 열면해야합니다

• 이전 오류 메시지를 숨 깁니다

...

open: function(event, ui) {
    $(".error").css("display", "none");
}

대화 버튼을 클릭 한 후에는해야합니다

• jQuery UI를 비활성화합니다
• "로드 ..."이미지를 보여줍니다
• 양식을 보내십시오

...

$("#loading").css("display", "block");

panel.dialog("disable");

panel.dialog("option", "disabled", true);

응답이로드 된 후 (JSON을 응답으로 사용할 수 있음)

• 오류가 있는지 확인하십시오.

...

// var response plays the role of JSON response

var response = {
    "errors":[
        {
            "property-name":"name",
            "error":"Name is required"
        },
        {
            "property-name":"age",
            "error":""
        }
    ]
};

var hasErrors = false;

for(var i = 0; i < response.errors.length; i++) {
    if(response.errors[i].error != "") {
         hasErrors = true;

         $("#" + response.errors[i]["property-name"] + "-error")
           .text(response.errors[i]["error"])
           .css("display", "block");
    }
}

if(!hasErrors) {
    panel.dialog("close");

    alert("success form!");
} else {
    panel.dialog("enable");

    panel.dialog("option", "disabled", false);
}

여기 당신은 실제로 볼 수 있습니다

기본 동작이 있습니다. 따라서 외부 기능 안에 넣을 수 있습니다

Answer 2

가장 편리함 :

• 모든 입력 요소를 비활성화합니다
• Ajax 게시물을 작성하십시오 Update 기능
• UI에서 서버 응답을 처리하십시오. 예를 들어 jQuery UI 양식을 닫거나 검증 오류를 표시합니다.

---

당신의 변화 Update 기능을 반환하는 기능 :

return new { Succeeded = false, ValidationMessages = new [] { "Incorrect username" } };

$.post(/* postdata */, function(resp) {
     if(resp.Succeeded) //close jQuery UI dialog
     else {
         for(var i = 0; i < resp.ValidationMessages; i++) alert(resp.ValidationMessages[i]));
     }
});

모든 입력/TextArea 등을 쿼리하여 사후 데이터를 구축 할 수 있습니다. 요소를 배열로 저장합니다.

var data = [];    
$('input').each(function() {
    data.push([ $(this).id, $(this).val() ]);
});

Answer 3

당신은 사용할 수 있습니다 jQuery 형태 Ajax 버전의 편집 양식을 작성하려면 플러그인 :

$(".showEditPopup").click(function() {
            function popDialog(htmlResult) {
                $("#EditUserControlDiv").remove();
                $("#container").append(htmlResult);
                $("#container form").ajaxForm(function(result) {
                  // There may be an easier way (like testing for a 
                  // certain string in the result)
                  // to detect the need to "repop"
                  if ($(result).find('form').length) {
                    popDialog(result);
                  } else {
                    $("#EditUserControlDiv").dialog('close'); // or remove
                  }
                });
                $("#container select[multiple]").asmSelect();
                $("#EditUserControlDiv").dialog(
                {
                    height: 675,
                    width: 650,
                    modal: true
                }
                );
            }

        $.post("Applications/ShowEdit",
            { recnum: $(this).parents('tr:first').attr("recnum") },
            function(result) { popDialog(result); }
       );
    });