Posts
208
Comments
1144
Trackbacks
51
MVC HTML Helper – SubmitLink

Often when creating web applications, it’s common for us to want to submit or post forms to the server by using a hyperlink rather than an HTML submit button.  It might be visually more appealing/consistent or whatever your reason might be to have your buttons look like this:

The Cancel button is easy because we can just use a normal Hmtl.ActionLink helper to redirect to whatever our cancel page is.  But what to do for the Save link given that we don’t have anything in MVC out of the box that is analogous to the LinkButton in ASP.NET web forms?  One solution might be to just use JavaScript like this:

   1:  <a href="javascript:document.mainForm.submit();">Save</a>
   2:  <%=Html.ActionLink("Cancel", "Index") %>

But that is somewhat ugly and the paradigm is inconsistent with the Cancel button where we’re using a normal ActionLink.  An alternative for this scenario is to just create a simple SubmitLink HTML helper that will allow you’re code to look like this:

   1:  <%=Html.SubmitLink("Save", "mainForm") %>
   2:  <%=Html.ActionLink("Cancel", "Index") %>

You can see this allows us to have a consistent coding paradigm.  The first argument is the link text and the second is the form name.  The implementation looks like this:

   1:  public static string SubmitLink(this HtmlHelper htmlHelper, string linkText, string formName, object htmlAttributes)
   2:  {
   3:      TagBuilder tagBuilder = new TagBuilder("a");
   4:      tagBuilder.MergeAttribute("href", string.Format("javascript:document.{0}.submit();", formName));
   5:      tagBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
   6:      tagBuilder.InnerHtml = linkText;
   7:   
   8:      return tagBuilder.ToString();
   9:  }
  10:   
  11:  public static string SubmitLink(this HtmlHelper htmlHelper, string linkText, string formName)
  12:  {
  13:      return htmlHelper.SubmitLink(linkText, formName, null);
  14:  }

Notice there is an overload to takes htmlAttributes so that you can apply any arbitrary attributes you might want.  For example, you might want to apply a CSS class that looks like this:

   1:  <%=Html.SubmitLink("Save", "mainForm", new { @class = "foo" }) %>

These types of little HTML helpers are so easy to build with MVC, especially given that we can use the TagBuilder class, that it really enables a lot of re-use across your applications.

posted on Wednesday, June 3, 2009 1:56 PM Print
Comments
Gravatar
# re: MVC HTML Helper – SubmitLink
Erik Juhlin
6/14/2009 3:45 PM
And how well would this work with JavaScript turned off?
An unobtrusive script would be a much better solution. A script that finds the button and replaces it with a link.

But for a look like you suggest or many other ones I think <button> will be enough...
Gravatar
# re: MVC HTML Helper – SubmitLink
Martin
1/11/2010 9:37 AM
Taken, thank you!
Gravatar
# re: MVC HTML Helper – SubmitLink
Martin
1/11/2010 9:37 AM
Taken, thank you!
Gravatar
# Hermes Birkin,Buy Hermes Birkin,Birkin Handbags,At Hermes Shop
Hermes Birkin
7/22/2010 9:01 PM
buyhermesbirkin.com Hermes Sale,Cheap hermes birkin handbags
At Hermes Shop - Hermes Birkin 35CM Hermes Birkin 40CM ecommerce,online shopping
Gravatar
# re: MVC HTML Helper – SubmitLink
dilip bane
4/13/2012 7:44 AM
its awosum info
Gravatar
# Wealth Creation
Mike Henry
9/12/2012 7:46 AM
Economic Warfare actually provides some strong and serious solutions for overcoming the forces against wealth creation, and lays out a strategy for today's financial environment and economic freedom.
Gravatar
# help for html and javascript
tahseen
12/28/2012 6:28 AM
make one link but i want click on this link page open but link hide and closed page then written link to see
thanks

Post Comment

Title *
Name *
Email
Comment *  
Verification

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers




Google My Blog

Tag Cloud