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

Text on an Image button in c# asp.net 3.5

提问by

I have a image button. I wanted to add a text "Search" on it. I am not able to add it because the "imagebutton" property in VS 2008 does not have text control in it. Can anyone tell me how to add text to a image button??

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

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

采纳答案by leppie

<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>

回答by Marek Blotny

You can't do that with ImageButton.

你不能用ImageButton.

However, you can use a simple Button, set the text, and add a background image (bluebutton.gif) using CSS to achieve the desired effect.

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

回答by Arief

I don't think you can write text to an ImageButton control of ASP.NET. You can generate image on the fly if that's what you need, and write the text from your code behind, but it will be too complicated, use normal button with CSS instead, unless your image cannot be generated by CSS.

我认为您不能将文本写入 ASP.NET 的 ImageButton 控件。如果您需要，您可以即时生成图像，并从后面的代码中编写文本，但这会太复杂，请改用带有 CSS 的普通按钮，除非您的图像无法由 CSS 生成。

回答by Khanzor

You can also do this using an asp:Label, like this:

您也可以使用 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>

回答by Iman

This tip from dotnetslave.comworked for me:

来自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;

}

}

回答by PraveenPandey

It is not possible to add text inside of an image button. I have also faced the same problem. My solution was to use a link button instead of an image button. Just adding the image in the style tag should work.

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

回答by Etherman

I realise this is an old post, but I have recently solved this same problem for myself.

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

I created an ImgButton server control to render this:

我创建了一个 ImgButton 服务器控件来呈现这个：

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

Using CSS to style a background image has some drawbacks, mainly:

使用 CSS 来设置背景图像的样式有一些缺点，主要是：

• The text tends to overlap the image unless you get clever with left-aligned image and right-aligned text (which is then inconvenient if you throw a RTL language into the mix)
• The image is a background image, and does not appear to be "on the button" when we click the button it does not get "pushed down" the same as the text

• 除非您巧妙地处理左对齐图像和右对齐文本，否则文本往往会与图像重叠（如果您将 RTL 语言混为一谈会很不方便）
• 该图像是背景图像，当我们单击按钮时，它不会出现在“按钮上”，它不会像文本一样被“按下”

I'll try to insert the code here, but also have the full source code and examples here: Button with Img tag and Caption Text

我将尝试在此处插入代码，但也有完整的源代码和示例： 带有 Img 标签和标题文本的按钮

ImgButton.cs:

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
}

Here is the CSS I use on my buttons (where I put "icon" in the CssClass property of the button):

这是我在按钮上使用的 CSS（我在按钮的 CssClass 属性中放置了“图标”）：

button.icon
{
    cursor: pointer;
}

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

回答by megabc123

If you use a Link button, you can add a bootstrap button and then add text via the CSS "after" property.

如果您使用链接按钮，您可以添加一个引导按钮，然后通过 CSS 的“after”属性添加文本。

LinkButton:

链接按钮：

<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:

CSS：

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

}

}

回答by nes

I prefer the below solution:

我更喜欢以下解决方案：

                    <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>

You can change the styleto make it center aligned, etc.

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