Creating Dynamic Forms with MVC and jQuery

About six months ago Phil Haack wrote a post on how to use the DefaultModelBinder to bind a form to a list. He concluded by asking how this functionality would be used. In this post I'm going to show how a dynamic form that uses the model binder’s ability to work with lists can be created using MVC and jQuery. The example I’m going to use was inspired by an application I'm working on that provides a web interface to the bug tracking system we used during the development of MVC. The application is not intended to become an internal tool, but rather to explore the capabilities of MVC and hopefully identify areas that can be improved in future releases. It also afforded me a chance to explore jQuery.

Background

The system we use for tracking bugs in MVC contains over 3000 databases spanning multiple products and product families. Apart from using the system to create and resolve bugs it allows users to create and save queries that are executed against a specific databases. For example, I could create a query to find all the work items that were assigned to me for RC1 of MVC. The interface provided by the application to accomplish this is fairly simple as shown below. jQuery and MVC provided all the necessary tools to design a web application that could mimic this behavior.

query

Sample Application

I’ve made the source code of the sample application available for download instead of posting everything here. Instead I’m just going to highlight some aspects of the application. The design can definitely be improved.

  • The JavaScript is embedded within the Create view. This avoids script code from being cached by the development server in Visual Studio (I got tired of remembering to hit Ctrl+F5 every time I launched the application when I modified the JavaScript). The downside of this is that it complicates script debugging in Visual Studio.
  • The only validation being performed by the controller is to check whether the form is empty (no rows were inserted by the user) and that any rows that are present have a value inside the corresponding textbox.

QueryController

Once the page for the Create view has completed loading it immediately makes a request to the controller to retrieve a list of all the field definitions. The definitions are stored on the client side to avoid going to the server every time a new row is added to the form.

   1: var fieldDefinitions = null;
   2:  
   3: $(document).ready(function() {
   4:     // Retrieve all the field definitions once the page is loaded.
   5:     $.getJSON("/Query/Fields", null, function(data) {
   6:         fieldDefinitions = data;
   7:     });
   8: });

The Fields action simply returns a list of definitions that have been created when the application starts. In a real application one might need to retrieve this data from a file, a web service or a database. The definitions are then serialized and consumed on the client when a new row is inserted into the form. If you go through the source code you’ll notice that the field definitions are stored inside a dictionary, hence the reference to the Values property in the code below. Using a dictionary makes accessing a field definition on the server easier during validation.

   1: public ActionResult Fields() {
   2:     return Json(FieldDefinitions.Fields.Values);
   3: }

The Create action takes two parameters. The first is a string that contains a comma separated list of field names that appear in the query and will be used during validation when the form needs to be generated again in case there were errors. The second is a list of fields with each entry representing a single row on the form that was submitted. The action doesn’t do much right now. It performs some basic validation and if successful, creates a string representation of the query the user created that is echoed back in the Results view.

   1: public ActionResult Create() {
   2:     return View();
   3: }
   4:  
   5: [AcceptVerbs(HttpVerbs.Post)]
   6: public ActionResult Create(string queryFields, IList<Field> query) {
   7:     if (!ValidateQuery(query)) {
   8:         ViewData["queryFields"] = queryFields;
   9:         return View();
  10:     }
  11:  
  12:     StringBuilder queryString = new StringBuilder();
  13:  
  14:     foreach (Field field in query) {
  15:         queryString.AppendFormat("{0} {1} {2} {3}", field.AttachWith, field.Name, field.Operator, field.Value);
  16:         queryString.AppendLine();
  17:     }
  18:  
  19:     ViewData["queryString"] = queryString.ToString();
  20:  
  21:     return View("Results");
  22: }

The Field model used to represent a single query row is very simple.

   1: public class Field {
   2:     public string AttachWith {
   3:         get;
   4:         set;
   5:     }
   6:  
   7:     public string Name {
   8:         get;
   9:         set;
  10:     }
  11:  
  12:     public string Operator {
  13:         get;
  14:         set;
  15:     }
  16:  
  17:     public string Value {
  18:         get;
  19:         set;
  20:     }
  21: }

 

Query View

Initially the user is confronted with a simple form that only contains two buttons; one to add a new row and another to submit the form.

EmptyQuery

I’ve used a table for the form layout since each row contains exactly the same elements and this makes it a bit easier to keep the form organized.

   1: <form action="/Query/Create" method="post"><input id="queryFields" name="queryFields" type="hidden" value="" />
   2:   <table id="queryTable">
   3:     <thead>
   4:       <tr>
   5:         <th>Attach With</th>
   6:         <th>Field</th>
   7:         <th>Operator</th>
   8:         <th>Value</th>
   9:       </tr>
  10:     </thead>
  11:     <tbody>
  12:     </tbody>
  13:   </table>
  14:   <p>
  15:     <input type="button" value="Add Field" onclick="addQueryField()" />    
  16:     <input type="submit" value="Submit Query" onclick="updateQueryFields()" />
  17:   </p>
  18: </form>

