Download the Code

I’ve been working on quite a few different projects using ASP.Net MVC 1.0, and I frequently encounter two things that aren’t directly supported with the first release:

  • The lack of an ActionButton
  • The inability to send a view back asynchronously that includes javascript + html

The first issue is somewhat trivially solved by including an AjaxHelper Form wrapped around an input, but that is more code than I care to write for dozens of buttons scattered about my project(s)*.

For the second issue, the workaround I used to use is to include all the javascript that I need included in the base page.  It works, but it makes for a rather cluttered mess, and you needlessly include javascript that some users may never use ( or possibly include javascript for features a user shouldn’t have access to ).

A New AjaxHelper With jQuery

By replacing the existing AjaxHelper with a new one that utilizes jQuery, I’ve been able to implement both an ActionButton AND a way to return Views that include both javascript + html.

I’ve included a sample project containing the new helper extensions & the necessary javascript file used by the new form methods.  If you run the sample project, I’ve included a small example of the ActionButton & asynchronous javascript/html return:

image 

In order to use the project files in a different project, you’ll need to do a few things.

1) Include the files located in the sample project under AjaxHelperHarness.UI.Ajax somewhere in a dll referenced by your application:

image

2)  Include the jquery.ajaxform.js file into your web application:

image

3) Replace the current System.Web.Mvc.Ajax namespace with the one that houses the new AjaxHelper files ( in this case AjaxHelperHarness.UI.Ajax):

<namespaces>
    <add namespace="System.Web.Mvc"/>
    <add namespace="System.Web.Mvc.Html"/>
    <add namespace="AjaxHelperHarness.UI.Ajax"/>
    <add namespace="System.Web.Routing"/>
    <add namespace="System.Linq"/>
    <add namespace="System.Collections.Generic"/>
</namespaces>

4) Reference the jquery.ajaxform.js script file in either your master page or the content page:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.ajaxform.js") %>">
</script>

And you’re ready to roll!

The signatures are the same as the old AjaxHelper, so you won’t need to alter any code in order to utilize the enhanced extension methods.

Future Enhancements

While the current version of the AjaxHelper works well, I’m still debating a better way to handle form functions currently added thorugh the external javascript file.  I’d love to be able to have them automatically injected into the page, but I haven’t come up with a clean way to do so.  I’d love to use something similar to RegisterScriptInclude like we see in WebForms.

- Colin

 

* – On a more philosophical thought, I’ve been puzzled why there’s an ActionLink in the AjaxHelper and not an ActionButton.  In an ajax-enabled world, I view a link as something that will actually cause a page referesh, and a button as something that will cause an action to occur on a current page ( sans refresh ).  I’m guessing that the inclusion of the ActionLink in the AjaxHelper is just to keep it consistent with the HtmlHelper, but perhaps there’s a better one than that.