c#asp.net 3.5中的图像按钮上的文本

时间:2008-11-04 15:22:35

标签: c# asp.net

我有一个图像按钮。我想在其上添加一个“搜索”文本。我无法添加它,因为VS 2008中的“imagebutton”属性中没有文本控件。谁能告诉我如何将文字添加到图像按钮?

  <asp:ImageButton ID="Searchbutton" runat="server" AlternateText="Search" 
        CssClass="bluebutton"
        ImageUrl="../Graphics/bluebutton.gif" Width="110px" 
        onclick="Searchbutton_Click"/>

9 个答案:

答案 0 :(得分:20)

<button runat="server" 
  style="background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
  your text here<br/>and some more<br/><br/> and some more ....
  </button>

答案 1 :(得分:6)

ImageButton无法做到这一点。

但是,您可以使用简单的Button,设置文本,并使用CSS添加背景图像(bluebutton.gif)以获得所需的效果。

答案 2 :(得分:6)

dotnetslave.com的这个提示为我工作:

<asp:LinkButton 
    CssClass="lnkSubmit" 
    ID="lnkButton" 
    runat="server">SUBMIT</asp:LinkButton>

a.lnkSubmit:active
{    
    margin:0px 0px 0px 0px;
    background:url(../../images/li_bg1.jpg) left center no-repeat;
    padding: 0em 1.2em;
    font: 8pt "tahoma";
    color: #336699;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0px;

}

答案 3 :(得分:1)

无法在图像按钮内添加文本。我也面临同样的问题。我的解决方案是使用链接按钮而不是图像按钮。只需在样式标记中添加图像即可。

答案 4 :(得分:0)

我认为您不能将文本写入ASP.NET的ImageButton控件。你可以动态生成图像,如果这是你需要的,并从你的代码后面写下文本,但它会太复杂,而是使用带有CSS的普通按钮,除非你的图像不能由CSS生成。

答案 5 :(得分:0)

您也可以使用asp:Label执行此操作,如下所示:

<style type="text/css">
    .faux-button
    {
        cursor:pointer;
    }
</style>

<div class="faux-button">
    <asp:ImageButton ID="ibtnAddUser" 
        runat="server" 
        ImageUrl="~/Images/add.gif" 
        AlternateText="Add a user image" />
    <asp:Label ID="lblAddUser" 
        runat="server" 
        Text="Add User" 
        AssociatedControlID="imgClick" />
</div>

答案 6 :(得分:0)

我意识到这是一个老帖子,但我最近为自己解决了同样的问题。

我创建了一个ImgButton服务器控件来呈现它:

<button> <img src="button_icon.png" /> Caption Text </button>

使用CSS设置背景图片的样式有一些缺点,主要是:

  • 文字往往会与图像重叠,除非您对左对齐图像和右对齐文本有所巧妙(如果将RTL语言投入混合中则会很不方便)
  • 图片是背景图片,当我们点击按钮时,图片不会显示为“在按钮上”它没有像文字一样“向下推”

我会尝试在这里插入代码,但也有完整的源代码和示例: Button with Img tag and Caption Text

ImgButton.cs:

[DefaultProperty("Text")]
[DefaultEvent("Click")]
[ToolboxData("<{0}:ImgButton runat=server></{0}:ImgButton>")]
public class ImgButton : WebControl, IPostBackEventHandler
{
    #region Public Properties

