Как я могу использовать тег кнопки с ASP.NET?


Я хотел бы использовать более новый <button> тег в an ASP.NET сайт, который, среди прочего, позволяет CSS-стилизованный текст и вставлять графику внутри кнопки. Элемент управления asp: Button отображается как <input type="button">, есть ли способ сделать уже существующий элемент управления визуализации <button>?

из того, что я прочитал, есть несовместимость с IE, отправляющим разметку кнопки вместо атрибута value, когда кнопка находится внутри <form>, но в ASP.NET он будет использовать onclick event to fire __doPostBack в любом случае, поэтому я не думаю, что это будет проблемой.

есть ли причины, почему я не должен использовать это? Если нет, то как бы вы поддерживали его с помощью asp:Button или нового серверного элемента управления на его основе? Я бы предпочел не писать свой собственный серверный элемент управления, если этого можно избежать.


сначала <button runat="server"> решение работало, но я сразу же столкнулся с ситуацией, когда ему нужно иметь свойство CommandName, которое HtmlButton управления не имеет. Похоже, мне все-таки нужно будет создать элемент управления, унаследованный от Button.

что мне нужно сделать, чтобы переопределить метод рендеринга и заставить его отображать то, что я хочу?


обновление

ответ Данхерберта заставил меня снова заинтересоваться поиском решения этой проблемы, поэтому я потратил еще некоторое время на ее разработку.

во-первых, есть гораздо более простой способ перегрузки Имя тега:

public ModernButton() : base(HtmlTextWriterTag.Button)
{
}

проблема с решением Dan в его нынешнем виде заключается в том, что innerhtml тега помещается в свойство value, что вызывает ошибку проверки при обратной передаче. Связанная с этим проблема заключается в том, что даже если вы правильно отображаете свойство value, реализация braindead IE <button> тег публикует innerhtml вместо значения в любом случае. Таким образом, любая реализация этого должна переопределить метод AddAttributesToRender, чтобы правильно отобразить свойство value, и также обеспечьте какой-то обходной путь для IE, чтобы он не полностью испортил обратную передачу.

проблема IE может быть непреодолимой, если вы хотите воспользоваться свойствами CommandName/CommandArgument для элемента управления databound. Надеюсь, кто-то может предложить обходной путь для этого.

я добился прогресса в визуализации:

ModernButton.cs

это делает как правильный html <button> С правильным значением, но это не работает с ASP.Net система обратной связи. Я написал, что мне нужно, чтобы обеспечить Command событие, но оно не срабатывает.

при проверке этой кнопки бок о бок с обычной кнопкой asp:они выглядят одинаково, кроме различий, которые мне нужны. Так что я не уверен, как ASP.Net это проводка вверх Command событие в данном случае.

дополнительная проблема заключается в том, что вложенные серверные элементы управления не отображаются(как вы можете видеть с атрибутом ParseChildren (false)). Это довольно легко вводить буквальный текст html в элемент управления во время рендеринга, но как вы разрешаете поддержку вложенных серверных элементов управления?

7 60

7 ответов:

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

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

<button class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</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>

плюсы

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

минусы

  • оказывает <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>

плюсы

  • выглядит нормально
  • делает правильный <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);
        }
    }
}

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

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

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

плюсы

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

минусы

  • нет (кроме того, что не является встроенным элементом управления)

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

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

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

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

я наткнулся на ваш вопрос ищу то же самое. Я в конечном итоге с помощью отражатель чтобы выяснить, как ASP.NET Button управления визуализацией. Оказывается, это очень легко изменить.

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

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

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


Редактировать: извините.. вот что я получаю за то, что бегло просматриваю вопросы во время обеденного перерыва. Есть ли причины, по которым вы не могли бы просто использовать тег

Я бы пошел с LinkButton и стиль его с CSS, как это уместно.

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

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

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

лекарство состоит в том, чтобы взломать это . До сих пор я этого не понял.