Posts
203
Comments
1117
Trackbacks
51
MVC AJAX Form with Ajax.BeginForm() and jQuery Thickbox

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:

   1:  <%=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:

   1:  <a class="thickbox" href="/Contact?height=200&amp;width=300">Contact this person</a>

The complete code for the ContractController looks like this:

   1:  public class ContactController : Controller
   2:  {
   3:      public ActionResult Index()
   4:      {
   5:          return View(new ContactMessage());
   6:      }
   7:   
   8:      [ActionName("Index")]
   9:      [AcceptVerbs(HttpVerbs.Post)]
  10:      public ActionResult SubmitMessage(ContactMessage message)
  11:      {
  12:          return this.View("Confirmation", message);
  13:      }
  14:  }

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:

   1:  <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcAjaxForm.Models.ContactMessage>" %>
   2:   
   3:  <h2>Contact</h2>
   4:      
   5:  <% using (Ajax.BeginForm("Index", "Contact", new AjaxOptions { UpdateTargetId = "contactArea" } )) { %>
   6:      <div id="contactArea">
   7:          Email Address: <%=Html.TextBox("EmailAddress") %> <br /><br />
   8:          Message: <%=Html.TextArea("MessageText")%>
   9:          <input type="submit" />
  10:      </div>
  11:  <% } %>

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.

posted on Monday, August 31, 2009 5:00 AM Print
Comments
Gravatar
# re: MVC AJAX Form with Ajax.BeginForm() and jQuery Thickbox
Richie Scott
6/18/2010 6:45 AM
I am using jqgrid and would like to launch the thickbox on double click. Do you know how I would do it? I am calling the script direct to get it working at the minute :)

ondblClickRow: function (ids) {
if (ids != null) {
var data = $("#timesheets").getRowData(ids);
var url = '/Timesheets/Edit?height=400&height=400&modal=false&parentId=' + data.Id;
// load thickbox as modal
tb_show("Amend", url, false);
}
}

- plus if the data is invalid on the form, on save do you know how you would re-render the thickbox (i.e. how would you pass the html attributes?

Thanks and a great post...
Richie
Gravatar
# re: MVC AJAX Form with Ajax.BeginForm() and jQuery Thickbox
Steve
6/21/2010 12:17 AM
@Richie - I'm not sure I'm completely following your example. You might need to send me the code. What behavior are you seeing?

In terms of re-rendering the thickbox for validation errors, the above approach will work with a small change. Rather than just sendign back the view "Confirmation", you first check if ModelState.IsValid. If it's not then you send back the original view, with the original model - the normal MVC validation helpers will display your mark up.
Gravatar
# re: MVC AJAX Form with Ajax.BeginForm() and jQuery Thickbox
bnn
7/2/2010 11:49 AM
I'm having problems with thickbox too. Using the UpdateTargetId, if the validation fails I can re-render form as you suggest to show the validation message and try again.

The problem comes when I want to return a new view once the form has been submitted successfully - the content goes into the thickbox area rather than closing it and showing the new view.

Post Comment

Title *
Name *
Email
Comment *  
Verification

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers




Google My Blog

Tag Cloud