Comment publier un formulaire ASP.NET MVC Ajax à l'aide de JavaScript plutôt que du bouton d'envoi

Question

J'ai un simple formulaire créé à l'aide d' Ajax.BeginForm:

<% 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 />
<input type="submit" value="save" />
<% }%>

Le contrôleur est branché et renvoie une vue partielle qui met à jour l' DescriptionDiv. Et tout cela fonctionne parfaitement.

Maintenant, je voudrais être en mesure de soumettre ce formulaire sans avoir le bouton envoyer (via un clic sur un lien ou sur une image ou quoi que ce soit). Malheureusement, ce petit jQuery extrait de ne pas faire le travail:

$('form#AjaxForm').submit();

Il ne soumettez le formulaire, mais n'en fait je suppose qu'il n'est pas surprenant) à un poste d'arrière et pas un Ajax un.

Par souci de simplicité, le ci-dessus jQuery est câblé comme ceci:

<a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>

Le onsubmit du formulaire est d'utiliser le Sys.Mvc.AsyncForm.handleSubmit() mais le jQuery soumettre semble passer à côté de cette.

PS. Je suis à la recherche d'une solution dans cette approche particulière. Je sais comment obtenir le même à l'aide d'une forme normale et le poster à l'aide d'AJAX+jQuery. Je suis intéressé par cette solution particulière si.

Answer 1

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

Answer 2

Un exemple simple, dans lequel une modification dans une liste déroulante déclenche un envoi de formulaire ajax pour recharger une grille de données:

 <div id="pnlSearch">

    <% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" }))
    { %>

        UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('submit');" })%>

    <% } %>

</div>
 

Le déclencheur ('onsubmit') est l’essentiel: il appelle la fonction onsubmit que MVC a greffée sur le formulaire.

NB Le contrôleur UserSearchResults renvoie un PartialView qui affiche une table à l'aide du modèle fourni.

 <div id="pnlSearchResults">
    <% Html.RenderPartial("UserSearchResults", Model); %>
</div>
 

Answer 3

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 la suppression 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.

Answer 4

J'ai essayé à plusieurs reprises de faire en sorte que le formulaire ajax fonctionne correctement, mais j'ai toujours rencontré un échec complet ou trop de compromis. Voici un exemple de page qui utilise le plug-in jQuery Form à l' intérieur d'une page MVC pour mettre à jour une liste de projets (à l'aide d'un contrôle partiellement rendu) lorsque l'utilisateur tape dans une zone de saisie:

 <div class="searchBar">
    <form action="<%= Url.Action ("SearchByName") %>" method="get" class="searchSubmitForm">
        <label for="projectName">Search:</label>
        <%= Html.TextBox ("projectName") %>
        <input class="submit" type="submit" value="Search" />
    </form>
</div>
<div id="projectList">
    <% Html.RenderPartial ("ProjectList", Model); %>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#projectName").keyup(function() {
            jQuery(".searchSubmitForm").submit();
        });

        jQuery(".searchSubmitForm").submit(function() {
            var options = {
                target : '#projectList'
            }

            jQuery(this).ajaxSubmit(options);

            return false;
        });

        // We remove the submit button here - good Javascript depreciation technique
        jQuery(".submit").remove();
    });
</script>
 

Et du côté du contrôleur:

 public ActionResult SearchByName (string projectName)
{
    var service = Factory.GetService<IProjectService> ();
    var result = service.GetProjects (projectName);

    if (Request.IsAjaxRequest ())
        return PartialView ("ProjectList", result);
    else
    {
        TempData["Result"] = result;
        TempData["SearchCriteria"] = projectName;

        return RedirectToAction ("Index");
    }
}

public ActionResult Index ()
{
    IQueryable<Project> projects;
    if (TempData["Result"] != null)
        projects = (IQueryable<Project>)TempData["Result"];
    else
    {
        var service = Factory.GetService<IProjectService> ();
        projects = service.GetProjects ();
    }

    ViewData["projectName"] = TempData["SearchCriteria"];

    return View (projects);
}
 

Answer 5

Essayez de la manière suivante:

 <input type="submit" value="Search" class="search-btn" />
<a href="javascript:;" onclick="$('.search-btn').click();">Go</a>