34 votos

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

Tengo una simple formulario creado usando 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" />
<% }%>

El controlador está conectado y devuelve una vista parcial que las actualizaciones de la DescriptionDiv. Y todo funciona perfectamente.

Ahora me gustaría ser capaz de enviar este formulario, sin tener el botón de enviar (a través de un clic en un vínculo o en una imagen o lo que sea). Por desgracia, este poco de jQuery fragmento de no hacer el trabajo:

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

No envíe el formulario, pero no (supongo que no es de extrañar) un puesto de periódicos de la espalda y no Ajax.

Por el bien de la simplicidad por encima de jQuery es con cable como este:

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

El onsubmit del formulario es mediante el Sys.Mvc.AsyncForm.handleSubmit() pero el jQuery presentar parece ser pasar por esta.

PS. Estoy buscando una solución a este enfoque en particular. Sé cómo lograr lo mismo mediante un formulario normal y publicando el uso de AJAX+jQuery. Estoy interesado en esta solución, aunque.

31voto

tvanfosson Puntos 268301

Voy a asumir que su falta de citas de todo el selector es sólo un error de transcripción, pero revise de todos modos. También, no veo donde está realmente dando la forma de un id. Generalmente esto se hace con la htmlAttributes parámetro. No veo que el uso de la firma que tiene. De nuevo, aunque, si el formulario es el de presentar a todos, esto podría ser un error de transcripción.

Si el selector y el id no son el problema, estoy a sospechar que podría ser debido a que el controlador de clic es añadido a través de marcado cuando se utiliza el Ajax BeginForm extensión. Usted podría tratar de usar $('form').trigger('enviar'), o en el peor de los casos, tiene el controlador de clic en el anclaje crear una oculta el botón de enviar en el formulario y haga clic en él. O incluso crear su propio ajax presentación usando puro jQuery (que es probablemente lo que yo haría).

Por último, usted debe darse cuenta de que mediante la sustitución en el botón enviar, usted va a romper totalmente esta para la gente que no tiene javascript habilitado. La forma de evitar esto es tener también un botón oculto mediante una etiqueta noscript y manejar tanto el AJAX y el no-AJAX puestos en el servidor.

BTW, se considera una práctica estándar, Microsoft no obstante, para agregar los controladores a través de javascript, no a través de marcado. Esto mantiene su javascript organizados en un solo lugar para que usted pueda ver más fácilmente lo que está pasando en el formulario. He aquí un ejemplo de cómo iba a utilizar el mecanismo del gatillo.

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

7voto

James McCormack Puntos 4828

Un simple ejemplo, cuando un cambio en una lista desplegable que se activa un formulario ajax-presentar a recargar 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>

El trigger('onsubmit') es la clave de la cosa: se llama a la onsubmit función que MVC ha injertado en el formulario.

NB. El UserSearchResults controlador devuelve un PartialView que muestra una tabla con el Modelo suministrado

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

5voto

Brian Reiter Puntos 825

Por desgracia, la activación de la onsubmit o enviar eventos no funcionan en todos los navegadores.

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

También, si usted trigger('enviar') en Chrome o IE, hace que la totalidad de la página para ser publicado en lugar de hacer un AJAX comportamiento.

Lo que funciona para todos los navegadores es eliminar el evento onsubmit del comportamiento y, con sólo llamar a enviar() en el mismo formulario.

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

También, el enlace no tiene que estar contenida en el formulario para que esto funcione.

3voto

Kieron Puntos 10261

Yo he probado un par de veces para obtener el formulario ajax enviar trabajando muy bien, pero siempre se encontró con un completo fracaso o demasiados compromisos. He aquí un ejemplo de página que utiliza el jQuery en Forma de plug-in dentro de un MVC página para actualizar una lista de proyectos (utilizando parcialmente prestados control) como los tipos de usuario 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);
}

2voto

Dinesh Kumar Puntos 21

Pruebe la siguiente manera:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X