2012-03-06 3 views
1

ModelState에 오류가있는 경우 내 View를 반환하는 My MVC Appliction의 PartialView가 있습니다. _Layout 사이트에는 partai 뷰에서 사용하는 많은 javascript (jQuery, JQuery.validate, ...) 참조가 있습니다. 여기 코드 : 자바 스크립트 제출Partial View via Ajax 모든 자바 스크립트 참조가 깨졌습니다.

$(function() { 
$('form').submit(function (e) { 
    e.preventDefault(); 
    if ($('form').valid()) { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       if (!result.Success) { 
        $('#formcontent').html(result); // Show PartailView with Validationmessages 
       } 
       else { 
       } 
      } 
     }); 
    } 
}); 

});

상위 사이트 :

<div id="formcontent" class="tc-form"> 
    @{ Html.RenderPartial("_ConfigurationPartial", Model); } 
</div> 

부분보기 :

컨트롤러

@model SettingsViewModel 
@{ Layout = null; } 
@using(Html.BeginForm()) 
{ 
    @Html.ValidationSummary(false, SystemStrings.ValidationSummaryMessage) 
    <ol class="last"> 
     <li class="row"> 
      @Html.LabelFor(m => m.PasswordMinimumLength) 
      @Html.EditorFor(m => m.PasswordMinimumLength) 
      @Html.ValidationMessageFor(m => m.PasswordMinimumLength, "*") 
     </li> 
     <li class="row"> 
      @Html.LabelFor(m => m.PasswordNeverExpires) 
      @Html.EditorFor(m => m.PasswordNeverExpires) 
      @Html.ValidationMessageFor(m => m.PasswordNeverExpires, "*") 
     </li> 
     <li class="row"> 
      @Html.LabelFor(m => m.PasswordExpirationValue) 
      @Html.EditorFor(m => m.PasswordExpirationValue) 
      @Html.ValidationMessageFor(m => m.PasswordExpirationValue, "*") 
      @Html.EditorFor(m => m.PasswordExpirationUnit) 
      @Html.ValidationMessageFor(m => m.PasswordExpirationUnit, "*") 
     </li> 
    </ol> 
    <div class="tc-form-button"> 
     <input type="submit" value="Save" title="Save" class="t-button t-state-default" /> 
     @Html.ActionLink("Cancel", "Configuration", "System", null, new { @class = "t-button" }) 
    </div> 
} 

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $('#PasswordNeverExpires').change(function() { 
      setState($(this).is(':checked')); 
     }); 
    }); 

    function setState(isDisabled) { 
     if (isDisabled) { 
      // ... 
     } 
     else { 
      // ... 
     } 
    } 
:

[HttpPost] 
    public ActionResult Configuration(SettingsViewModel model) 
    { 
     if(!ModelState.IsValid) 
     { 
      this.PopulateViewData(); 
      return PartialView("_ConfigurationPartial", model); 
     } 
     else 
     { 
      // ... do save 
      return Json(new { Success = true }, JsonRequestBehavior.AllowGet); 
     } 
    } 

partialView 아약스 내 모든 자바 스크립트를 통해 부하 인 경우가 끊어집니다. 두 번째 아약스 제출이 없다, 그것은 일반적인 게시물입니다. 따라서 부분 정보는 레이아웃 정보없이 렌더링됩니다. 그것은 모든 자바 스크립트 참조를 찾을 수없는 것 같습니다. DOM이나 다른 것을 새로 고칠 방법이 있습니까? PartailView의 모든 자바 스크립트가 있어야하나요? 이것에 대한 올바른 방법은 무엇입니까?

감사

+0

을 읽을 수행 이벤트를 바인딩 live 수 있고, 당신이 당신의보기에이를 전송하지 않습니다 내 그것이 작동하지 않을 것이라는 점을 짐작하십시오. 아마도 _ViewStart.cshtml에 자바 스크립트를 넣을 수 있습니까? 그러나 확실하지 않습니다. – Kenci

+0

아니면 레이아웃 파일을 포함하지 않는 partialview에서 자바 스크립트를 별도의 파일로 참조 할 수 있습니다. – Kenci

+0

jquery 스크립트 태그는 어디에 있습니까? – jrummell

답변

0

를이 코드는 외부 부분적인 전망이다

jQuery(document).ready(function() { 
     if($('#PasswordNeverExpires').val()!=oldvalue){ 
      //your scripts put here. 
     } 
    }); 

위의 코드는 테스트되지 않았습니다하지만 그것은해야한다 :

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    var oldvalue=$('#PasswordNeverExpires').val(); 
    $('#PasswordNeverExpires').change(function(){ 
     oldvalue=$(this).val(); 
    }) 
}); 
</script> 

가 그럼 난 조금 PartialView에 코드를 변경 작업.

+0

변경 기능이 올바르게 작동합니다. 그러나 참조 된 모든 scipt 파일 (jQuery는 _Layout.cshtml에 의해 참조 됨)은 손실됩니다. 따라서 jQuery는 아약스를 통해 뷰를로드 한 후에 찾을 수 없습니다. – Dominic

+0

정말요? Partial View에서 작동하는지 여부를 테스트하기 위해 간단한 jQuery 스크립트를 사용해보십시오. 그렇지 않은 경우 스크립트의 구문을 확인해야합니다. – midishero

0

문제는 처음으로 페이지를로드 할 때 전송 이벤트를 양식에 바인딩한다는 것입니다. ajax를 통해 양식을 다시로드 할 때 제출 양식을 새 양식으로 다시 바인딩해야합니다.

당신은 또한 당신이 자바 스크립트가 레이아웃 파일에있는 경우 한 번만

$("form").live("submit", function(e) { 
    e.preventDefault(); 
    if ($('form').valid()) { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function(result) { 
       if (!result.Success) { 
        $('#formcontent').html(result); // Show PartailView with Validationmessages 
       } 
       else {} 
      } 
     }); 
    } 

}); 

here

관련 문제