Pregunta MVC3 - Ícono de carga Ajax


Me gustaría mostrar un icono de carga de ajax durante una solicitud de ActionResult que puede tardar unos segundos en procesarse.

¿Cuál es el mejor enfoque para lograr esto?

Solo quiero mostrar el ícono después de que la validación desarrollada pase (estoy usando MVC3, EF Code First, por lo que la validación se coloca automáticamente en la página).

Es posible que haya más validación / excepciones durante ActionResult, en cuyo caso se muestra un mensaje al usuario y luego deseo que el ícono de carga desaparezca nuevamente.

¡Gracias!


6
2018-06-24 10:35


origen


Respuestas:


Defina su enlace como un enlace de acción Ajax y especifique la ID de un GIF giratorio en algún lugar de su página.

<div id="result"></div>
<img id="spinner" src="../content/ajaxspinner.gif" style="display: none;">
@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)

o si es una forma:

@using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
   @Html.TextBox("Data")<br/>
   <input type="submit" value="Submit" />
}

12
2018-06-24 10:39



Pon la imagen en una etiqueta div así:

<div id="busydiv" style="display:none;"><img src="busything.gif" /></div>

y luego crea tu enlace así:

@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null)

o en una forma haz esto:

@using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }))

Obviamente, omite esas AjaxOptions que no necesita, según la documentación aquí: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx


3
2018-06-24 13:42



Solo mis dos centavos:

La solución publicada por Chris es válida y funcionará PERO debe agregar una referencia a las dos bibliotecas javascript a continuación. Tenga en cuenta que el orden es importante:

<script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

Cuando creas una aplicación MVC precargada con bundling y todos estos paquetes nu-get esto probablemente no sea un problema para ti, pero si fueras como yo y creaste una aplicación ASP.NET MVC vacía, es posible que tengas problemas.


0
2017-07-17 08:27