how to change a button into a imagebutton in asp.net c#

alt text http://[url=http://www.freeimagehosting.net/][img]http://www.freeimagehosting.net/uploads/06e679a07d.jpg[/img][/url]

How to change the button into image button... the button in the beginning has "Pick a date" when clicked a calender pops out and the when a date is selected a label at the bottom reading the date comes in and the text on the button changes to disabled... i want to palce a imagebutton having a image icon of the calender and rest of the function will be the same....

the code as follows:

using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;

[assembly: TagPrefix("DatePicker", "EWS")] namespace EclipseWebSolutions.DatePicker { [DefaultProperty("Text")] [ToolboxData("<{0}:DatePicker runat=server>")] [DefaultEvent("SelectionChanged")] [ValidationProperty("TextValue")] public class DatePicker : WebControl, INamingContainer { #region Properties

    public TextBox txtDate = new TextBox();
    public Calendar calDate = new Calendar();
    public Button btnDate = new Button();
    public Panel pnlCalendar = new Panel();

    private enum ViewStateConstants
    {
        ValidationGroup,
        RegularExpression,
        ErrorMessage,
        RegExText,
        CalendarPosition,
        FormatString,
        ExpandLabel,
        CollapseLabel,
        ApplyDefaultStyle,
        CausesValidation,
    }

    /// <summary>
    /// Defines the available display modes of this calendar.
    /// </summary>
    public enum CalendarDisplay
    {
        DisplayRight,
        DisplayBelow
    }

    /// <summary>
    /// Where to display the popup calendar.
    /// </summary>
    [Category("Behaviour")]
    [Localizable(true)]
    public CalendarDisplay CalendarPosition
    {
        get
        {
            if (ViewState[ViewStateConstants.CalendarPosition.ToString()] == null)
            {
                ViewState[ViewStateConstants.CalendarPosition.ToString()] = CalendarDisplay.DisplayRight;
            }
            return (CalendarDisplay)ViewState[ViewStateConstants.CalendarPosition.ToString()];
        }
        set
        {
            ViewState[ViewStateConstants.CalendarPosition.ToString()] = value;
        }
    }

    /// <summary>
    /// Text version of the control's value, for use by ASP.NET validators.
    /// </summary>
    public string TextValue
    {
        get { return txtDate.Text; }
    }

    /// <summary>
    /// Holds the current date value of this control.
    /// </summary>
    [Category("Behaviour")]
    [Localizable(true)]
    [Bindable(true, BindingDirection.TwoWay)]
    public DateTime DateValue
    {
        get
        {
            try
            {
                if (txtDate.Text == "") return DateTime.MinValue;

                DateTime val = DateTime.Parse(txtDate.Text);
                return val;
            }
            catch (ArgumentNullException)
            {
                return DateTime.MinValue;
            }
            catch (FormatException)
            {
                return DateTime.MinValue;
            }
        }
        set
        {
            if (value == DateTime.MinValue)
            {
                txtDate.Text = "";
            }
            else
            {
                txtDate.Text = value.ToShortDateString();
            }
        }
    }

    [Category("Behavior"), Themeable(false), DefaultValue("")]
    public virtual string ValidationGroup
    {
        get
        {
            if (ViewState[ViewStateConstants.ValidationGroup.ToString()] == null)
            {
                return string.Empty;
            }
            else
            {
                return (string)ViewState[ViewStateConstants.ValidationGroup.ToString()];
            }
        }
        set
        {
            ViewState[ViewStateConstants.ValidationGroup.ToString()] = value;
        }
    }

    /// <summary>
    /// The label of the exand button. Shown when the calendar is hidden.
    /// </summary>
    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("PickDate")]
    [Localizable(true)]
    public string ExpandButtonLabel
    {
        get
        {
            String s = (String)ViewState[ViewStateConstants.ExpandLabel.ToString()];
            return ((s == null) ? "PickDate" : s);
        }
        set
        {
            ViewState[ViewStateConstants.ExpandLabel.ToString()] = value;
        }
    }

    /// <summary>
    /// The label of the collapse button. Shown when the calendar is visible.
    /// </summary>
    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("Disabled")]
    [Localizable(true)]
    public string CollapseButtonLabel
    {
        get
        {
            String s = (String)ViewState[ViewStateConstants.CollapseLabel.ToString()];
            return ((s == null) ? "Disabled" : s);
        }
        set
        {
            ViewState[ViewStateConstants.CollapseLabel.ToString()] = value;
        }
    }

    /// <summary>
    /// Whether to apply the default style. Disable this if you want to apply a custom style, or to use themes and skins
    /// to style the control.
    /// </summary>
    [Category("Appearance")]
    [DefaultValue(true)]
    [Localizable(true)]
    public bool ApplyDefaultStyle
    {
        get
        {
            if (ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] == null)
            {
                ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = true;
            }
            return (bool)ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()];
        }
        set
        {
            ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = value;
        }
    }

    /// <summary>          
    /// Causes Validation          
    /// </summary>          
    [Category("Appearance")]
    [DefaultValue(false)]
    [Localizable(false)]
    public bool CausesValidation
    {
        get
        {
            if (ViewState[ViewStateConstants.CausesValidation.ToString()] == null)
            {
                ViewState[ViewStateConstants.CausesValidation.ToString()] = false;
            }
            return (bool)ViewState[ViewStateConstants.CausesValidation.ToString()];
        }
        set
        {
            ViewState[ViewStateConstants.CausesValidation.ToString()] = value;
            btnDate.CausesValidation = value;
        }
    }

    #endregion

    #region Events

    /// <summary>
    /// A day was selected from the calendar control.
    /// </summary>
    public event EventHandler SelectionChanged;

    protected virtual void OnSelectionChanged()
    {
        if (SelectionChanged != null)   // only raise the event if someone is listening.
        {
            SelectionChanged(this, EventArgs.Empty);
        }
    }

    #endregion

    #region Event Handlers

    /// <summary>
    /// The +/- button was clicked.
    /// </summary>
    protected void btnDate_Click(object sender, System.EventArgs e)
    {
        if (!calDate.Visible)
        {
            // expand the calendar
            calDate.Visible = true;
            txtDate.Enabled = false;
            btnDate.Text = CollapseButtonLabel;
            if (DateValue != DateTime.MinValue)
            {
                calDate.SelectedDate = DateValue;
                calDate.VisibleDate = DateValue;
            }
        }
        else
        {
            // collapse the calendar
            calDate.Visible = false;
            txtDate.Enabled = true;
            btnDate.Text = ExpandButtonLabel;
        }
    }

    /// <summary>
    /// A date was selected from the calendar.
    /// </summary>
    protected void calDate_SelectionChanged(object sender, System.EventArgs e)
    {
        calDate.Visible = false;
        txtDate.Visible = true;
        btnDate.Text = ExpandButtonLabel;
        txtDate.Enabled = true;
        txtDate.Text = calDate.SelectedDate.ToShortDateString();
        OnSelectionChanged();
    }

    #endregion

    /// <summary>
    /// Builds the contents of this control.
    /// </summary>
    protected override void CreateChildControls()
    {
        btnDate.Text = ExpandButtonLabel;
        btnDate.CausesValidation = CausesValidation;
        txtDate.ID = "txtDate";

        calDate.Visible = false;

        if (ApplyDefaultStyle)
        {
            calDate.BackColor = System.Drawing.Color.White;
            calDate.BorderColor = System.Drawing.Color.FromArgb(10066329);
            calDate.CellPadding = 2;
            calDate.DayNameFormat = DayNameFormat.Shortest;
            calDate.Font.Name = "Verdana";
            calDate.Font.Size = FontUnit.Parse("8pt");
            calDate.ForeColor = System.Drawing.Color.Black;
            calDate.Height = new Unit(150, UnitType.Pixel);
            calDate.Width = new Unit(180, UnitType.Pixel);
            calDate.DayHeaderStyle.BackColor = System.Drawing.Color.FromArgb(228, 228, 228);
            calDate.DayHeaderStyle.Font.Size = FontUnit.Parse("7pt");
            calDate.TitleStyle.Font.Bold = true;
            calDate.WeekendDayStyle.BackColor = System.Drawing.Color.FromArgb(255, 255, 204);
        }

        ConnectEventHandlers();

        pnlCalendar.Controls.Add(calDate);
        pnlCalendar.Style["position"] = "absolute";
        pnlCalendar.Style["filter"] = "alpha(opacity=95)";
        pnlCalendar.Style["-moz-opacity"] = ".95";
        pnlCalendar.Style["opacity"] = ".95";
        pnlCalenda开发者_高级运维r.Style["z-index"] = "2";
        pnlCalendar.Style["background-color"] = "White";

        if (CalendarPosition == CalendarDisplay.DisplayBelow)
        {
            pnlCalendar.Style["margin-top"] = "27px";
        }
        else
        {
            pnlCalendar.Style["display"] = "inline";
        }

        Controls.Add(txtDate);
        Controls.Add(pnlCalendar);
        Controls.Add(btnDate);

        base.CreateChildControls();
    }

    /// <summary>
    /// Render the contents of this control.
    /// </summary>
    /// <param name="output">The HtmlTextWriter to use.</param>
    protected override void RenderContents(HtmlTextWriter output)
    {
        switch (CalendarPosition)
        {
            case CalendarDisplay.DisplayRight:
                {
                    txtDate.RenderControl(output);
                    btnDate.RenderControl(output);
                    pnlCalendar.RenderControl(output);
                    break;
                }
            case CalendarDisplay.DisplayBelow:
                {
                    pnlCalendar.RenderControl(output);
                    txtDate.RenderControl(output);
                    btnDate.RenderControl(output);
                    break;
                }
        }
    }

    /// <summary>
    /// Connect event handlers to events.
    /// </summary>
    private void ConnectEventHandlers()
    {
        btnDate.Click += new System.EventHandler(btnDate_Click);
        calDate.SelectionChanged += new System.EventHandler(calDate_SelectionChanged);
    }

}

}

