A relatively common scenario you might want in your application is the ability for a user to click a link that pops up a little dialog to submit some information. For example, let's say you have this form where the user could click the "Contact this person" link:
After clicking this link, it pops up the following dialog where the user can type in their message:
Finally, once the user submits their message, it shows a little confirmation:
This scenario can be implemented with MVC with very few lines of code. First off, we'll be using the AJAX HTML Message pattern so that the AJAX messages that are going across the wire are simple HTML snippets. Also, we'll use jQuery Thickbox for our dialog. The first thing we need to do it to implement our "Contact this person" link:
<%=Html.ActionLink("Contact this person", "Index", "Contact", new { height = 200, width = 300 }, new { @class = "thickbox" }) %>
This is a pretty typical implementation of the jQuery thickbox. We're specifying that we want an AJAX call to be made to our ContactController.Index() method. The HTML that this ActionLink renders will simply look like this:
<a class="thickbox" href="/Contact?height=200&width=300">Contact this person</a>
The complete code for the ContractController looks like this:
public class ContactController : Controller
{
public ActionResult Index()
{
return View(new ContactMessage());
}
[ActionName("Index")]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SubmitMessage(ContactMessage message)
{
return this.View("Confirmation", message);
}
}
It is important to note that both views returned by the ContactController's action methods are both partial views (i.e., Index.ascx and Confirmation.ascx) with our HTML snippets in there. We know that in the Index.ascx we want to do an AJAX form submission/post rather than a full page form submission. There are a couple of ways to do this including using the jQuery Form plugin. However, in this case, the MVC framework already comes built-in with this functionality so we don't have to rely on the jQuery Form plugin (unless we want to). Most of the time we find ourselves using the Html property of the View which is of type HtmlHelper. However, there is also an Ajax property of the view of type AjaxHelper. The AjaxHelper has a BeginForm method that will allow you to submit the form via AJAX. You'll need to make sure you include the MicrosoftAjax.js and MicrosoftMvcAjax.js scripts in your page to use the Ajax helpers. The complete implementation for the Index.ascx can just look like this:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcAjaxForm.Models.ContactMessage>" %>
<h2>Contact</h2>
<% using (Ajax.BeginForm("Index", "Contact", new AjaxOptions { UpdateTargetId = "contactArea" } )) { %>
<div id="contactArea">
Email Address: <%=Html.TextBox("EmailAddress") %> <br /><br />
Message: <%=Html.TextArea("MessageText")%>
<input type="submit" />
</div>
<% } %>
Notice the UpdateTargetId is specifying the "contactArea" div. This causes all HTML that is sent back on the form post (i.e., the confirmation message) to be displayed inside this div only. The complete code for this sample can be downloaded here.
