Comment publier ASP.NET MVC, Ajax formulaire à l'aide de JavaScript plutôt que le bouton soumettre

Je vais supposer que votre manque de guillemets autour du sélecteur est juste une erreur de transcription, mais vous devriez vérifier de toute façon. Aussi, je ne vois pas où vous en êtes réellement donner la forme d'un identifiant. Habituellement, vous faites cela avec la htmlAttributes paramètre. Je ne vois pas de vous en utilisant la signature qui a il. Encore une fois, cependant, si la forme est la soumission à tous, cela pourrait être une erreur de transcription.

Si le sélecteur et les id ne sont pas le problème, je suis à soupçonner qu'il pourrait être parce que le gestionnaire de clic est ajoutée via des balises lorsque vous utilisez l'Ajax BeginForm extension. Vous pouvez essayer en utilisant $('form').trigger('submit') ou, dans le pire des cas, ont le gestionnaire de clic sur le point d'ancrage de créer un bouton d'envoi masqué dans le formulaire et cliquez sur elle. Ou même créer votre propre ajax présentation à l'aide de pure jQuery (ce qui est probablement ce que je ferais).

Enfin, vous devez réaliser que, en remplaçant le bouton "soumettre", vous allez totalement briser ce pour les personnes qui n'ont pas javascript activé. Le moyen de contourner cela est de disposer également d'un bouton caché à l'aide d'une balise noscript et de gérer les deux AJAX et non-AJAX messages sur le serveur.

BTW, c'est considérer comme une pratique standard, Microsoft ne résistant pas, à ajouter des gestionnaires via javascript via le balisage. Cela garantit que votre javascript organisés en un seul endroit, donc vous pouvez plus facilement voir ce qui se passe sur le formulaire. Voici un exemple de la façon dont je voudrais utiliser le mécanisme de déclenchement.

  $(function() {
      $('form#ajaxForm').find('a.submit-link').click( function() {
           $('form#ajaxForm').trigger('submit');
      }).show();
  }

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link" style="display: none;">Save</a>
   <noscript>
       <input type="submit" value="Save" />
   </noscript>
<% } %>

Malheureusement, le déclenchement de la onsubmit ou soumettre des événements ne fonctionnent pas dans tous les navigateurs.

• Fonctionne sous IE et Chrome: #('le formulaire n ° ajaxForm')trigger('onsubmit');
• Fonctionne dans Firefox et Safari: #('le formulaire n ° ajaxForm')trigger('submit');

Aussi, si vous trigger('submit') dans Chrome ou IE, il provoque l'intégralité de la page pour être affichés plutôt que de faire de l'AJAX comportement.

Ce qui fonctionne pour tous les navigateurs est retrait de l'événement onsubmit comportement et de l'appeler juste submit() sur le formulaire lui-même.

<script type="text/javascript">
$(function() {

    $('form#ajaxForm').submit(function(event) { 
        eval($(this).attr('onsubmit')); return false; 
        });

    $('form#ajaxForm').find('a.submit-link').click( function() { 
        $'form#ajaxForm').submit();
        });

  }
</script>
  <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link">Save</a> 
<% } %>

Aussi, le lien n'a pas à figurer dans le formulaire pour que cela fonctionne.

Ajax.BeginForm semble être un échec.

Utilisant un Html.Commencer pour, cela fait l'affaire tout aussi bien:

$('#detailsform').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {
        $("#edit").html(r);
    });
}); 

Plutôt que d'utiliser JavaScript peut-être essayer quelque chose comme

<a href="#">

  <input type="submit" value="save" style="background: transparent none; border: 0px none; text-decoration: inherit; color: inherit; cursor: inherit" />

</a>