MVC3 Razor Formulario de envíos Ajax

Question

utilizo el MVC3 ayudante para generar mi forma Ajax como esto:

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

Simplemente no encuentro la forma correcta para enviar el formulario en el evento de cambio de la casilla de verificación. No quiero que mis usuarios hagan clic en el botón de enviar.

El HTMLAttribute funciona, pero en el cambio se produce una devolución de datos en lugar de una solicitud de AJAX.

¿Alguien sabe la respuesta?

Answer 1

Primero, crea un botón de enviar dentro de tu formulario y escóndelo configurando el atributo style="display:none;". Entonces, en lugar de utilizar this.form.submit() en su evento onchange, utilice la siguiente:

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

Esto invocará el guión jquery.unobtrusive-ajax.js, y complete su presentación Ajax.

Answer 2

Los formularios son la forma clásica de enviar una solicitud; por lo tanto, es POST; su configuración de GET es anulada por eso en onChange; los envíos siempre borrarán el contenido y se reemplazarán por contenido de servidor; haré javascript para enviarlo mediante AJAX. no puedo ver eso, así que supongo que hace exactamente eso. su OnChange debería ejecutar esta función AJAX en su lugar ...

Answer 3

¿Qué hay de usar jQuery para desencadenar el envío? Al igual que en esta respuesta How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

Utilizando el .Cambiar() evento en lugar del evento .click() la parte jQuery sería algo como esto:

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

Este es el código totalmente no probado así que ten cuidado de erratas:)

Answer 4

esto puede ayudar a

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

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

Answer 5

Hmm, lo que realmente trabajó para mí, incluso en los teléfonos celulares, que era un área problemática, fue el siguiente, en mi archivo cshtml para una vista parcial. También incluye código para atenuar el botón gris y escribir "Guardar ..." hasta que la vista publique hacia atrás, lo que evita que las personas golpeen el botón de enviar cuando se impacientan por los servidores SQL lentos.

<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 

y

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