MVC3 Razor Ajax Form Prześlij

Question

używam MVC3 Helper do generowania mojego formularza Ajax tak:

@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()"}); 
      } 

ja po prostu nie znaleźć właściwą drogę, aby wysłać formularz na razie zmiany wyboru. Nie chcę, aby moi użytkownicy klikali przycisk przesyłania.

Funkcja HTMLAttribute działa, ale po zmianie następuje żądanie odświeżenia zamiast żądania ajax.

Czy ktoś zna odpowiedź?

Answer 1

Najpierw utwórz przycisk przesyłania w formularzu i ukryj go, ustawiając atrybut style="display:none;". Wtedy, zamiast korzystania this.form.submit() w onChange razie użyć następujących:

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

To powołać się na jquery.unobtrusive-ajax.js skryptu, a następnie wypełnij swój złożenie Ajax.

Answer 2

Formularze są klasycznym sposobem wysyłania zgłoszeń - dlatego jest to POST - konfiguracja GET jest anulowana przez to w onChange - przesyła zawsze wyczyści zawartość i zastąpi ją treścią serwera - robię trochę javascriptu do wysłania za pomocą AJAX - tego nie widzę, więc zakładam, że to właśnie robi. Twój OnChange powinien wykonać tę funkcję AJAX zamiast ...

Answer 3

Co z wykorzystaniem jQuery do wywołania? Jak w tej odpowiedzi How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

Używanie .change() zdarzenia zamiast .Kliknij() jQuery część imprezy będzie wyglądać mniej więcej tak:

$(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"}); 
} 

Jest całkowicie niesprawdzone kod więc uważaj literówek:)

Answer 4

to może pomóc

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

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

Answer 5

Hmm, co rzeczywiście pracował dla mnie, nawet na telefonach komórkowych, co było problemem, obszar był następujący, w moim pliku cshtml o częściowym widokiem. Zawiera również kod, aby wyszarzyć przycisk i napisać "Zapisywanie ...", dopóki widok nie zwróci uwagi, co pozwoli uniknąć uderzenia przycisku "Prześlij", gdy będą się niecierpliwić na wolne serwery SQL.

<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 

i

<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>