utilizar - Cómo publicar el formulario ASP.NET MVC Ajax utilizando JavaScript en lugar del botón de envío

mvc call partial view from javascript

Question

Tengo un formulario simple 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 actualiza el DescriptionDiv . Y todo funciona perfectamente.

Ahora me gustaría poder enviar este formulario sin tener el botón de envío (a través de un clic en un enlace o en una imagen o lo que sea). Desafortunadamente, este pequeño fragmento de jQuery no hace el trabajo:

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

Envía el formulario, pero (no me sorprende) un post-back regular y no un Ajax.

En aras de la simplicidad, el jQuery anterior está conectado de esta manera:

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

El envío de formularios del formulario está utilizando Sys.Mvc.AsyncForm.handleSubmit () pero el envío de jQuery parece estar omitiendo esto.

PD. Estoy buscando una solución en este enfoque particular. Sé cómo lograr lo mismo utilizando un formulario normal y publicándolo utilizando AJAX + jQuery. Sin embargo, estoy interesado en esta solución en particular.

Answer 1

Ajax.BeginForm parece ser un error.

Usando un archivo Html.Begin regular, esto hace el truco muy bien:

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

Answer 2

Desafortunadamente, la activación de eventos de envío o envío de onsts no funciona 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 (''enviar'') en Chrome o IE, esto hace que se publique toda la página en lugar de realizar un comportamiento AJAX.

Lo que funciona para todos los navegadores es eliminar el comportamiento del evento onsubmit y simplemente llamar a submit () en el 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>
<% } %>

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

Answer 3

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>

Answer 4

He intentado varias veces conseguir que el envío del formulario ajax funcione bien, pero siempre me encontré con un fallo 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 representado) mientras 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 en el 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);
}

Answer 5

Intente de la siguiente manera:

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

Answer 6

Simplemente coloque el botón normal en Ajax.BeginForm y haga clic en buscar formulario principal y enviar normalmente. Forma de 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();
}

Answer 7

Un ejemplo simple, donde un cambio en una lista desplegable desencadena un envío de formulario ajax para 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 activador (''onsubmit'') es la clave: llama a la función onsubmit que MVC ha insertado en el formulario.

NÓTESE BIEN. El controlador UserSearchResults devuelve un PartialView que representa una tabla utilizando el Modelo suministrado

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

Answer 8

Voy a suponer que su falta de citas en el selector es solo un error de transcripción, pero debería revisarlo de todos modos. Además, no veo dónde le estás dando a la forma una identificación. Normalmente haces esto con el parámetro htmlAttributes. No te veo usando la firma que la tiene. Una vez más, sin embargo, si el formulario se envía, este podría ser un error de transcripción.

Si el selector y la identificación no son el problema, sospecho que podría deberse a que el controlador de clic se agrega a través del marcado cuando usa la extensión Ajax BeginForm. Puede intentar usar $ (''form''). Trigger (''submit'') o, en el peor de los casos, hacer que el controlador de clic en el ancla cree un botón de envío oculto en el formulario y haga clic en él. O incluso cree su propio envío ajax usando jQuery puro (que es probablemente lo que haría).

Por último, debes darte cuenta de que al reemplazar el botón de envío, vas a dividir totalmente esto para las personas que no tienen habilitado javascript. La forma de evitar esto también es tener un botón oculto usando una etiqueta noscript y manejar publicaciones AJAX y no AJAX en el servidor.

Por cierto, es una práctica estándar, no obstante Microsoft, agregar los manejadores a través de javascript y no a través de marcado. Esto mantiene su javascript organizado en un solo lugar para que pueda ver más fácilmente lo que está pasando en el formulario. Aquí hay un ejemplo de cómo usaría el mecanismo de activación.

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