Comment poster ASP.NET MVC Ajax formulaire utilisant JavaScript plutôt que le bouton Soumettre

un exemple simple, où un changement sur une liste déroulante déclenche un formulaire ajax-submit pour recharger un datagrid:

<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 la clé: il appelle la fonction onsubmit que MVC a greffée sur le formulaire.

NB. Le contrôleur UserSearchResults renvoie une vue partielle qui rend une table en utilisant le modèle fourni

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

malheureusement, le déclenchement des événements onsubmit ou submit ne fonctionnera 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');

En outre, si vous déclenchez('submit') dans Chrome ou IE, cela provoque la page entière à être posté plutôt que de faire un comportement AJAX.

Ce qui fonctionne pour tous les navigateurs suppression de l'événement onsubmit comportement et juste appeler 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.

j'ai essayé à plusieurs reprises d'obtenir le formulaire ajax soumettre fonctionne bien, mais toujours rencontré soit l'échec complet ou trop de compromis. Voici un exemple de page qui utilise le jQuery Forme de plug-in à l'intérieur d'une page MVC pour mettre à jour une liste de projets (en utilisant un contrôle partiellement Rendu) que l'utilisateur tape dans une boîte 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 sur le contrôleur de côté:

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);
}

Ajax.BeginForm semble être un échec.

utiliser un Html normal.Commencer, cela fait l'affaire tout aussi bien:

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

Essayez de la manière suivante:

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

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>

il suffit de placer le bouton normal indé Ajax.Commencez le formulaire et cliquez sur Trouver le formulaire parent et soumettre normal. Forme Ajax dans le rasoir:

@using (Ajax.BeginForm("AjaxPost", "Home", ajaxOptions))
    {        
        <div class="form-group">
            <div class="col-md-12">

                <button class="btn btn-primary" role="button" type="button" onclick="submitParentForm($(this))">Submit parent from Jquery</button>
            </div>
        </div>
    }

et Javascript:

function submitParentForm(sender) {
    var $formToSubmit = $(sender).closest('form');

    $formToSubmit.submit();
}