Ответ 1

Это старый вопрос, но для тех из нас, кто еще недостаточно повезло, чтобы поддерживать приложения ASP.NET Web Forms, я сам это сделал, пытаясь включить глифы Bootstrap внутри встроенных элементов управления кнопками.

В соответствии с документацией Bootstrap желаемая разметка выглядит следующим образом:

<button class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Мне нужна эта разметка для визуализации с помощью серверного элемента управления, поэтому я решил найти параметры.

Кнопка

Это был бы первый логический шаг, но, как выясняется в этом вопросе, Button отображает элемент <input> вместо <button>, поэтому добавление внутреннего HTML невозможно.

LinkButton (кредит Ответ Целомира Цонева)

Источник

<asp:LinkButton runat="server" ID="uxSearch" CssClass="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</asp:LinkButton>

Выход

<a id="uxSearch" class="btn btn-default" href="javascript:__doPostBack(&#39;uxSearch&#39;,&#39;&#39;)">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</a>

Pros

• выглядит нормально
• Command событие; CommandName и CommandArgument свойства

против

• Renders <a> вместо <button>
• Оказывает и полагается на навязчивый JavaScript

HtmlButton (кредит ответ Филиппа)

Источник

<button runat="server" id="uxSearch" class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Результат

<button onclick="__doPostBack('uxSearch','')" id="uxSearch" class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Pros

• выглядит нормально
• Оказывает правильный элемент <button>

против

• Нет Command событие; нет CommandName или CommandArgument свойств
• Оказывает и полагается на навязчивый JavaScript для обработки своего события ServerClick

В этот момент ясно, что ни один из встроенных элементов управления не подходит, поэтому следующий логический шаг - попробовать и изменить их для достижения желаемой функциональности.

Пользовательский контроль (кредит ответ Дэн Герберт)

ПРИМЕЧАНИЕ. Это основано на коде Дэн, так что все его кредиты.

using System.Web.UI;
using System.Web.UI.WebControls;

namespace ModernControls
{
    [ParseChildren]
    public class ModernButton : Button
    {
        public new string Text
        {
            get { return (string)ViewState["NewText"] ?? ""; }
            set { ViewState["NewText"] = value; }
        }

        public string Value
        {
            get { return base.Text; }
            set { base.Text = value; }
        }

        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Button; }
        }

        protected override void AddParsedSubObject(object obj)
        {
            var literal = obj as LiteralControl;
            if (literal == null) return;
            Text = literal.Text;
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.Write(Text);
        }
    }
}

Я разделил класс до минимума и реорганизовал его для достижения той же функциональности, что и минимальный код. Я также добавил несколько улучшений. А именно:

• Удалить атрибут PersistChildren (кажется лишним)
• Удалить TagName переопределить (кажется ненужным)
• Удаление HTML-декодирования из Text (базовый класс уже обрабатывает это)
• Оставьте OnPreRender неповрежденным; переопределить AddParsedSubObject вместо этого (проще)
• Упростить RenderContents переопределить
• Добавить свойство Value (см. ниже)
• Добавьте пространство имен (чтобы включить образец директивы @Register)
• Добавьте необходимые директивы using

Свойство Value просто обращается к старому свойству Text. Это связано с тем, что собственный элемент управления Button в любом случае предоставляет атрибут Value (с Text в качестве значения). Поскольку Value является допустимым атрибутом элемента <button>, я решил включить в него свойство.

Источник

<%@ Register TagPrefix="mc" Namespace="ModernControls" %>

<mc:ModernButton runat="server" ID="uxSearch" Value="Foo" CssClass="btn btn-default" >
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</mc:ModernButton>

Выход

<button type="submit" name="uxSearch" value="Foo" id="uxSearch" class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Pros

• выглядит нормально
• Отображает правильный элемент <button>
• Command событие; CommandName и CommandArgument свойства
• Не отображает или не полагается на навязчивый JavaScript

против

• Нет (кроме встроенного управления)

Ответ 2

Хотя вы говорите, что использование кнопки [button runat = "server" ] не является достаточно хорошим решением, важно упомянуть об этом - многие программисты .NET боятся использовать "родные" HTML-теги...

Использование:

<button id="btnSubmit" runat="server" class="myButton" 
    onserverclick="btnSubmit_Click">Hello</button>

Это обычно отлично работает, и все довольны моей командой.

Ответ 3

Я наткнулся на ваш вопрос, ища то же самое. Я закончил использование Reflector, чтобы выяснить, как фактически выполняется управление ASP.NET Button. Это действительно очень легко изменить.