When a user clicks on the Add Field button the addQueryField function will insert a new row into the table. The row contains three dropdown lists, a text field and a button to remove the row from the form.

CreateQuery

Since the form will be bound to an IList<Field> we need to ensure that the indices generated for the name attribute in the various HTML elements remain sequential. If we end up with non-sequential indices then the form fields will not be bound properly to our model. The HTML for the newly added row in the example above will look like this:

row0html

Determining the value of the index used by the various name attributes is quite easy using jQuery’s selectors as shown below on line 3.

   1: function addQueryField() {
   2:     // Determine the index of the next row to insert
   3:     var index = $("tr[id^=queryRow]").size();
   4:     // Create DOM element for table row
   5:     var oTr = $(document.createElement("tr")).attr("id", "queryRow" + index);
   6:     // Create DOM element for value textbox
   7:     var oValueTextBox = $(document.createElement("input")).attr("name", "query[" + index + "].Value").attr("id", "Value"+index).attr("type", "text");
   8:     // Create DOM element for Name select list
   9:     var oSelectListName = createSelectListForName(index);
  10:     // Create DOM element for Remove button to delete the row from the table
  11:     var oButtonRemove = $(document.createElement("input")).attr("type", "button").attr("value", "Remove").attr("id", "Remove"+index).click(function() {
  12:         removeRow(index);
  13:     });
  14:     // Create <td> elements
  15:     oTr.append($(document.createElement("td")).append(createSelectListForAttachWith(index)));
  16:     oTr.append($(document.createElement("td")).append(oSelectListName));
  17:     oTr.append($(document.createElement("td")).append(createSelectListForOperator(oSelectListName.val(), index)));
  18:     oTr.append($(document.createElement("td")).append(oValueTextBox).append(oButtonRemove));
  19:     // Insert the row into the table
  20:     $("#queryTable").append(oTr);
  21: }

On line 12 we bind the removeRow function to the onclick event of the the Remove button. This function is responsible for two tasks:

  1. It needs to remove the row from the table.
  2. It needs to update the remaining rows to keep the indices sequential.

Updating the rows is not a difficult task, but the syntax required by the DefaultModelBinder to specify a property and index for the model conflicts with the syntax used by the selectors in jQuery. The ‘[‘ and ‘]’ characters are used to specify attribute values inside a selector. To work around this the id attributes of the elements that are inserted into the DOM only contains alphanumerical characters. This allows the removeRow function to select and update each row using jQuery selectors. On lines 8, 9, 13, and 14 we need to unbind our functions before rebinding them since their index parameters have changed. Without doing the .unbind() jQuery will just chain the event handlers and you’ll end up with some really funny behavior.

   1: function removeRow(index) {
   2:     // Delete the row
   3:     $("#queryRow" + index).remove();
   4:     // Search through the table and update all the remaining rows so that indices remain sequential
   5:     $("tr[id^=queryRow]").each(function(i) {
   6:         $(this).attr("id", "queryRow" + i);
   7:         $("td select[id^=AttachWith]", $(this)).attr("name", "query[" + i + "].AttachWith").attr("id", "AttachWith" + i);
   8:         $("td select[id^=Name]", $(this)).attr("name", "query[" + i + "].Name").attr("id", "Name" + i).unbind("change").change(function() {
   9:             updateOperator(i);
  10:         });
  11:         $("td select[id^=Operator]", $(this)).attr("name", "query[" + i + "].Operator").attr("id", "Operator" + i);
  12:         $("td input[id^=Value]", $(this)).attr("name", "query[" + i + "].Value").attr("id", "Value" + i);
  13:         $("td input[id^=Remove]", $(this)).attr("id", "Remove" + i).unbind("click").click(function() {
  14:             removeRow(i);
  15:         });
  16:     });
  17: }

Validation

