Modal Form in asp.net mvc RC using jquery

Question

I am new to ajax / jquery and have had difficulty finding a simple sample incorporating the following:

• ASP.Net MVC RC1 (or 2)
• jquery
• modal form

I would like the user to be able to click a link/button in a View (Parent) and have a modal form appear that contains a form. the contents of the modal dialog should be an MVC view (Child).

Once the form is submitted I would like the modal dialog to disappear and a portion of the parent view to be updated.

Answer 1

So, you don't need to think about it all at once. First make your form in html front and center on the page, attach an action, and get it to work without Modal fanciness.
Once your form logic works you can loop in jQuery. Whether you want to start with modality & the popup or with the Asynchronous Post with jQuery is up to you. I usually like to make it work before i make it pretty, so we'll take that route. If you use the standard <% Html.BeginForm... { %> syntax to define your form, remove it. Go old school html! (I know you can further customize the Html.Beginform but it's easier to just use html)

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

Now you can wire up jQuery in your document.ready, or wherever you initialize your JS.

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

In your action form you'll probably be calling jQuery's post where the callback of the post hides your form and updates the rest of the page. Api Documentation

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.
}

Now you have an ajaxy form, so you can work on the callback.

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

Now we can talk about modality. It's typically a bit of a pain, but you can use a jQuery plugin like this or something similar to do it for you. Then it's just a matter of wiring up events to show and hide the popup, and you're all set.

If your intent was to have that form loaded asynchronously when the "show" link is clicked, that's a bit more troublesome, but still doable. You can use jQuery.Load (Api Documentation) to pull the html and inject it into the dom, but you'll still have to wire up the events (again, with the bind('submit'...) described above).