На самом деле это сводится к переопределению свойств TagName и TagKey класса Button. После того, как вы это сделали, вам просто нужно убедиться, что вы отображаете содержимое кнопки вручную, так как в исходном классе Button никогда не было содержимого для рендеринга, и элемент управления будет отображать кнопку без текста, если вы не будете отображать содержание.

Обновление:

Можно сделать несколько небольших изменений в управлении Button через наследование и все еще работать достаточно хорошо. Это решение устраняет необходимость в использовании собственных обработчиков событий для OnCommand (хотя, если вы хотите узнать, как это сделать, я могу показать вам, как это обрабатывается). Он также исправляет проблему отправки значения, которое имеет разметку в нем, за исключением IE. Я все еще не уверен, как исправить IE плохой реализации тега Button, хотя. Это может быть просто техническое ограничение, которое невозможно обойти...

[ParseChildren(false)]
[PersistChildren(true)]
public class ModernButton : Button
{
    protected override string TagName
    {
        get { return "button"; }
    }

    protected override HtmlTextWriterTag TagKey
    {
        get { return HtmlTextWriterTag.Button; }
    }

    // Create a new implementation of the Text property which
    // will be ignored by the parent class, giving us the freedom
    // to use this property as we please.
    public new string Text
    {
        get { return ViewState["NewText"] as string; }
        set { ViewState["NewText"] = HttpUtility.HtmlDecode(value); }
    }

    protected override void OnPreRender(System.EventArgs e)
    {
        base.OnPreRender(e);
        // I wasn't sure what the best way to handle 'Text' would
        // be. Text is treated as another control which gets added
        // to the end of the button control collection in this 
        //implementation
        LiteralControl lc = new LiteralControl(this.Text);
        Controls.Add(lc);

        // Add a value for base.Text for the parent class
        // If the following line is omitted, the 'value' 
        // attribute will be blank upon rendering
        base.Text = UniqueID;
    }

    protected override void RenderContents(HtmlTextWriter writer)
    {
        RenderChildren(writer);
    }
}

Чтобы использовать этот элемент управления, у вас есть несколько вариантов. Один из них - разместить элементы управления непосредственно в разметке ASP.

<uc:ModernButton runat="server" 
        ID="btnLogin" 
        OnClick="btnLogin_Click" 
        Text="Purplemonkeydishwasher">
    <img src="../someUrl/img.gif" alt="img" />
    <asp:Label ID="Label1" runat="server" Text="Login" />
</uc:ModernButton>

Вы также можете добавить элементы управления в коллекцию управления кнопкой в ​​коде.

// This code probably won't work too well "as is"
// since there is nothing being defined about these
// controls, but you get the idea.
btnLogin.Controls.Add(new Label());
btnLogin.Controls.Add(new Table());

Я не знаю, насколько хорошо сочетается оба варианта, поскольку я не тестировал это.

Единственным недостатком этого элемента управления сейчас является то, что я не думаю, что он будет помнить ваши элементы управления через PostBacks. Я не тестировал это, чтобы он уже работал, но я сомневаюсь, что это так. Вам нужно будет добавить код управления ViewState для суб-элементов управления, которые будут обрабатываться через PostBacks, я думаю, однако это, вероятно, не проблема для вас. Добавление поддержки ViewState не должно быть ужасно трудным, хотя при необходимости это можно легко добавить.

Ответ 4

Вы можете создать новый элемент управления, наследующий от Button и переопределить метод визуализации, или использовать файл .browser для переопределения всех кнопок на сайте, подобно тому, как работает CSS Friendly для элемента управления TreeView и т.д.

Ответ 5

Вы можете использовать свойство Button.UseSubmitBehavior, как описано в в этой статье об рендеринге кнопки управления ASP.NET в виде кнопки.

Ответ 6

Я бы пошел с LinkButton и подгонял его с CSS.

Ответ 7

Я изо всех сил боролся с этим - мой пользовательский <button/> сгенерированный элемент управления не работал:

System.Web.HttpRequestValidationException: потенциально опасное значение Request.Form было обнаружено у клиента

Что происходит, так это то, что .Net добавляет атрибут name:

<button type="submit" name="ctl02" value="Content" class="btn ">
   <span>Content</span>
</button>

Атрибут name генерирует ошибку сервера при использовании IE 6 и IE 7. Все работает отлично в других браузерах (Opera, IE 8, Firefox, Safari).

Излечим от этого атрибута name. Тем не менее я этого не понял.