Formulaire modal dans asp.net mvc RC en utilisant jquery

Question

Je suis un nouvel utilisateur de ajax / jquery et j'ai eu du mal à trouver un exemple simple comprenant les éléments suivants:

• ASP.Net MVC RC1 (ou 2)
• jquery
• formulaire modal

J'aimerais que l'utilisateur puisse cliquer sur un lien / bouton dans une vue (parent) et faire apparaître un formulaire modal contenant un formulaire. le contenu de la boîte de dialogue modale doit être une vue MVC (enfant).

Une fois le formulaire envoyé, j'aimerais que la boîte de dialogue modale disparaisse et qu'une partie de la vue parent soit mise à jour.

Answer 1

Donc, vous n’avez pas besoin de penser à tout cela en même temps.     Créez d'abord votre formulaire en html devant et au centre de la page, attachez une action et faites-le fonctionner sans fantaisie Modal.
    Une fois que votre logique de formulaire fonctionne, vous pouvez effectuer une boucle dans jQuery. Si vous voulez commencer avec la modalité & Amp; la popup ou avec la publication asynchrone avec jQuery est à vous. D'habitude, j'aime bien que ça marche avant de le faire joli, alors nous allons suivre cette voie.     Si vous utilisez le standard & Lt;% Html.BeginForm ... {% & Gt; syntaxe pour définir votre formulaire, supprimez-le. Allez vieille école html! (Je sais que vous pouvez personnaliser davantage le fichier HTML.Beginform, mais il est plus facile de simplement utiliser le langage HTML.)

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

Vous pouvez maintenant connecter jQuery à votre document.ready ou à l'endroit où vous initialisez votre JS.

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

Dans votre formulaire d'action, vous appelez probablement le message de jQuery où le rappel de ce message masque votre formulaire et met à jour le reste de la page. Documentation 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.
}

Vous avez maintenant une forme abrégée, vous pouvez donc travailler sur le rappel.

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

Nous pouvons maintenant parler de modalité. C'est généralement un peu pénible, mais vous pouvez utiliser un plugin jQuery comme this ou quelque chose du genre. semblable à le faire pour vous. Ensuite, il suffit de câbler des événements pour afficher et masquer la fenêtre contextuelle, et vous êtes prêt.

Si vous vouliez que ce formulaire soit chargé de manière asynchrone lorsque le & "afficher &"; le lien est cliqué, c'est un peu plus gênant, mais toujours faisable. Vous pouvez utiliser jQuery.Load ( Api Documentation ) pour extraire le code HTML et l'injecter dans le dom, mais vous devrez toujours câbler les événements (encore une fois, avec le lien ('submit' ...) décrit ci-dessus).