Forma modal en asp.net mvc RC usando jquery

Question

Soy nuevo en ajax / jquery y he tenido dificultades para encontrar una muestra simple que incorpore lo siguiente:

• ASP.Net MVC RC1 (o 2)
• jquery
• forma modal

Me gustaría que el usuario pueda hacer clic en un enlace / botón en una Vista (Principal) y que aparezca un formulario modal que contenga un formulario. el contenido del cuadro de diálogo modal debe ser una vista MVC (Child).

Una vez que se envía el formulario, me gustaría que desapareciera el cuadro de diálogo modal y que se actualice una parte de la vista principal.

Answer 1

Entonces, no necesitas pensarlo todo de una vez.     Primero haga su formulario en html al frente y al centro de la página, adjunte una acción y póngalo a funcionar sin la fantasía modal.
    Una vez que su lógica de formulario funciona, puede realizar un bucle en jQuery. Si desea comenzar con la modalidad & Amp; la ventana emergente o con la publicación asincrónica con jQuery depende de usted. Por lo general, me gusta hacer que funcione antes de hacerlo bonito, así que tomaremos esa ruta.     Si utiliza el estándar & Lt;% Html.BeginForm ... {% & Gt; sintaxis para definir su formulario, eliminarlo. Ir a la vieja escuela html! (Sé que puede personalizar aún más el Html.Beginform pero es más fácil usar html)

<form action="<%= Url.ActionLink(...)%>" id="SomeForm">

Ahora puede conectar jQuery en su document.ready, o donde inicialice su JS.

$('#SomeForm').bind('submit', youractionfunction);

En su formulario de acción, probablemente llamará a la publicación de jQuery donde la devolución de llamada de la publicación oculta su formulario y actualiza el resto de la página. Documentación de la API

function youractionfunction(e){
  $.post($(e).attr('action'), // we get the action attribute (url) from the form
         { title : $('#titleBox').val()}, // the values we're passing
         yourCallbackFunction); 
  return false;  // This is important, this will stop the event from bubbling and your form from submitting twice.
}

Ahora tiene un formulario ajaxy, por lo que puede trabajar en la devolución de llamada.

function yourCallbackFunction(data)
{
    // do something with the result.
}

Ahora podemos hablar de modalidad. Por lo general, es un poco molesto, pero puede usar un complemento jQuery como esto o algo así similar a hacerlo por ti. Entonces es solo una cuestión de conectar eventos para mostrar y ocultar la ventana emergente, y ya está todo listo.

Si su intención era tener ese formulario cargado de forma asíncrona cuando " muestre " se hace clic en el enlace, eso es un poco más problemático, pero aún posible. Puede usar jQuery.Load ( Api Documentation ) para extraer el html e inyectarlo en el dom, pero aún tendrá que conectar los eventos (de nuevo, con el enlace ('submit' ...) descrito anteriormente).