Site Sections
Posts
60
Comments
36
Trackbacks
18
<< Facebook, Twitter & LinkedIn Updated | Home | This Was a Journey >>
ASP.NET HTML Extension (Submit Button, Reset Button & Button)

I sat down reading one of Stephen Walther's blogs and noticed that he mentions a way to create extensions and talks about ordered lists and unordered lists.  At the top, he had mentioned something that I had taken interest in.  He said that a potential use is for a Submit Button, so when I couldn't find something that had already been created out in the world I decided to write my own.

Some of the considerations I looked at while making this include:

  • The easiest method possible
  • Least amount of code
  • Want to do all Submit, Reset and plain Button HTML Extension Methods
  • Wanted each method to have the ability to add JavaScript and/or additional attributes in a manageable and easy way
  • Wanted it to be bloggable and easy to understand

First things first.  Here is the web page that I started off reading to get a basic understanding of what I was doing, Thanks to Mr. Walther.

Design Decisions, I put the helper into a folder called Utils and named it HtmlExtension since effectively what I am doing is extending the HTML functionality that is already built in the System.Web.Mvc.Html methods.  I decided to import it at the top of the .aspx page because there is only one page (with any buttons) right now in the current system I am writing.

  1. Right Click your project name
  2. Select Add -> New Folder
  3. Name the Folder whatever you would like (I used Utils)
  4. Right Click on New Folder
  5. Select Add -> Class
  6. Name the class (I used HtmlExtension)
  7. Add the following code
      8. using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.Mvc;
      using System.Text;
      using System.ComponentModel;
       
      namespace Names.Util
      {
          public static class HtmlExtension
          {
              // Methods
              public static string Button(this HtmlHelper helper, string value)
              {
                  return ("<input type=\"button\" value=\"" + value + "\" />");
              }
       
              public static string Button(this HtmlHelper helper, string value, object htmlAttributes)
              {
                  return ("<input type=\"button\" value=\"" + value + "\"" + HtmlAttributes(htmlAttributes) + "/>");
              }
       
              private static string HtmlAttributes(object htmlAttributes)
              {
                  StringBuilder builder = new StringBuilder();
                  foreach (PropertyDescriptor descriptor in TypeDescriptor.GetProperties(htmlAttributes))
                  {
                      builder.AppendFormat(" {0}=\"{1}\" ", descriptor.Name, descriptor.GetValue(htmlAttributes));
                  }
                  return builder.ToString();
              }
       
              public static string ResetButton(this HtmlHelper helper, string value)
              {
                  return ("<input type=\"reset\" value=\"" + value + "\" />");
              }
       
              public static string ResetButton(this HtmlHelper helper, string value, object htmlAttributes)
              {
                  return ("<input type=\"reset\" value=\"" + value + "\"" + HtmlAttributes(htmlAttributes) + "/>");
              }
       
              public static string SubmitButton(this HtmlHelper helper, string value)
              {
                  return ("<input type=\"submit\" value=\"" + value + "\" />");
              }
       
              public static string SubmitButton(this HtmlHelper helper, string value, object htmlAttributes)
              {
                  return ("<input type=\"submit\" value=\"" + value + "\"" + HtmlAttributes(htmlAttributes) + "/>");
              }
          }
       
      }
  8. Then add the import to your .aspx page

    9. <%@ Import Namespace="Names.Util" %>

     

That's it.  To reference your  new extensions, use

<%= Html.SubmitButton("Button Name") %>

 

To use attributes on your new Buttons, try

<%= Htme.SubmitButton("Button Name", new { onclick="SomeJavaScriptMethod()" } ) %>

Here is one example that shows how I use it.  In the index.aspx page, I have this:

<%= Html.SubmitButton("GO", new { onclick="TryThis();"} ) %>

The corresponding view source on the produced Html page shows:

<input type="submit" value="GO" onclick="TryThis();" />

I actually threw this together real fast and see quite a bit of room for improvement.  Let me know what you think or if you decide to use this.

 

Technorati Tags: ,,
posted on Tuesday, December 09, 2008 5:21 PM Print
Comments
Gravatar
# re: ASP.NET HTML Extension (Submit Button, Reset Button & Button)
Shams
12/9/2008 9:45 PM
  
Yo, pretty neat stuff. The code part doesn't render properly in Opera though!
Gravatar
# Bactrim Online
Bactrim Dosage
6/29/2010 9:34 PM
  
Bactrim Mrsa

Post Comment

Title *
Name *
Email
Url
Comment *  
Please add 2 and 7 and type the answer here:
News
My Developer Notebook! This also happens to be my opinion place. Thanks for coming by.
Archives
Post Categories