Performing client side validation on a dynamic form makes perfect sense and jQuery provides the necessary tools to do this. Depending on how your application works it’s reasonable to expect that some elements can only be validated on the server. The only problem that needs to be solved is displaying all the original fields that the user added when redirecting back to the form. To solve this, I included a hidden input named queryFields. When the user hits the submit button it executes a function to update the hidden input with a comma separated list of fields. When validation fails the string is placed into ViewData and the form the user submitted can be generated using the HTML helpers.

   1: <%
   1:  
   2:    string queryFields = ViewData["queryFields"] as string;
   3:    if (!String.IsNullOrEmpty(queryFields)) {
   4:        int i = 0;
   5:        foreach (string field in queryFields.Split(new[] { ',' })) {
   6:            string queryPrefix = "query["+Convert.ToString(i)+"].";
   7:            string attachWithName = queryPrefix + "AttachWith";
   8:            string fieldName = queryPrefix + "Name";
   9:            string operatorName = queryPrefix + "Operator";
  10:            string valueName = queryPrefix+"Value";
  11:            string trId = "queryRow"+Convert.ToString(i); 
%>
   2:           
   3:            <tr id="<% =trId %>">
   4:              <td><%
   1:  =Html.DropDownList(attachWithName, FieldDefinitions.AttachWith, new { id = "AttachWith" + Convert.ToString(i) }) 
%></td>
   5:              <td><%
   1:  =Html.DropDownList(fieldName, FieldDefinitions.FieldNames, new { id = "Name" + Convert.ToString(i), onchange="updateOperator("+Convert.ToString(i)+")"}) 
%></td>
   6:              <td><%
   1:  =Html.DropDownList(operatorName, FieldDefinitions.Fields[field].Operators, new { id = "Operator" + Convert.ToString(i) }) 
%></td>
   7:              <td>
   8:                <%
   1:  =Html.TextBox(valueName, null, new { id = "Value" + Convert.ToString(i) })
%>
   9:                <input type="button" value="Remove" onclick="removeRow(<% =Convert.ToString(i) %>)" />
  10:                <%
   1:  =Html.ValidationMessage(valueName) 
%>
  11:              </td>
  12:            </tr>
  13:            i++;
  14:        }
  15:    } %>
QueryValidation 

Once the system passes validation you should see a screen that echoes the query back to you. Consider the following query:

querysuccess

Hitting the Submit Query button will produce the result below.

queryResult

IE8 Quirks

While working on the application I mentioned at the beginning of this post I discovered a small bug in the developer tools of IE8 (Open IE8 and hit F12 to open the tools). When creating a new element in the DOM and setting its name attribute the toolbar will display the attribute as propdescname instead of name. The DOM is still correct though and the problem does not occur if you specified the name attribute explicitly in the HTML.

domie8

Conclusion

 

 

 

 

 

 

 

 

When I wrote the first version of my application I avoided using jQuery. The result of that was that my code only worked in IE. Getting it to work in Safari and FireFox took another day. Now I understand why, when talking to JavaScript developers, you sometimes see little drops of blood welling up in their eyes. jQuery on the other hand takes care of all the browser compatibility issues. Apart from this using jQuery made the code much easier to maintain and modify. I’m going to attribute that to two things: selectors and chaining. If you have any suggestions on how to improve the JavaScript in the example I’ve given I’d love to hear from you.

Comments

# re: Creating Dynamic Forms with MVC and jQuery

Tuesday, June 30, 2009 5:32 PM by Rafael Pol (Dominican Republic)

Excellent! Thanks for sharing!

# re: Creating Dynamic Forms with MVC and jQuery

Tuesday, June 30, 2009 6:00 PM by jeloff

@Rafael Glad you found this useful.

# re: Creating Dynamic Forms with MVC and jQuery

Monday, August 31, 2009 6:32 AM by Fergal

This is an excellent article. Very easy to understand and looks great in our application.

Thanks so much for taking the time to document this.

# re: Creating Dynamic Forms with MVC and jQuery

Thursday, April 8, 2010 8:08 AM by mikeceranski

Here is an example of using dynamic select lists in ASP.NET MVC with the help of jQuery.

www.codecapers.com/.../Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

# re: Creating Dynamic Forms with MVC and jQuery

Friday, August 13, 2010 9:36 AM by ccreaney

Thanks for sharing. For anyone using this with MVC 2 remember to add JsonRequestBehavior.AllowGet to the Json result.

# re: Creating Dynamic Forms with MVC and jQuery

Tuesday, September 13, 2011 10:37 AM by HaBo

Hi, I tried to run the downloaded project. But it is not working on my machine, it shows the two Buttons Add and submit

when i click Add it is not populating any fields?

what could be wrong.

# re: Creating Dynamic Forms with MVC and jQuery

Tuesday, November 29, 2011 6:15 AM by swapnil

Hi, I tried to run this project. But it is not working on my pc, it shows the two Buttons Add and submit and

when i click on Add it is not populating any fields?

# re: Creating Dynamic Forms with MVC and jQuery

Thursday, December 15, 2011 7:22 PM by duncnainnyGal

Haha that's rediculous. No way

# re: Creating Dynamic Forms with MVC and jQuery

Wednesday, January 16, 2013 1:41 AM by Pressley

I'm not sure why but this web site is loading extremely slow for me. Is anyone else having this problem or is it a issue on my end? I'll check back later on and see if the problem still exists.

# re: Creating Dynamic Forms with MVC and jQuery

Sunday, April 7, 2013 6:59 PM by Pineda

What i do not understood is if truth be told how you're no longer really a lot more well-favored than you might be now. You are so intelligent. You recognize therefore significantly in the case of this matter, produced me for my part believe it from so many numerous angles. Its like women and men are not involved until it is one thing to accomplish with Woman gaga! Your own stuffs great. At all times take care of it up!