ASP.Net MVC HtmlHelper Method for Creating Buttons With Forms and Optional Images: Part 1

Straight from the “I made this and maybe you can find a use for it” bin, here is one of two ways I create image buttons. Why would you care? I have no idea, but two of the catches that comes with buttons is they have to be wrapped in a form and the fact you have to, far as I know, add hidden value inputs to the form to carry over the values from a url (Action of the form). This take care of both, can ya’ belee it?

This guy takes in a url (ie you already know what it should be, say from pre determined redirect value), breaks down the url to get the request parameters to make hidden inputs, and adds the button. Now I went with the image being a style for the button instead of passing in a location for the image itself, mostly because I find that to be easier to handle from a design perspective since it’s possible that particular image might be used a lot on a site. Seems easier, if you need to change the image, to change one css class then to have to search and replace a million image urls. But what do I know? No seriously, what do I know?

public static String OptionalImageButton(this HtmlHelper helper, String returnUrl, Boolean viewAsImage, FormMethod formMethod, String buttonText, String formClass, String imageClass, String buttonClass)
  StringBuilder html = new StringBuilder();
  //Create the form along with the formMethod passed in
  html.Append("<form action=\"" + returnUrl + "\" class=\"" + formClass + "\" method=\"" + formMethod + "\"> ");

  //This is the method from this post, it just give me all the hidden inputs from a url
  //This is where you might hate me.  Instead of having an image for the button
  //I am using a css class to hold the image.  Just a choice, makes it easier
  //in my opinion
  if (viewAsImage)
    html.Append("<input type=\"submit\" value=\"\" class=\"" + imageClass + "\" />");
    //If no image, then just put a text button.
    html.Append("<input type=\"submit\" value=\"" + buttonText + "\" class=\"" + buttonClass + " \" ></input>");

  //End the form

  return html.ToString();

You might notice the FormClass parameter, or maybe you didn’t because you can’t read. If that’s the case, then we’re both wasting time. However, if you did notice then you might find it odd. As it is, a form has to be inline in order to show buttons next to each other. After all, by default a form is a block element like a div. Therefore, the form itself will need a class or the style set. Now I could default this to inline, but for the sake of giving power to the programmer, it’s left as a parameter. After all, maybe not all buttons should be inline.

And usage:

  Html.OptionalImageButton(Model.ReturnUrl, Model.UserShowImages, "Return", "inline", "returnButton", "button080SmallTextAction")

Pretty easy to use and clean… well clean for MVC at least. Next MVC post I’ll show the route driven version of this “control”.