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
Recent Comments