ASP.NET에서 버튼 태그를 어떻게 사용할 수 있습니까?

ASP.NET에서 버튼 태그를 어떻게 사용할 수 있습니까?

---

<button>ASP.NET 웹 사이트에서 CSS 스타일의 텍스트를 허용하고 버튼 내부에 그래픽을 포함 할 수 있는 최신 태그 를 사용하고 싶습니다 . asp : Button 컨트롤은 사용 <input type="button">됩니다. 방법이 <button>있습니까?

내가 읽은 내용에서 버튼이 <form>.NET 내부에있을 때 값 속성 대신 버튼의 마크 업을 게시하는 IE와 비 선택할 수있는 문제 ASP.NET에서는 onclick 이벤트를 사용하여 어쨌든 __doPostBack을 실행하는 것이 좋습니다.

호스팅 사용하지 말아야하는 이유가? asp : Button 또는이를 기반으로하는 새로운 서버 컨트롤로 어떻게 지원 하시겠습니까? 피할 수있는 권한 내 서버 컨트롤을 작성하지 않는 것이 좋습니다.

---

처음에는 <button runat="server">솔루션이 작동했지만 HtmlButton 컨트롤에는없는 CommandName 속성이 있어야하는 상황이 즉시 발생했습니다. Button에서 상속 된 컨트롤을 결국 만들 것입니다.

렌더링 방법을 재정의하고 원하는대로 순서해야합니까?

---

최신 정보

DanHerbert의 답변 으로이 문제에 대한 해결책을 다시 찾는 데 관심이 생겼기 때문에 작업에 더 많은 시간을 할애했습니다

첫째, TagName을 오버로드하는 방법이 훨씬 쉽습니다.

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

Dan의 솔루션의 문제는 태그의 innerhtml이 값 속성에 배치되어 포스트 백에서 유효성 검사 오류가 발생 것입니다. 관련 문제는 값 속성을 그대로 적용하는 IE의 braindead <button>태그 구현 값 대신 innerhtml을 게시 것입니다. 따라서이 구현은 값 속성을 그대로 사용하기 위해 AddAttributesToRender 메서드를 재정의해야하며, 포스트 백을 완전히 망치지 않도록 IE에 대한 해결 방법을 제공해야합니다.

데이터 바인딩 된 컨트롤에 대한 CommandName / CommandArgument 속성을 활용하려는 경우 IE 문제를 해결할 수 없습니다. 이에 대한 해결 방법을 제안 할 수 있기 때문에 바랍니다.

회의를 진행했습니다.

ModernButton.cs

이것은 <button>올바른 값을 가진 적절한 HTML 로 렌더링 되지만 ASP.Net을 다시 게시 시스템에서는 작동하지 않습니다. Command이벤트 를 제공하는 데 필요한 내용 중 일부를 작성 했지만 실행되지 않았습니다.

일반 asp : 버튼을 사용 하여이 버튼을 나란히 살펴보면 다른 외에는 동일하게 보입니다. 따라서이 경우 ASP.Net이 Command이벤트를 어떻게 연결하고 있는지 잘 모르겠습니다 .

또 다른 문제는 중첩 된 서버입니다 (ParseChildren (false) 특성에서 볼 수있는 서버). 리터럴하는 동안 컨트롤에 리터럴 HTML 텍스트를 삽입하는 것은 상당히 많지만 중첩 된 서버 컨트롤에 대한 지원을 중첩 된 서버 컨트롤에 있습니까?

---

이것은 여전히 ​​오래된 질문이지만 ASP.NET Web Forms 응용 프로그램을 유지해야하는 기본 제공 단추 컨트롤 내부에 Bootstrap 글리프를 포함 시키려고 노력하면서 문제를 직접 선택했습니다.

부트를 문서에 따라 원하는 마크 업은 다음과 가능합니다.

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

이 마크 업을 서버 컨트롤에서 오류 메시지를 찾기 시작했습니다.

단추

이것은 첫 번째 논리적 단계이지만 -이 질문에서 설명하는 바와 같이 - 버튼은 <input>대신 요소를 렌더링 <button>하므로 내부 HTML을 추가 할 수 없습니다.

LinkButton ( Tsvetomir Tsonev의 답변에 대한 신용 )

출처

<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속성
• ServerClick이벤트 를 처리하기 눈에 띄는 JavaScript를 처리하고 의존합니다.

---

이 시점에서 기본 제공 컨트롤 중 어느 것도 적합하지 않은 것 같거나 다음과 같은 단계에서 원하는 기능을 제공합니다.

사용자 지정 컨트롤 ( 단 허버트 답변에, 대한의 크레딧 )

참고 : 그것은 Dan의 코드를 기반으로 모든이 그에게 돌아갑니다.

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숙소에 접근 할 수 있습니다. 이는 네이티브 버튼이 컨트롤 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>

이것은 일반적으로 완벽하게 작동하며 모두가 우리 팀에서 행복합니다.

---

나는 똑같은 것을 찾고있는 당신의 질문을 우연히 발견했습니다. 결국 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's 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에서 컨트롤을 기억하지 못한다는 것입니다. 나는 이것을 테스트하지 않았으므로 이미 작동 할 수 있지만 작동하는지 의심됩니다. PostBack에서 처리 할 하위 컨트롤에 대한 일부 ViewState 관리 코드를 추가해야합니다. 그러나 이것은 아마도 문제가되지 않을 것입니다. 필요한 경우 쉽게 추가 할 수 있지만 ViewState 지원을 추가하는 것은 매우 어렵지 않습니다.

---

새로운 컨트롤을 만들어 Button에서 상속하고 render 메서드를 재정의하거나 .browser 파일을 사용하여 사이트의 모든 Button을 재정의 할 수 있습니다. CSS Friendly 항목이 TreeView 컨트롤 등에 대해 작동하는 방식과 유사합니다.

---

ASP.NET Button 컨트롤을 단추로 사용하는 방법에 대해이 문서 에서 Button.UseSubmitBehavior 속성을 사용할 수 있습니다 .

---

편집 : 죄송합니다 .. 그게 점심 시간에 훑어 보는 질문에 대한 것입니다. <button runat = "server"> 태그 나 HtmlButton을 사용하지 않는 이유가 있습니까?

---

LinkButton을 사용하여 사용자에게 CSS로 스타일을 지정합니다.

---

나는 이것으로 하루 종일 고군분투하고 있습니다-내 사용자 정의 <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속성 을 해킹하는 것입니다 . 아직도 나는 그것을 알아 내지 못했다.

참고 URL : https://stackoverflow.com/questions/187482/how-can-i-use-the-button-tag-with-asp-net