Cómo publicar ASP.NET MVC formulario Ajax usando JavaScript en lugar de enviar botón

Un ejemplo simple, donde un cambio en una lista desplegable desencadena un formulario ajax-submit para recargar una cuadrícula de datos:

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

El disparador('onubmit') es la clave: llama a la función onubmit que MVC ha injertado en el formulario.

NB. El controlador UserSearchResults devuelve una vista parcial que representa una tabla utilizando el Modelo suministrado

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

Desafortunadamente, la activación de los eventos onubmit o submit no funcionará en todos los navegadores.

• Funciona en IE y Chrome: #('form#ajaxForm')trigger('onsubmit');
• Funciona en Firefox y Safari: #('form#ajaxForm')trigger ('submit');

Además, si activa('submit') en Chrome o IE, hace que se publique toda la página en lugar de hacer un comportamiento AJAX.

Lo que funciona para todos los navegadores es eliminar el comportamiento del evento onubmit y simplemente llamar a submit () en la forma misma .

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

Además, el enlace no tiene que estar contenido dentro del formulario para que esto funcione.

He intentado varias veces que el envío del formulario ajax funcione bien, pero siempre me encontré con un fracaso completo o demasiados compromisos. Este es un ejemplo de página que usa el complemento jQuery Form dentro de una página MVC para actualizar una lista de proyectos (usando un control parcialmente renderizado) como el usuario escribe en un cuadro de entrada:

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

Y del lado del controlador:

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 parece ser un fracaso.

Usando un Html normal.Comience por, esto hace el truco muy bien:

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

Intente de la siguiente manera:

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

En lugar de usar JavaScript, tal vez intente algo como

<a href="#">

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

</a>

Simplemente coloque el botón normal en Ajax.BeginForm y haga clic en buscar formulario padre y enviar normal. Formulario Ajax en Razor:

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

Y Javascript:

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

    $formToSubmit.submit();
}