我如何使用与ASP.NET按钮标签？ [英] How can I use the button tag with ASP.NET?

问题描述

我想使用较新的＆LT;按钮＆GT; 标记在ASP.NET网站，除其他事项外，允许的CSS样式的文本和嵌入图形按钮里面。在asp：Button控件呈现为＆LT;输入类型=按钮＆GT; ，有没有什么办法让一个preexisting控制渲染到＆LT;按钮和GT;

I'd like to use the newer <button> tag in an ASP.NET website which, among other things, allows CSS-styled text and embedding a graphic inside the button. The asp:Button control renders as <input type="button">, is there any way to make a preexisting control render to <button>?

从我读过有一个与IE张贴按钮的标记，而不是value属性的按钮时，位于内的不兼容性＆LT;形式＆GT; ，但在ASP.NET将使用onclick事件无论如何火灾__doPostBack，所以我不认为这将是一个问题。

From what I've read there is an incompatibility with IE posting the button's markup instead of the value attribute when the button is located within a <form>, but in ASP.NET it will be using the onclick event to fire __doPostBack anyway, so I don't think that this would be a problem.

有没有我为什么不应该使用这个原因的任何？如果没有，你怎么会去与ASP支持它：按钮，或者是基于一个新的服务器控件？我想preFER不写我自己的服务器控件，如果可以避免。

Are there any reasons why I shouldn't use this? If not, how would you go about supporting it with asp:Button, or a new server control based on it? I would prefer to not write my own server control if that can be avoided.

---

起初＆LT;按钮=服务器＆GT; 解决方案工作，但我马上跑进它需要有一个CommandName属性的情况下，其HtmlButton控件没有。它看起来像我将需要创建一个按钮继承毕竟控制。

At first the <button runat="server"> solution worked, but I immediately ran into a situation where it needs to have a CommandName property, which the HtmlButton control doesn't have. It looks like I'm going to need to create a control inherited from Button after all.

我需要什么，以重写Render方法，使之呈现我想要什么？做

What do I need to do in order to override the render method and make it render what I want?

---

更新

DanHerbert的答复，使我有兴趣再次找到解决这一点，所以我花了一些时间做这个工作。

DanHerbert's reply has made me interested in finding a solution to this again, so I've spent some more time working on it.

首先，有超载的标记名的更容易的方式：

First, there's a far easier way of overloading the TagName:

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

用，因为它代表丹的解决方案的问题是标签的innerHTML放入value属性，这将导致在回发一个验证错误。一个相关的问题是，即使你正确地呈现价值的财产，IE的新空房禁地实施＆LT的按钮＆GT; 标签的帖子的innerHTML代替反正值。因此，在此实施任何需要重写的AddAttributesToRender方法，以正确地呈现价值的财产，并提供某种解决方法IE浏览器，所以它并不能完全搞砸了回发。

The problem with Dan's solution as it stands is the innerhtml of the tag is placed into the value property, which causes a validation error on postback. A related problem is, even if you render the value property correctly, IE's braindead implementation of the <button> tag posts the innerhtml instead of the value anyway. So, any implementation of this needs to override the AddAttributesToRender method in order to correctly render the value property, and also provide some sort of workaround for IE so it doesn't completely screw up the postback.

如果你想利用的CommandName / CommandArgument属性为数据绑定控件的IE问题可能是无法逾越的。希望有人能提出一个解决方法这一点。

The IE problem may be insurmountable if you want to take advantage of the CommandName/CommandArgument properties for a databound control. Hopefully someone can suggest a workaround for this.

我已经对渲染进度：

ModernButton.cs

这呈现为一个适当的HTML ＆LT;按钮和GT; 正确的值，但它不与ASP.Net回发系统工作。我已经写了一些什么，我需要提供命令事件，但它不火。

This renders as a proper html <button> with the correct value, but it doesn't work with the ASP.Net PostBack system. I've written some of what I need to provide the Command event, but it doesn't fire.

在检查该键并排侧定期的ASP：巴顿，他们看起来比我更需要的差异同其他。所以，我不知道ASP.Net是如何在这种情况下，布线了命令事件。

When inspecting this button side-by-side with a regular asp:Button, they look the same other than the differences I need. So I'm not sure how ASP.Net is wiring up the Command event in this case.

