Mostrar un formulario modal con ASP.NET MVC y Ajax

¿Os gusta ASP.NET MVC? A mi personalmente me encanta… aunque está un poco verde, en el sentido que comparándolo con webforms hay varias cosas que debes hacerte tu mismo, el modelo de programación es simple y elegante… Gran parte del mérito lo tiene (además del uso del patrón MVC evidentemente), jQuery genial librería de Javascript donde las haya.

Hay mucha gente desarrollando en jQuery (al margen de que usen o no ASP.NET MVC) y dado lo bien que se entienden ASP.NET MVC y jQuery es muy fácil realizar tareas que antes eran un poco… complejas.

Yo me he encontrado con la necesidad de mostrar un pop-up (modal) en una aplicación ASP.NET MVC. Un par de búsquedas por google me han llevado a SimpleModal, un genial plugin para jQuery que precisamente hace esto: mostrar formularios modales. En su página web hay varios ejemplos (en su caso él usa PHP).

Os cuento como he integrado SimpleModal en mi aplicación ASP.NET MVC por si a alguien le interesa… Esta ha sido mi manera de hacerlo, no pretendo sentar cátedra porque hay muuuuuuucha gente que sabe más que yo (especialmente de jQuery).

En concreto la necesidad era mostrar un link, que al pulsarse desplegase un pop-up modal para que la gente pudiera darse de alta en la página.

La página que muestra el enlace (en mi caso Index.aspx) tiene el siguiente código ASP.NET:

<%= Ajax.PopupLink ("Join the game", "Signup","Account", "popup") %>
and start playing!
<div id="popup" />

El método PopupLink es un método extensor de AjaxHelper:

public static string PopupLink(this AjaxHelper helper, string linkText, 
string actionName, string controllerName, string popupId) { AjaxOptions options = new AjaxOptions() { UpdateTargetId = popupId, OnComplete = "show_popup", HttpMethod = "GET" }; string link = helper.ActionLink(linkText, actionName,
controllerName, options); return link; }

Ok… no es un método muy configurable, pero a mi me va bien 🙂 Lo que hace es mostrar un enlace con el texto especificado y le establece unas opciones por defecto: Que la llamada sea via Ajax usando GET, que se llame a una función javascript “show_popup” al terminar y que se actualice el elemento DOM especificado (en este caso el último parámetro llamado ‘popup’). Los parámetros “actionName” y “controllerName” del método sirven para especificar que acción de que controlador debe devolver la vista parcial que contiene el popup. En mi caso la acción “Signup” del controllador “AccountController” que está definida tal y como sigue:

public ActionResult Signup()
{
    if (Request.IsAjaxRequest())
    {
        return PartialView("SignupPopup");
    }
    else return RedirectToAction("Index", "Home");               
}

Como podeis ver me limito a devolver la vista parcial SignupPopup que es la que contiene el código HTML del popup. Cuando el usuario haga click en el enlace “Join the game” se llamará via Ajax a la acción Signup que devolverá la vista parcial “SignupPopup”, el código de la cual se incrustará dentro del div “popup”.

El código de la vista parcial en mi caso es muy simple:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<div>
    <h1>Join the Game!</h1>
    <% using (Html.BeginForm("Signup", "Account", FormMethod.Post)) { %>
        <label for="nick">*Nick Name:</label>
        <input type="text" id="nick" name="nick" tabindex="1001" />
        <br />
        <label for="email">*Email:</label>
        <input type="text" id="email" name="email" tabindex="1002" />
        <br />
        <label>A email for validate your account will be sent at 
email address you specified.</label> <br /> <button type="submit" tabindex="1006">Send</button> <button type="reset" tabindex="1007">Cancel</button> <br/> <% } %> </div>

Basicamente tenemos un formulario con dos campos: nick y email. Cuando hagamos un submit del formulario (via POST) se llamará a la acción Signup del controlador AccountController, acción que está definida como sigue:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Signup(string nick, string email)
{
    // Codigo para dar de alta el nuevo usuario...
    // Mostramos la vista de Bienvenida
    return View();
}

No mucha cosa… El controlador da de alta el usuario y finalmente muestra una vista de bienvenida.

Finalmente en la página Index.aspx, debemos tener el método javascript show_popup, que será el encargado de mostrar el popup usando SimpleModal:

<script type="text/javascript">
    function show_popup() {
        $("#popup").modal();
    }
</script>    

El código es muy simple: accedemos al elemento div con id=”popup” que hemos rellenado con el contenido de la vista parcial, y usamos el método modal() que define SimpleModal para mostrar este div como un formulario modal…

… y listos!

Simple y sencillo… en otro post mostraré como comunicar nuestro formulario via Ajax con nuestros controladores (p.ej. para poder validar datos en servidor sin necesidad de hacer submit del formulario).

6 comentarios sobre “Mostrar un formulario modal con ASP.NET MVC y Ajax”

  1. Si funciona pero mi problema viene cuando quiero validar los datos en el lado del servidor y si quiero mostrar algun mensaje, se cierra mi ventana y solo hasta que vuelva a abrir el dialogo, se muestra el mensaje de error :S

  2. SI FUNCIONA. GRACIAS. AHORA ME GUSTARÍA VALIDAR LOS DATOS PERO QUEDÁNDOME EN LA MISMA FORMA DE DIALOGO MODAL.
    HE INTENTADO HACERLO, Y DE HECHO ME VALIDA LOS DATOS, PERO SE PIERDE EL ENFOQUE MODAL Y ME APARECE UNA FORMA NORMAL

    CREO QUE ESE ES EL SEGUNDO POST QUE VAS A EXPLICAR.

    ME GUSTARÍA ME DIERAS EL ENLACE PARA VERLO

    MUCHAS GRACIAS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *