Как я могу использовать тег кнопки с 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. Надеюсь, кто-то может предложить обходной путь для этого.
я добился прогресса в визуализации:
это делает как правильный html <button> С правильным значением, но это не работает с ASP.Net система обратной связи. Я написал, что мне нужно, чтобы обеспечить Command событие, но оно не срабатывает.
при проверке этой кнопки бок о бок с обычной кнопкой asp:они выглядят одинаково, кроме различий, которые мне нужны. Так что я не уверен, как ASP.Net это проводка вверх Command событие в данном случае.
дополнительная проблема заключается в том, что вложенные серверные элементы управления не отображаются(как вы можете видеть с атрибутом ParseChildren (false)). Это довольно легко вводить буквальный текст html в элемент управления во время рендеринга, но как вы разрешаете поддержку вложенных серверных элементов управления?
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('uxSearch','')"> <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 кнопка управления как кнопка.
Редактировать: извините.. вот что я получаю за то, что бегло просматриваю вопросы во время обеденного перерыва. Есть ли причины, по которым вы не могли бы просто использовать тег
Я весь день боролся с этим-мой обычай
<button/>создаваемый элемент управления не работает::<button type="submit" name="ctl02" value="Content" class="btn "> <span>Content</span> </button>The
nameатрибут выдает ошибку сервера при использовании IE 6 и IE 7. Все отлично работает в других браузерах (Opera, IE 8, Firefox, Сафари.)лекарство состоит в том, чтобы взломать это . До сих пор я этого не понял.