2012-03-06 4 views
1

私はMVCアプリケーションでPartialViewを持っていますが、ModelStateにエラーがあれば私のビューを返します。 _Layoutサイト​​には、私がpartaiビューで使用する多くのjavascript(jQuery、JQuery.validate、...)参照があります。ここで コード: Javascriptが提出:Partial View via AjaxすべてのJavascriptリファレンスが壊れています

$(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 { 
      // ... 
     } 
    } 

コントローラー:AJAX経由

[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が負荷された場合はすべての私のJavascriptが壊れています。 2番目のajaxは提出されません。それは普通の投稿です。したがって、部分情報はレイアウト情報なしでレンダリングされます。すべてのjavascriptの参照が見つからないようです。 DOMやその他のものをリフレッシュする方法はありますか?私はPartailViewのすべてのJavaScriptを持っている必要がありますか?このための正しい方法は何ですか?

よろしく

+0

を読まないイベントを、結合しliveすることができますそれはうまく動作しないということです。おそらく、_ViewStart.cshtmlにJavaScriptを置くことができますか?確信はないけど。 – Kenci

+0

また、別のファイルでjavascriptを開いてレイアウトファイルを含まない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が見つからない、ビューがajax経由でロードされた後 – Dominic

+0

本当ですか? Partial Viewで簡単なjQueryスクリプトを試して、動作するかどうかをテストしてください。そうでない場合は、スクリプトの構文をチェックする必要があります。 – midishero

0

問題は、ページが初めて読み込まれたときに送信イベントをフォームにバインドすることです。 ajaxを介してフォームをリロードするときは、新しいフォームに送信イベントを再バインドする必要があります。

あなたはまた、javascriptのレイアウトファイルであり、そして、あなたのビューにこれを送信しない、私の場合は、一度だけ

$("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

関連する問題