HTML Cute Submit Button (Server Control )

• Download demo project - 20.3 Kb

Introduction

This article is about creating a custom good-looking submit button. There are a lot of situations, where you will find necessary of using such a control. If you create one site with a particular theme, it is naturally to want all parts (controls) to use the same style. Sometimes regular 'Submit' button doesn't fit, never mind you apply any style on it. These situations happen very often to me, so I created a server control, which I use instead of the regular one.

I will not explain the basics of creating a ‘User Web Control’, but only specific parts. Here are steps you need to take for creating such a control:

1. Create a web application (I am using C# as implementation language)
2. Add Custom Web Control
3. Write necessary code
4. Put control into container (web form)

Explanations

1. Create a web application – It is not necessary to create a web application. I have created it, only for debugging purpose. You can create a control without application.
2. Add Custom Web Control - if you skip creating a web application, then you need not do ADD, but create a Web Control project.
3. Write necessary code – because code is so trivial I will not emphasize on it.
   C#

   namespace CSBApplication
   {
       using System;
       using System.Data;
       using System.Drawing;
       using System.Web;
       using System.Web.UI.WebControls;
       using System.Web.UI.HtmlControls;
       using System.Web.UI;
   
       public abstract class CuteSubmitButton : 
                           System.Web.UI.UserControl
       {
           private string m_title = " ";
           private string m_formName = "";
           private string m_action = "";
           private string m_status = "enabled";
           private string m_imagesPath = "";
           private string m_linkStyleClass = "";
           private int m_tabIndex = -1;
           private string m_enabledHelpTitle = "";
           private string m_disabledHelpTitle = "";
   
           private static bool m_ShowScript = true;
   
           /****************************************************/
           /* properties needed for configuration              */
           /****************************************************/
           public string Title
           {
               get { return m_title; }
               set { m_title = value; }
           }
           public string FormName
           {
               get { return m_formName; }
               set { m_formName = value; }
           }
           public string Action
           {
               get { return m_action; }
               set { m_action = value; }
           }
           public string Status
           {
               get { return m_status; }
               set { m_status = value; }
           }
           public string ImagesPath
           {
               get { return m_imagesPath; }
               set { m_imagesPath = value; }
           }
           public string LinkStyleClass
           {
               get { return m_linkStyleClass; }
               set { m_linkStyleClass = value; }
           }
           public int TabIndex
           {
               get { return m_tabIndex; }
               set { m_tabIndex = value; }
           }
           public string EnabledHelpTitle
           {
               get { return m_enabledHelpTitle; }
               set { m_enabledHelpTitle = value; }
           }
           public string DisabledHelpTitle
           {
               get { return m_disabledHelpTitle; }
               set { m_disabledHelpTitle = value; }
           }
           /****************************************************/
           private void Page_Load( object sender, System.EventArgs e )
           {
               m_ShowScript = true;
           }
           /****************************************************/
           protected override void Render( HtmlTextWriter output )
           {
               if( m_ShowScript )
                   this.Page.Response.Write( getScript() );
   
                           // submit button status check
               string html;
               if( m_status.ToLower().CompareTo( "disabled" ) != 0 )
                   html = getEnabledHTML();
               else
                   html = getDisabledHTML();
   
               this.Page.Response.Write( html );
   
               m_ShowScript = false;
           }
           /****************************************************/
           private string getScript()
           {
               string script = "\n<script lang=JavaScript>\n";
               script += "function submitForm( form , action )\n";
               script += "{\n";
               script += " form.action = action;\n";
               script += " form.submit()\n";
               script += "}\n";
               script += "</script>\n";
   
               return script;
           }
           /****************************************************/
           /* warning IMG tags are placed into                 */
           /* 'just for correct viewing                        */
           /****************************************************/
           private string getEnabledHTML()
           {
               string TabIndex = "";
               string HelpTitle = "";
               string LinkClass = "";
               string ImagesPath = m_imagesPath + "/";
   
               ImagesPath += "enabled/";
               HelpTitle = "title='" + m_enabledHelpTitle + "'";
   
               if( m_linkStyleClass.Length != 0 )
                   LinkClass = "class='" + m_linkStyleClass + "'";
   
               if( m_tabIndex != -1 )
                   TabIndex = "tabindex='" + m_tabIndex + "'"; 
               
               string html = "\n<TABLE align='center' cellspacing='0' 
                                         cellpadding='0' border='0'>\n";
               html += "<TR>\n";
               html += " <TD nowrap><'IMG' border='0' src='" + 
                                 ImagesPath + "left.gif'></TD>\n";
               html += " <TD nowrap border='0' background='" + ImagesPath 
                           + "middle.gif'><A " + 
                           LinkClass + " " +  TabIndex + 
                           " href='javascript:submitForm( document." +
                           m_formName + " , \"" + m_action + "\" )' " + 
                           HelpTitle +">  " +
                           m_title + "  </A></TD>\n";
               html += " <TD nowrap><'IMG' border='0' src='" + 
                           ImagesPath + "right.gif'></TD>\n";
               html += "</TR>\n";
               html += "</TABLE>\n";
   
               return html;
           }
           /****************************************************/
           /* warning IMG tags are placed into                 */
           /* 'just for correct viewing                        */
           /****************************************************/
           private string getDisabledHTML()
           {
               string TabIndex  = "";
               string HelpTitle = "title='" + m_enabledHelpTitle + "'";
               string LinkClass = "";
               string ImagesPath = m_imagesPath + "/disabled/";
   
               if( m_linkStyleClass.Length != 0 )
                   LinkClass = "class='" + m_linkStyleClass + "'";
   
               if( m_tabIndex != -1 )
                   TabIndex = "tabindex='" + m_tabIndex + "'"; 
               
               string html = "\n<TABLE align='center' cellspacing='0' 
                                       cellpadding='0' border='0'>\n";
               html += "<TR>\n";
               html += " <TD nowrap><'IMG' border='0' src='" + 
                               ImagesPath + "left.gif'></TD>\n";
               html += " <TD nowrap border='0' background='" + 
                           ImagesPath + "middle.gif' " + 
                           LinkClass + " " +  TabIndex + " " + HelpTitle 
                           +">  " + m_title + "  </TD>\n";
               html += " <TD nowrap><'IMG' border='0' src='" 
                           + ImagesPath + "right.gif'></TD>\n";
               html += "</TR>\n";
               html += "</TABLE>\n";
   
               return html;
           }
       
           #region Web Form Designer generated code
           override protected void OnInit( EventArgs e )
           {
               InitializeComponent();
               base.OnInit(e);
           }
   
   
   
           private void InitializeComponent()
           {
               this.Load += new System.EventHandler(this.Page_Load);
           }
           #endregion
       }
   }

4. Put control into a container. Here is the code to be placed into the container:
   ASP.NET

   <%@ Register TagPrefix="uc1" TagName="CuteSubmitButton" 
                                   Src="CuteSubmitButton.ascx" %>
   
   <uc1:CuteSubmitButton id="CuteSubmitButton1" Title="enabled button" 
          Action="CSBTestWebForm.aspx" ImagesPath="images" 
          Status="enabled" 
          LinkStyleClass="cutesubmitbutton" 
          EnabledHelpTitle="This button is enabled." 
          FormName="CSBForm" runat="server">
   </uc1:CuteSubmitButton>

   or

   ASP.NET

   <uc1:CuteSubmitButton id=CuteSubmitButton2 title="disabled button" 
          runat="server" FormName="CSBForm" Status="disabled" 
          ImagesPath="images" Action="CSBTestWebForm.aspx" 
          EnabledHelpTitle="This button is disabled." 
          LinkStyleClass="cutesubmitbutton">
   </uc1:CuteSubmitButton>

   You should define the css class cutesubmitbutton. Example:

   HTML

   <STYLE>
       .cutesubmitbutton 
       { FONT: 12px Verdana,Arial,Helvetica,Sans Serif;
       COLOR: #003366; TEXT-DECORATION: none }
   </STYLE>

Hope you like my solution.