    public enum ImgButtonStyle
    {
        Button,
        Anchor
    }

    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("")]
    [Localizable(true)]
    public string Text
    {
        get
        {
            String s = (String)ViewState["Text"];
            return ((s == null) ? String.Empty : s);
        }

        set
        {
            ViewState["Text"] = value;
        }
    }
    [EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(UITypeEditor))]
    public string ImgSrc { get; set; }
    public string CommandName { get; set; }
    public string CommandArgument { get; set; }
    [EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]
    public string NavigateUrl { get; set; }
    public string OnClientClick { get; set; }
    public ImgButtonStyle RenderStyle { get; set; }
    [DefaultValue(true)]
    public bool UseSubmitBehavior { get; set; }
    [DefaultValue(true)]
    public bool CausesValidation { get; set; }
    public string ValidationGroup { get; set; }
    [DefaultValue(0)]
    public int Tag { get; set; }

    #endregion

    #region Constructor

    public ImgButton()
    {
        Text = "Text";
        ImgSrc = "~/Masters/_default/img/action-help.png";
        UseSubmitBehavior = true;
        CausesValidation = true;
    }

    #endregion

    #region Events

    // Defines the Click event.
    public event EventHandler Click;
    public event CommandEventHandler Command;

    protected virtual void OnClick(EventArgs e)
    {
        if (Click != null)
        {
            Click(this, e);
        }
    }

    protected virtual void OnCommand(CommandEventArgs e)
    {
        if (Command != null)
        {
            Command(this, e);
        }
        RaiseBubbleEvent(this, e);
    }

    public void RaisePostBackEvent(string eventArgument)
    {
        if (CausesValidation)
        {
            Page.Validate(ValidationGroup);
            if (!Page.IsValid) return;
        }
        OnClick(EventArgs.Empty);
        if (!String.IsNullOrEmpty(CommandName))
            OnCommand(new CommandEventArgs(CommandName, CommandArgument));
    }

    #endregion

    #region Rendering

    // Do not wrap in <span> tag
    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.Write("");
    }

    protected override void RenderContents(HtmlTextWriter output)
    {
        string click;
        string disabled = (Enabled ? "" : "disabled ");
        string type = (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior ? "submit" : "button");
        string imgsrc = ResolveUrl(ImgSrc ?? "");

        if (String.IsNullOrEmpty(NavigateUrl))
            click = Page.ClientScript.GetPostBackEventReference(this, "");
        else
            if (NavigateUrl != null)
                click = String.Format("location.href='{0}'", ResolveUrl(NavigateUrl));
            else
                click = OnClientClick;

        switch (RenderStyle)
        {
            case ImgButtonStyle.Button:
                if (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior)
                {
                    output.Write(String.Format(
                        "<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" title=\"{5}\"><img src=\"{6}\" alt=\"{5}\"/>{7}</button>",
                        ClientID,
                        disabled,
                        CssClass,
                        type,
                        UniqueID,
                        ToolTip,
                        imgsrc,
                        Text
                    ));
                }
                else
                {
                    output.Write(String.Format(
                        "<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" onclick=\"javascript:{5}\" title=\"{6}\"><img src=\"{7}\" alt=\"{6}\"/>{8}</button>",
                        ClientID,
                        disabled,
                        CssClass,
                        type,
                        UniqueID,
                        click,
                        ToolTip,
                        imgsrc,
                        Text
                    ));
                }
                break;

            case ImgButtonStyle.Anchor:
                output.Write(String.Format(
                    "<a id=\"{0}\" {1}class=\"{2}\" onclick=\"javascript:{3}\" title=\"{4}\"><img src=\"{5}\" alt=\"{4}\"/>{6}</a>",
                    ID,
                    disabled,
                    CssClass,
                    click,
                    ToolTip,
                    imgsrc,
                    Text
                ));
                break;
        }
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.Write("");
    }

    #endregion
}

这是我在我的按钮上使用的CSS(我将“icon”放在按钮的CssClass属性中):

button.icon
{
    cursor: pointer;
}

button.icon img
{
    margin: 0px;
    padding: 0px 5px 0px 5px;
    vertical-align: middle;
}

答案 7 :(得分:0)

如果使用“链接”按钮,则可以添加引导按钮,然后通过CSS&#34;&#34;之后添加文本。属性。

<强>的LinkBut​​ton:

<asp:LinkButton id="download" CssClass="btn btn-primary" Text="Download" OnCommand="OnButtonClick" CommandName="Download" runat="server">
                <span aria-hidden="true" class="glyphicon glyphicon-download-alt"></span></asp:LinkButton>

<强> CSS:

#MainContent_download:after{ 
content: "Download"; 
padding-left: 5px;

}

答案 8 :(得分:0)

我更喜欢以下解决方案:

                    <div style="padding: 5px; float: left;overflow: auto;height: auto;">
                        <asp:ImageButton ID="ImageButton2" ImageUrl="./icons/search24.png" ToolTip="Search"  runat="server" />
                        <p><asp:Label ID="Label7" runat="server" Text="Search"></asp:Label></p>
                    </div>

您可以更改style使其居中对齐,等等。