2010-06-03 23 views
5

Tengo una tabla con algunas filas de elementos de datos. Para cada fila, habrá algunos enlaces de acción que invocarán algunos métodos (eliminar elemento de datos, cambiar estado de datos, etc.)mvc ajax.actionlink con el diálogo de jquery confirmar

Antes de que cada usuario haga clic en el botón quiero que aparezca un diálogo jquery y darle al usuario un diálogo con algo de información, un botón Aceptar y Cancelar.

un código de ejemplo de la ajax.actionlink que llamará al método changestatus:

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%> 

Ésta es la función jQuery que se llama:

function StartChangeStatus(e) { 
      $('#dialog-confirm').dialog({ 
       resizable: false, 
       height: 200, 
       modal: true, 
       buttons: { 
        'Continue': function() { 
         $(this).dialog('close'); 
         $('#Loading-Div').show('slow'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
         e.preventDefault(); 
        } 
       } 
      }); 
     } 

El ActionLink y funciones jQuery trabajo. Pero el problema es que no puedo pausar/detener la acción actual cuando se hace clic en el enlace de acción. Cuando se hace clic en el botón ahora, el proceso de perforación se está ejecutando y el botón de confirmación de diálogo se ignora. ¿Entonces mi pregunta es cómo cambiar el actionlink o la función jquery para que funcione como se desee con una confirmación de diálogo antes de proceder?

+0

en caso de que alguna vez necesites un diálogo de confirmación para un tipo de entrada: enviar, puedes usar el de aquí http://awesome.codeplex.com/ – Omu

Respuesta

4

También he intentado su código, obteniendo el mismo comportamiento. He modificado tu código para mostrar el cuadro de confirmación.

<%= Ajax.ActionLink("Link", 
        "ChangeStatus", 
        new { id = 3 }, 
        new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
             HttpMethod = "Post", 
             Confirm = "confirmClick" }, 
             new { @class = "StatusBtn" } 
        ) 
%> 

y muestra la confirmación de javascript. Necesito encontrar la razón por la cual no está funcionando.

+0

esto me funciona gracias :) –

+0

Genial ... esto funciona para mi. – BeemerGuy

+0

Tan simple, debería ser la respuesta elegida – jonprasetyo

2

De my website:

Ahora, Ajax.ActionLink es realmente útil, y la AjaxOption Confirmar es aún más todavía ..., ¿quién quiere los chungo Alerta Javascript en estos días? Estoy desarrollando una aplicación con Ms MVC 2 y estoy usando la fantástica biblioteca JQueryUI para personalizar las imágenes de todos mis elementos. Una de las mejores cosas que JQueryUI tiene, son ventanas de diálogo ... como "¿Estás seguro de borrar este archivo? Sí/No" ... ¡Y QUIERO UTILIZARLOS EN MI Ajax.ActionLink!

Como no encontré una respuesta en la red, busqué una forma sencilla de hacerlo ... y ahora la publico aquí.

Primero: leer y poner en práctica en su página del buen tutorial escrito por Ricardo Covo: "ASP MVC Eliminar confirmación con el Ajax & jQuery UI de diálogo" (Just google)

hice simples cambios en su código Javascript, simplemente usando remove() en lugar de hide ('fast') y aplicando un "elemento" de clase al tr para eliminar.

deleteLinkObj.closest("tr").hide('fast') 

convierte

deleteLinkObj.closest("tr.item").remove(); 

Ahora, después de haber seguido el tutorial anterior, ya está listo para sustituir la fila

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%> 

con

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" }) %> 

Puede utilizar el Publica el método si te gusta t O, lo importante aquí es la opción OnBegin, que llama a un javascript que impide la acción del servidor a ser llamado antes jQueryUI diálogo de confirmación:

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script> 

Coloque el javascript en la página.

Entonces, ahora qué sucederá: Al hacer clic en el botón Eliminar, se abrirá la JQueryUI mientras se llama a la función OnBegin (que cancela la acción posterior normal). En caso de "Confirmar", el código de Ricardo Covo activará la acción del lado del servidor, y en el código de confirmación de JavaScript de Ricardo Covo podrá ejecutar todas las acciones en caso de éxito (como ocultar la eliminación de filas).

Atención de la paga: Con este método, se debe gestionar la función para el éxito/fracaso en el código JavaScript de Ricardo Covo, ya que el onSuccess y OnComplete AjaxOptions no serán despedidos en absoluto (probablemente sobrescrito por un código).

+0

¿Por qué el -1? Creo que es una respuesta útil y funciona hoy para mí como encanto (también después de la migración a MVC3). – fgpx78

Cuestiones relacionadas