这是另外一个问题是，嵌套服务器控件不会呈现（你可以用ParseChildren（假）的属性看）。这是pretty容易文字HTML文本注入呈现在控制，但你如何让嵌套服务器控件的支持？

An additional problem is, nested server controls aren't rendered (as you can see with the ParseChildren(false) attribute). It's pretty easy to inject literal html text into the control during render, but how do you allow support for nested server controls?

推荐答案

这是一个老问题，但对于我们这些不吉利的足够仍然有维持ASP.NET Web窗体应用程序，我通过这个去自己尝试包括引导字形的内部内置按钮控件。

This is an old question, but for those of us unlucky enough still having to maintain ASP.NET Web Forms applications, I went through this myself while trying to include Bootstrap glyphs inside of built-in button controls.

作为每引导文件，期望的标记如下：

As per Bootstrap documentation, the desired markup is as follows:

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

我需要这个标记由服务器控件呈现，所以我开始寻找选项。

I needed this markup to be rendered by a server control, so I set out to find options.

这将是第一个合乎逻辑的步骤，但-as这个问题explains-按钮生成一个＆LT;输入＆GT; 元素而不是＆LT;按钮＆GT ; ，因此添加内部HTML是不可能的。

This would be the first logical step, but —as this question explains— Button renders an <input> element instead of <button>, so adding inner HTML is not possible.

源代码

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

赞成

• 看起来不错


• 命令事件; 的CommandName 和 CommandArgument 属性

• Looks OK
• Command event; CommandName and CommandArgument properties

缺点

• 渲染＆LT; A＆GT; 而不是＆LT;按钮＆GT;


• 渲染和依靠生硬的JavaScript

源代码

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

赞成

• 看起来不错


• 渲染适当＆LT;按钮和GT; 元素

• Looks OK
• Renders proper <button> element

缺点

• 否命令事件;没有的CommandName 或 CommandArgument 属性


• 渲染和依靠生硬的JavaScript来处理其 ServerClick 事件

• No Command event; no CommandName or CommandArgument properties
• Renders and relies on obtrusive JavaScript to handle its ServerClick event

在这一点是明确的，没有一个内置的控制似乎合适的，因此，下一个逻辑步骤是尝试并修改它们以实现所需的功能。

At this point it is clear that none of the built-in controls seem suitable, so the next logical step is try and modify them to achieve the desired functionality.

注意：这是基于丹的code，因此所有归功于他

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);
        }
    }
}

我已经剥去堂课下来到最低限度，并重构它来实现用尽可能少code尽可能相同的功能。我还添加了几个改进。即：

I have stripped the class down to the bare minimum, and refactored it to achieve the same functionality with as little code as possible. I also added a couple of improvements. Namely:

• 删除 PersistChildren 属性（似乎没有必要）


• 删除标签名倍率（似乎没有必要）


• 从文本删除HTML解码（基类已经处理了这一点）


• 将在preRender 完好;覆盖 AddParsedSubObject 代替（简单）


• 简化 RenderContents 覆盖


• 添加值属性（见下文）


• 添加一个命名空间（包括样本的 @注册指令）


• 添加必要使用指令

• Remove PersistChildren attribute (seems unnecessary)
• Remove TagName override (seems unnecessary)
• Remove HTML decoding from Text (base class already handles this)
• Leave OnPreRender intact; override AddParsedSubObject instead (simpler)
• Simplify RenderContents override
• Add a Value property (see below)
• Add a namespace (to include a sample of @ Register directive)
• Add necessary using directives

的值属性只是访问旧文本属性。这是因为本地Button控件呈现一个值属性呢（以文本作为它的值）。由于值是℃的有效的属性按钮方式＆gt; 元素，我决定把一个属性为它

The Value property simply accesses the old Text property. This is because the native Button control renders a value attribute anyway (with Text as its value). Since value is a valid attribute of the <button> element, I decided to include a property for it.

源代码

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

赞成

• 看起来不错


• 渲染一个适当的＆LT;按钮和GT; 元素


• 命令事件; 的CommandName 和 CommandArgument 属性


• 不会渲染或依赖于生硬的JavaScript

• Looks OK
• Renders a proper <button> element
• Command event; CommandName and CommandArgument properties
• Does not render or rely on obtrusive JavaScript

缺点

• 无（比不是其他内置控制）

这篇关于我如何使用与ASP.NET按钮标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！