using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;

[assembly: TagPrefix("DatePicker", "EWS")] namespace EclipseWebSolutions.DatePicker { [DefaultProperty("Text")] [ToolboxData("<{0}:DatePicker runat=server>")] [DefaultEvent("SelectionChanged")] [ValidationProperty("TextValue")] public class DatePicker : WebControl, INamingContainer { #region Properties

    public TextBox txtDate = new TextBox();
    public Calendar calDate = new Calendar();
    public Button btnDate = new Button();
    public Panel pnlCalendar = new Panel();

    private enum ViewStateConstants
    {
        ValidationGroup,
        RegularExpression,
        ErrorMessage,
        RegExText,
        CalendarPosition,
        FormatString,
        ExpandLabel,
        CollapseLabel,
        ApplyDefaultStyle,
        CausesValidation,
    }

    /// <summary>
    /// Defines the available display modes of this calendar.
    /// </summary>
    public enum CalendarDisplay
    {
        DisplayRight,
        DisplayBelow
    }

    /// <summary>
    /// Where to display the popup calendar.
    /// </summary>
    [Category("Behaviour")]
    [Localizable(true)]
    public CalendarDisplay CalendarPosition
    {
        get
        {
            if (ViewState[ViewStateConstants.CalendarPosition.ToString()] == null)
            {
                ViewState[ViewStateConstants.CalendarPosition.ToString()] = CalendarDisplay.DisplayRight;
            }
            return (CalendarDisplay)ViewState[ViewStateConstants.CalendarPosition.ToString()];
        }
        set
        {
            ViewState[ViewStateConstants.CalendarPosition.ToString()] = value;
        }
    }

    /// <summary>
    /// Text version of the control's value, for use by ASP.NET validators.
    /// </summary>
    public string TextValue
    {
        get { return txtDate.Text; }
    }

    /// <summary>
    /// Holds the current date value of this control.
    /// </summary>
    [Category("Behaviour")]
    [Localizable(true)]
    [Bindable(true, BindingDirection.TwoWay)]
    public DateTime DateValue
    {
        get
        {
            try
            {
                if (txtDate.Text == "") return DateTime.MinValue;

                DateTime val = DateTime.Parse(txtDate.Text);
                return val;
            }
            catch (ArgumentNullException)
            {
                return DateTime.MinValue;
            }
            catch (FormatException)
            {
                return DateTime.MinValue;
            }
        }
        set
        {
            if (value == DateTime.MinValue)
            {
                txtDate.Text = "";
            }
            else
            {
                txtDate.Text = value.ToShortDateString();
            }
        }
    }

    [Category("Behavior"), Themeable(false), DefaultValue("")]
    public virtual string ValidationGroup
    {
        get
        {
            if (ViewState[ViewStateConstants.ValidationGroup.ToString()] == null)
            {
                return string.Empty;
            }
            else
            {
                return (string)ViewState[ViewStateConstants.ValidationGroup.ToString()];
            }
        }
        set
        {
            ViewState[ViewStateConstants.ValidationGroup.ToString()] = value;
        }
    }

    /// <summary>
    /// The label of the exand button. Shown when the calendar is hidden.
    /// </summary>
    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("PickDate")]
    [Localizable(true)]
    public string ExpandButtonLabel
    {
        get
        {
            String s = (String)ViewState[ViewStateConstants.ExpandLabel.ToString()];
            return ((s == null) ? "PickDate" : s);
        }
        set
        {
            ViewState[ViewStateConstants.ExpandLabel.ToString()] = value;
        }
    }

    /// <summary>
    /// The label of the collapse button. Shown when the calendar is visible.
    /// </summary>
    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("Disabled")]
    [Localizable(true)]
    public string CollapseButtonLabel
    {
        get
        {
            String s = (String)ViewState[ViewStateConstants.CollapseLabel.ToString()];
            return ((s == null) ? "Disabled" : s);
        }
        set
        {
            ViewState[ViewStateConstants.CollapseLabel.ToString()] = value;
        }
    }

    /// <summary>
    /// Whether to apply the default style. Disable this if you want to apply a custom style, or to use themes and skins
    /// to style the control.
    /// </summary>
    [Category("Appearance")]
    [DefaultValue(true)]
    [Localizable(true)]
    public bool ApplyDefaultStyle
    {
        get
        {
            if (ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] == null)
            {
                ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = true;
            }
            return (bool)ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()];
        }
        set
        {
            ViewState[ViewStateConstants.ApplyDefaultStyle.ToString()] = value;
        }
    }

    /// <summary>          
    /// Causes Validation          
    /// </summary>          
    [Category("Appearance")]
    [DefaultValue(false)]
    [Localizable(false)]
    public bool CausesValidation
    {
        get
        {
            if (ViewState[ViewStateConstants.CausesValidation.ToString()] == null)
            {
                ViewState[ViewStateConstants.CausesValidation.ToString()] = false;
            }
            return (bool)ViewState[ViewStateConstants.CausesValidation.ToString()];
        }
        set
        {
            ViewState[ViewStateConstants.CausesValidation.ToString()] = value;
            btnDate.CausesValidation = value;
        }
    }

    #endregion

    #region Events

    /// <summary>
    /// A day was selected from the calendar control.
    /// </summary>
    public event EventHandler SelectionChanged;

    protected virtual void OnSelectionChanged()
    {
        if (SelectionChanged != null)   // only raise the event if someone is listening.
        {
            SelectionChanged(this, EventArgs.Empty);
        }
    }

    #endregion

    #region Event Handlers

    /// <summary>
    /// The +/- button was clicked.
    /// </summary>
    protected void btnDate_Click(object sender, System.EventArgs e)
    {
        if (!calDate.Visible)
        {
            // expand the calendar
            calDate.Visible = true;
            txtDate.Enabled = false;
            btnDate.Text = CollapseButtonLabel;
            if (DateValue != DateTime.MinValue)
            {
                calDate.SelectedDate = DateValue;
                calDate.VisibleDate = DateValue;
            }
        }
        else
        {
            // collapse the calendar
            calDate.Visible = false;
            txtDate.Enabled = true;
            btnDate.Text = ExpandButtonLabel;
        }
    }

    /// <summary>
    /// A date was selected from the calendar.
    /// </summary>
    protected void calDate_SelectionChanged(object sender, System.EventArgs e)
    {
        calDate.Visible = false;
        txtDate.Visible = true;
        btnDate.Text = ExpandButtonLabel;
        txtDate.Enabled = true;
        txtDate.Text = calDate.SelectedDate.ToShortDateString();
        OnSelectionChanged();
    }

    #endregion

    /// <summary>
    /// Builds the contents of this control.
    /// </summary>
    protected override void CreateChildControls()
    {
        btnDate.Text = ExpandButtonLabel;
        btnDate.CausesValidation = CausesValidation;
        txtDate.ID = "txtDate";

        calDate.Visible = false;

        if (ApplyDefaultStyle)
        {
            calDate.BackColor = System.Drawing.Color.White;
            calDate.BorderColor = System.Drawing.Color.FromArgb(10066329);
            calDate.CellPadding = 2;
            calDate.DayNameFormat = DayNameFormat.Shortest;
            calDate.Font.Name = "Verdana";
            calDate.Font.Size = FontUnit.Parse("8pt");
            calDate.ForeColor = System.Drawing.Color.Black;
            calDate.Height = new Unit(150, UnitType.Pixel);
            calDate.Width = new Unit(180, UnitType.Pixel);
            calDate.DayHeaderStyle.BackColor = System.Drawing.Color.FromArgb(228, 228, 228);
            calDate.DayHeaderStyle.Font.Size = FontUnit.Parse("7pt");
            calDate.TitleStyle.Font.Bold = true;
            calDate.WeekendDayStyle.BackColor = System.Drawing.Color.FromArgb(255, 255, 204);
        }

        ConnectEventHandlers();

        pnlCalendar.Controls.Add(calDate);
        pnlCalendar.Style["position"] = "absolute";
        pnlCalendar.Style["filter"] = "alpha(opacity=95)";
        pnlCalendar.Style["-moz-opacity"] = ".95";
        pnlCalendar.Style["opacity"] = ".95";
        pnlCalendar.Style["z-index"] = "2";
        pnlCalendar.Style["background-color"] = "White";

        if (CalendarPosition == CalendarDisplay.DisplayBelow)
        {
            pnlCalendar.Style["margin-top"] = "27px";
        }
        else
        {
            pnlCalendar.Style["display"] = "inline";
        }

        Controls.Add(txtDate);
        Controls.Add(pnlCalendar);
        Controls.Add(btnDate);

        base.CreateChildControls();
    }

    /// <summary>
    /// Render the contents of this control.
    /// </summary>
    /// <param name="output">The HtmlTextWriter to use.</param>
    protected override void RenderContents(HtmlTextWriter output)
    {
        switch (CalendarPosition)
        {
            case CalendarDisplay.DisplayRight:
                {
                    txtDate.RenderControl(output);
                    btnDate.RenderControl(output);
                    pnlCalendar.RenderControl(output);
                    break;
                }
            case CalendarDisplay.DisplayBelow:
                {
                    pnlCalendar.RenderControl(output);
                    txtDate.RenderControl(output);
                    btnDate.RenderControl(output);
                    break;
                }
        }
    }

    /// <summary>
    /// Connect event handlers to events.
    /// </summary>
    private void ConnectEventHandlers()
    {
        btnDate.Click += new System.EventHandler(btnDate_Click);
        calDate.SelectionChanged += new System.EventHandler(calDate_SelectionChanged);
    }

}

}

