MattButton.com

The current project I’m working on involves a search page with multiple submit buttons in a single HTML form. Each submit button triggers a different behavior while posting all of the form data to the controller.

This method is compatible with both IE 6+ and Firefox. It also avoids the IE button bug where button values are not passed on HTTP POST.

After discussing a few design options we decided to allow the user to add the desired search parameters via selecting them one by one from a drop down list. The user will commonly want up to three parameters at a time and may want to remove parameters after adding.

The relevant basic requirements of the search page were as follows:

• The form must work with JavaScript turned off
• 26 optional parameters.
• Display only the active parameters on screen.
• The user must be able to add/remove parameters to/from the screen.
• The user must be able to select individual items from the search results and download full XML certificate data for the selected records.
• The user must be able to export all search results to a CSV file for processing in Excel.

Buttons on forms allow us to go through a single action on the controller, we’ll call this PerformAction.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult PerformAction(HomeModel model, ButtonActionModel buttonAction)
{
	model.Items.Where(x => x.Key == buttonAction.ActionValue);
	if (buttonAction.ActionName == ButtonActionNames.Remove.ToString())
	{
		RemoveItem(buttonAction.ActionValue, model);
	}
	TempModel = model;
	// Post-get-redirect pattern:
	// http://blog.jorritsalverda.nl/2010/03/10/maintainable-mvc-post-redirect-get-pattern/
	return RedirectToAction(ViewNames.Index, null);
}

PerformAction accepts two parameters; HomeModel contains all of the form data and ButtonActionModel contains the button parameter data.

public class ButtonActionModel
{
	public string ActionName { get; set; }
	public string ActionValue { get; set; }
}

The button model contains the name of the action (i.e. “Remove”) and the value of the action (i.e. “Parameter1″). The names and values are arbitrary and can be handled however you like in the PerformAction method.

In HTML, the buttons look like:

<input name="buttonaction:Remove:Parameter1" type="submit"
       value="Remove Parameter 1"></input>

We’ll need a custom model binder to create the ButtonAction model.

public class ButtonActionBinder : DefaultModelBinder
{
	public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
	{
		var request = controllerContext.HttpContext.Request;
		var formKeys = request.Form.AllKeys;
		ButtonActionModel result = null;
		var indexedbutton = formKeys.Where(x => x.StartsWith("buttonaction")).FirstOrDefault();
		if (indexedbutton != null)
		{
			result = new ButtonActionModel();
			var split = indexedbutton.Split(':');
			result.ActionName = split[1];
			if (split.Length > 2) result.ActionValue = split[2];
		}
		return result;
	}
}

The model binder above is fairly simple, searching the submitted form data for “buttonaction” which is the first part of the button name.

The binder then splits the button name based on the colons, using the second element as the ActionName and the third element as the ActionValue. Once this is done, the binding is complete and the bound model is returned.

Add the model binder to Application_Start in Global.asax.cs

ModelBinders.Binders.Add(typeof(ButtonActionModel),
                         new ButtonActionBinder());

Here’s an extended example demonstrating multiple parameterised form submit buttons without Javascript: MvcMultiSubmit

We used to use Balsamiq for mockups, however Expression Blend 4 and Sketchflow has some compelling features.

Sketchflow is missing a sketch style grid among other things, so we looked to Sketchables to provide.

Referencing Sketchables.Silverlight.dll wasn’t enough, the new controls weren’t appearing in the “Assets” panel. Initially I tried referencing the designer files, but that yielded no results. Reading the blog comments from hardcodet.net there was the following one-liner:

The libraries in the “design” folder are automatically picked up. They are used in Blend in order to provide the design time support.

The “Design” folder must sit below the folder which contains the referenced Sketchables.Silverlight.dll; Expression Blend 4 silently scans dlls in the design folder and loads them into the Assets panel.

I was having an issue where after pushing my changes to bitbucket, the changesets listed a different user as having pushed the files.

For bitbucket, the commit username has to match your bitbucket username.

As commits in Mercurial are local, we have no way of controlling that you have set your username correctly. It is important for you to set this up in such a way that we can identify your user account on Bitbucket when you push your commits to us.

In tortoise-hg, the username setting is available through global settings->commit