ASPMVC Asynchronous Forms with jQuery

Having looked into using the ASPMVC AjaxHelper there was one or two things I wasn’t happy with so I decided to try an alternative using jQuery. In this post I will present a simple technique for facilitating asynchronous form posts using jQuery.

I want to be able to display an Edit view allow the use the modify the fields and then post the form back to the server asynchronously. If any validation problems occur on the server they will be rendered in situ. In Figure 1 illustrates my requirement. I’ve selected a row from the grid in the background and clicked the Edit hyperlink. This opens a dialog box with the form rendered for editing.

Figure1[9]

Figure 1.

I’m using jQuery-UI to provide the look and feel and the dialog box and the jqGrid Plugin for the grid. The post will only look at the form we will leave the grid for another post.

To use the technique described in this post you will need the latest versions of both jQuery (1.4.4) and the jQuery Form Plugin (2.52). I’ve provided links for your convenience.

jQuery Download
jQuery Form Plugin Download

The technique is presented here is in the context of an ASPMVC application however it should be easily portable to other web application paradigms.

I will start by creating an AjaxHelper extension method called jQueryBeginForm extension (see Figure 2). This could easily have been an HtmlHelper.

Figure2[6]

Figure 2.

Reflector was my friend to help create this method. I added the htmlAttributes.Add statement to render an onsubmit handler. This is were we incorporate the jQuery Form Plugin. Essentially we use this plugin to post a form asynchronously and replace the form with the response received from the server. This is specified by the replaceTarget and target options passed to the ajaxSubmit method.

When this is used in association with an Edit Controller action and view it makes round trip editing of forms quite simple. I have omitted client side validation, we will cover this in another post.

So that the technique covered lets see how to use it in an ASPMVC application. In Figure 3 we have a strongly typed partial Edit view created by the Visual Studio tooling. I have replaced the Html.BeginForm with Ajax.jQueryBeginForm.

Figure3[6]

Figure 3.

This Edit view will render a form that will automagically submit itself asynchronously. From Figure 1 I illustrate how showing the form in a dialog box. The following Javascript in Figure 4 provides this functionality.

Figure4[6]

Figure 4.

I have a controller called Protocol so I can call the function in Figure 4 with the following crud(‘Protocol/Edit/3’). This will result in the execution of the Edit action of the Protocol controller ultimately displaying a dialog box containing the Edit view.

Figure5[6]

Figure 5.

Figure 5 illustrates the Edit action of the Protocol controller. I do a check to validate the input object and then pass it on to the Data Access Object (DAO). The validation is achieved using Annotations (see the IBranchGatewayProtocol interface and BranchGatewayProtocol partial class in the downloadable sample). There are also Create actions in the sample which are not a whole lot different to the Edit just mentioned.

The sample project can be downloaded from Github.

Tagged with: , ,
Posted in ASPMVC, Microsoft

Leave a Reply

Your email address will not be published.