Untitled Page

 

 

 

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {

}

protected void DatePicker1_SelectionChanged(object sender, EventArgs e)
{
    Label1.Text = DatePicker1.DateValue.ToShortDateString();
    pnlLabel.Update();
}

}

---

to make the button an image you could just style it to add a background image.

btnDate.style["background-image"] ="url(images/btn.jpg)";
btnDate.text="";

---

In Html, an image button has a type attribute of 'image' and a src attribute used to determine the image to be displayed. So, to change a standard button to an image button you would:

buttonControl.Attributes["type"] = "image";
buttonControl.Attributes["src"] = "Foo.jpg";

EDIT If you are trying to change the button type in the click event, then you might be required to do that via javascript client-side. You can do that by registering a start-up script in the Click event like so:

protected void Button_OnClick( object sender, EventArgs e )
{
    var button = sender as Button;
    if ( button == null )
        return;

    var jsScript = new StringBuilder();
    jsScript.AppendFormat( "<script type=\"text/javascript\">" );
    jsScript.AppendFormat( "var button = document.getElementById(\"{0}\"); button.type = \"image\"; button.src=\"Foo.jpg\";"
            , button.ClientID);
    jsScript.Append( "</script>" );

    if ( !Page.ClientScript.IsStartupScriptRegistered( typeof( Page ), "resetImageButton" ) )
        Page.ClientScript.RegisterStartupScript( typeof( Page ), "resetImageButton", jsScript.ToString(), false );
}

The catch is that this will only work right after the postback triggered by clicking the button. It will not survive multiple postbacks. For that, you would need to store a flag in a hidden text field or ViewState that indicates which type the button should be and then, based on that, determine whether you need to register this startup script or not.