asp.net mvc3 jquery UI 대화 상자 및 클라이언트 유효성 검사

Question

asp.net mvc3 응용 프로그램에서 클라이언트 유효성 검사에 문제가 있습니다.

내 코드는 같습니다

function loadEditCategoryDialog(categoryId) { 
    $.ajax({ 
     url : "/rovastamp3/Admin/CategoryEditDialog", 
     data : "categoryId="+categoryId, 
     success : function(data){ 
      $("#popup_dialog").html(data); 
      $("#popup_dialog").dialog({   
       modal: true, 
       draggable: false, 
       resizable: false, 
       title: "Upravit kategorii", 
       width: 600, 
       height: 500, 
      });        
     } 
    }); 
} 

컨트롤러 :

[HttpGet] 
public ActionResult CategoryEditDialog(int categoryId) 
{ 
    CategoryEditViewModel categoryEditViewModel = new CategoryEditViewModel(); 
    categoryEditViewModel.Category = _postAuctionCategoryRepo.Query() 
     .SingleOrDefault(x => x.Id == categoryId); 

    return PartialView(categoryEditViewModel); 
} 

[HttpPost] 
public ActionResult CreateNewCategory(CategoryEditViewModel categoryEditViewModel) 
{ 
    if (ModelState.IsValid) 
    { 
     return RedirectToAction("Index"); 
    } 
    return View("CategoryEditDialog", categoryEditViewModel); 
} 

그리고 마지막으로 내 부분보기 : 내 Web.config의에서

@model Rovastamp.MVC3.ViewModels.AdminController.CategoryEditViewModel 
<h2>Upravit kategorii @Model.Category.Name</h2> 
@{Html.EnableClientValidation();} 
@using (Html.BeginForm("CreateNewCategory", "Admin")) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Objednávkový formulář</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Category.Name) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.Category.Name) 
      @Html.ValidationMessageFor(model => model.Category.Name) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Category.Position) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.Category.Position) 
      @Html.ValidationMessageFor(model => model.Category.Position) 
     </div> 

     <input type="submit" value="Upravit" class="submit_button" />    
    </fieldset> 
} 

내가 UnobtrusiveJavaScript 및 ClientValidatin 응용 프로그램 설정에 설정 .

jquery UI 대화 상자의 제출 단추를 클릭하면 mvc가 클라이언트 유효성 검사없이 완전 새로 고침을 수행합니까?

어디에 문제가 있습니까? 어떤 도움

덕분에

는 편집 :

• -jquery.unobtrusive은 ajax.js
• jquery.validate.js
: 내 레이아웃 페이지에서
내가이 스크립트를 포함
• jquery.validate.unobtrusive.js

내 exemaple에서편집 2

은 내가 넣어 :

내가 JQuery와 UI 대화와 클라이언트 유효성 검사를 호출하기 전에

jQuery.validator.unobtrusive.parse('#popup_dialog'); 

가 완벽하게 작동합니다.

Answer 1

그것은이다 PartialView는 jquery.validator.unobstrusive 라이브러리에 의해 이미 구문 분석 된 뷰에 포함됩니다. 삽입 된 PartialView 유효성 검사 속성을 고려하여 페이지를 다시 구문 분석하도록 라이브러리에 지시해야합니다. 주제에 내 this blog post을 읽으면 귀하의 질문에 대한 답변을 얻을 수 있습니다.

Answer 2

클라이언트 측 유효성 검사를위한 적절한 JavaScript 파일을 포함하고 있습니까?

확인 당신이 제출 동작을 실행 자바 스크립트 콘솔, 그게 자바 스크립트 아웃 에러 다음 폼의 기본 동작은에서 발로되어 제출의 원인이 오류가 발생 내기. 당신이로드되기 때문에

Answer 3

이 문제로 어려움을 겪었습니다. 몇 시간 후 jQuery는 양식 요소 외부에서 DIALOG HTML 요소를 렌더링한다고 결론을 내 렸습니다. jQuery 이후.

$('#dialogDivId').dialog({ 
     autoOpen: false, 
     width: 500, 
     height: 500, 
     minheight: options.minheight, 
     minwidth: options.minwidth, 
     modal:false, 
     open: function (type, data) { 
      $(this).appendTo($('form')); // reinsert the dialog to the form 
     } // And Solve your validation inside Jquery dialog 
}); 

Answer 4

또한 같은 당신의 제출 버튼을 배선하기 : 검증 플러그인 양식 범위 내에서,이 다음 open 이벤트 처리를 수행 할 수있는 대화 상자를 다시 반환 할 필요가 만 FORM 요소 내에서 작동 그래서

$("#SubmitButton").click(function(){ 
    if (!$("#editForm").valid()){ 
     return false; 
    } 
     }); 

당신은 기본 생성자를 사용하여 나를 위해 작동하지 않았다, 구문 분석하는 특정 HTML 양식에 필요합니다.

$.validator.unobtrusive.parse("#editForm"); 

난 당신이 내가 방법을 찾을 경우 여기를 게시 할 예정입니다 각 각 양식에 버튼을 제출 묶을 필요가 없도록하는 방법을 알아 내려고 노력하고 있어요.