Modulo modale in asp.net mvc RC utilizzando jquery

Question

Sono nuovo in ajax/jquery e ho avuto difficoltà a trovare un semplice esempio che incorpori quanto segue:

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

Vorrei che l'utente potesse fare clic su un collegamento/pulsante in una vista (genitore) e visualizzare un modulo modale che contiene un modulo.il contenuto della finestra di dialogo modale dovrebbe essere una vista MVC (figlio).

Una volta inviato il modulo, vorrei che la finestra di dialogo modale scomparisse e che una parte della vista principale fosse aggiornata.

Answer 1

Quindi non è necessario pensarci tutto in una volta.Per prima cosa rendi il tuo modulo in HTML in primo piano e al centro della pagina, allega un'azione e fallo funzionare senza fantasia modale.
Una volta che la logica del modulo funziona, puoi eseguire il loop in jQuery.Dipende da te se vuoi iniziare con la modalità e il popup o con il post asincrono con jQuery.Di solito mi piace farlo funzionare prima di renderlo carino, quindi prenderemo questa strada.Se utilizzi lo standard <% Html.BeginForm...{ %> sintassi per definire il modulo, rimuoverlo.Vai all'HTML della vecchia scuola!(So ​​che puoi personalizzare ulteriormente Html.Beginform ma è più semplice usare semplicemente html)

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

Ora puoi collegare jQuery nel tuo document.ready o ovunque inizializzi il tuo JS.

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

Nel tuo modulo di azione probabilmente chiamerai il post di jQuery in cui la richiamata del post nasconde il tuo modulo e aggiorna il resto della pagina. Documentazione dell'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.
}

Ora hai un modulo ajaxy, quindi puoi lavorare sulla richiamata.

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

Ora possiamo parlare di modalità.In genere è un po' fastidioso, ma puoi usare un plugin jQuery come Questo o qualcosa di simile per farlo per te.Quindi è solo questione di collegare gli eventi per mostrare e nascondere il popup e il gioco è fatto.

Se il tuo intento era quello di caricare il modulo in modo asincrono quando si fa clic sul collegamento "mostra", è un po' più problematico, ma comunque fattibile.Puoi usare jQuery.Load (Documentazione dell'Api) per estrarre l'html e inserirlo nel dom, ma dovrai comunque collegare gli eventi (di nuovo, con il bind('submit'...) descritto sopra).