2010-07-27 3 views
2

jqModal을 사용하여 새 제품을 추가하기위한 간단한 양식을 만들고 싶습니다.
jqModal 및 ASP.NET MVC

보기/홈/Index.aspx :

<script type="text/javascript"> 
     $(document).ready(function() { 

      $('#addProductControlSection').jqm({ modal: true, 
       ajax: '<%: Url.Action("AddProduct", "Home") %>', 
       onHide: myAddClose 
      }); 

      function myAddClose(hash) { 
       hash.w.fadeOut('1000', function() { hash.o.remove(); }); 
      } 

     }); 
    </script> 

    // rest of the code... 

<a href="#" class="jqModal">Add product</a> 

<div id="addProductControlSection" class="jqmWindow"> 

</div> 

HomeController는 :

public ActionResult AddProduct() 
{ 
    return View(); 
} 

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult AddProduct(Product product) 
{ 
    if(!ModelState.IsValid) 
    { 
     // how to show an error? 
    } 

    _productRepository.Save(product); 
    // how to display 'success' or something... 
} 

나는 검증을 구현하는 방법을 모르겠어요. 사용자가 Product.Price에 대해 잘못된 값을 입력하고 저장 버튼을 클릭하면 양식을 닫지 않습니다. 정상보기에서 유효성 검사 요약을 사용할 때와 같은 오류 메시지를 표시하고 싶습니다.

고맙습니다!

답변

0

jQuery validation plugin을 보거나 MVC Model Validation을 사용하여 JS를 자동 생성하십시오. 모달 대화 상자에 있다는 사실은 이러한 기술에 영향을 미치지 않아야합니다.

+0

모달 대화 상자에서 저장 버튼을 클릭하면 if (! ModelState.IsValid)를 입력하고 돌아 오는보기 ("AddProduct", 제품)가 호출됩니다. 그 후에는 모달 대화 상자가 닫히고이를 방지하려고합니다. –

+0

제출 버튼 관련 ... 'MicrosoftAjax.js'및 'MicrosoftMvcAjax.js'스크립트를 포함하는 것을 잊었습니다. –