September 2009 Entries
Richmond Code Camp

This Saturday (October 3) I’ll be presenting at Richmond Code CampRegistration is still open. 

I will be presenting “MVC in the Real World” – Move beyond MVC 101 and dive into aspects of building robust, real-world MVC applications. This demo-heavy presentation will show how to fully unit test the presentation layer with mocking and Dependency Injection.  This session will show the benefits of using Inversion of Control (IoC) containers to create controllers with a custom controller factory. In addition to AJAX-enabling Views, we will explore how to build your own custom HTML helpers that can be reused across Views. By the end of the session we will cover Action filters, security, T4 templates, MvcContrib, FluentHtml, and more!

Hope to see you there.

Posted On Monday, September 28, 2009 5:57 AM | Comments (1)
MVC AJAX Form with jQuery Form Plugin and jQuery Thickbox

In a previous post, I showed how to submit an AJAX form in MVC with the jQuery Thickbox and the built-in MVC AJAX helpers.  If you read that post first, it will show the complete context for how to simply submit an AJAX form that is being rendered inside a jQuery Thickbox with built-in MVC AJAX helpers.  But what if you want to stick to a pure jQuery solution?  That is also simple enough to do.  Instead of using the Ajax.BeginForm() method, you can use the jQuery Form Plugin.  The code is almost identical to the previous implementation.  The only differences are in the Index.ascx partial view:

   1:  <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcAjaxForm.Models.ContactMessage>" %>
   3:  <script type="text/javascript">
   4:      $(function() {
   5:          $("#contactForm").ajaxForm({ target: '#contactArea' });
   6:      });
   7:  </script>
   9:  <h2>Contact</h2>
  11:  <form id="contactForm" action="<%=Url.Action("Index", "Contact") %>" method="post">
  12:      <div id="contactArea">
  13:          Email Address: <%=Html.TextBox("EmailAddress") %> <br /><br />
  14:          Message: <%=Html.TextArea("MessageText")%>
  15:          <input type="submit" />
  16:      </div>
  17:  </form>

On line 11, you will now specify a normal HTML form just like you might specify any other form in MVC (you could also use the Html.BeginForm() method as well if you have that preference). The only additional thing you have to implement is the one line of code shown on line 5 above.  This is making a call to the ajaxForm() method (that comes in the Form Plugin library) and passes in the options to indicate that the response from the server should be displayed in the “contactArea” div.  This is just one example of how to use the Form plugin – you can also find numerous example within the Form Plugin’s documentation site.

Posted On Tuesday, September 1, 2009 7:28 AM | Comments (1)

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