MVC3カミソリAjaxのフォームは、私はこのように私のAjaxフォームを生成するMVC3ヘルパーを使用

Question

を送信：私はちょうどチェックボックスの変更イベントでフォームを提出する適切な方法を見つけることができません

@using (Ajax.BeginForm("Attended", "Lesson", new AjaxOptions 
       { 
        HttpMethod = "GET", 
        InsertionMode = InsertionMode.InsertAfter, 
        UpdateTargetId = "mdl" + item.ID 
       })) 
      { 
       @Html.HiddenFor(modelItem => item.ID); 
       @Html.CheckBox("Attended", item.Attended, new { OnChange = "javascript:this.form.submit()"}); 
      } 

。 私はユーザーに[送信]ボタンをクリックさせたくありません。

HTMLAttributeは機能しますが、変更に応じて、ajaxリクエストの代わりにポストバックが発生します。

答えを知っている人はいますか？

Answer 1

まずフォーム内に送信ボタンを作成し、属性をstyle="display:none;"に設定して非表示にします。その後、代わりにあなたのonchangeイベントでthis.form.submit()を使用するには、次を使用します。

$(this).parents('form:first').find(':submit')[0].click(); 

これはjquery.unobtrusive-ajax.jsスクリプトを呼び出して、あなたのAjaxの提出を完了します。

Answer 2

フォームはリクエストを送信する古典的な方法です - したがってPOSTはGET設定がonChangeの設定によって無効になります - 送信は常にコンテンツを消去し、サーバーコンテンツに置き換えられます - 私はAJAXを使用して送信するいくつかのjavascriptを行います - それを見ることができないので、私はそれがまさにそれをすると推測します。あなたのOnChangeは、このAJAX関数を代わりに実行する必要があります...

Answer 3

提出をトリガするためにjQueryを使用するとどうなりますか？この回答.changeを（使用How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

）の代わりに.click（）イベントのイベントでjQueryの一部は、このようなものになりますように：

$(function() { 
    $('form#ajaxForm').find('input.submit').change(function() { 
     $('form#ajaxForm').trigger('submit'); 
    }); 
} 
@using (Ajax.BeginForm("Attended", "Lesson", new { id = Model.Id }, new AjaxOptions 
     { 
      HttpMethod = "GET", 
      InsertionMode = InsertionMode.InsertAfter, 
      UpdateTargetId = "mdl" + item.ID 
     }, new { id = "ajaxForm" })) 
{ 
    @Html.HiddenFor(modelItem => item.ID); 
    @Html.CheckBox("Attended", item.Attended, new { @class = "submit"}); 
} 

をこれには、タイプミスの用心完全にテストされていないコードは次のとおりです。 ）

Answer 4

これは

@Html.CheckBox("Attended", item.Attended, new { OnChange = "submitForm"}); 

function submitForm(e) 
{ 
    document.forms[0].submit(); 
} 

Answer 5

を助けるかもしれない問題領域だった実際にも、携帯電話上で、私のために働い何うーんは、部分図のための私のCSHTMLファイルで、次のようでした。また、ボタンがグレー表示され、ビューがポストバックするまで「保存中...」と書かれたコードが含まれているため、SQL Serverが遅い場合に送信ボタンを押すことを避けることができます。

<div id="myFutureDayEdit"> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("#submitFutureDayEditVisibleButton").click(function() { 
       $(this).prop('disabled', true); 
       $("#myUserMessage").html("Saving..."); 
       $("#myUserMessage").show(); 
       document.getElementById("submitFutureDayEditHiddenButton").click(); 
      }); 
     }); 

    </script> 
    @Html.ValidationSummary(true) 
    @using (Ajax.BeginForm("SaveFutureDayEdit", "Member", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myFutureDayEdit" })) 
{ ... bla bla bla 

と

<input id="submitFutureDayEditVisibleButton" type="button" value="Save Changes" /> 
    <input id="submitFutureDayEditHiddenButton" style="display:none;" type="submit" value="SC" /> 

     <div id="myUserMessage">  
      @if (Model.UserMessage != null) 
      { @Model.UserMessage } 
     </div> 

    <input type="hidden" id="bUnsavedChanges" name="bUnsavedChanges" value="false" /> 
} 
</div> 

<div id="hahuloading"> 
    <div id="hahuloadingcontent"> 
     <p id="hahuloadingspinner"> 
      Saving... 
     </p> 
    </div> 
</div>