c# - मैं एएसपी.नेट के साथ बटन टैग का उपयोग कैसे करूं?




asp.net html (5)

आप बटन का उपयोग कर सकते हैं। UsseubmitBehavior संपत्ति के रूप में एक बटन के रूप में एक asp.net बटन नियंत्रण प्रतिपादन के बारे में इस लेख में चर्चा की।

संपादित करें: क्षमा करें .. यही मेरे लंच ब्रेक पर सवाल उठाने के लिए मिलता है। क्या कारण हैं कि आप केवल <button runat = "server"> टैग या HTML बटन का उपयोग नहीं करेंगे?

मैं एक एएसपी.नेट वेबसाइट में नया <button> टैग का उपयोग करना चाहूंगा, जो अन्य बातों के अलावा, सीएसएस स्टाइल पाठ की अनुमति देता है और बटन के अंदर एक ग्राफ़िक को एम्बेड करता है। Asp: बटन नियंत्रण <input type="button"> प्रस्तुत करता है, क्या <button>

मैंने जो पढ़ा है, उसमें से IE के साथ एक असंगति है, जब बटन एक <form> भीतर स्थित है, लेकिन एएसपी.नेट में यह मान विशेषता के बजाए बटन के मार्कअप को पोस्ट कर रहा है, यह वैसे भी __doPostBack को आग करने के लिए onclick घटना का उपयोग करेगा, इसलिए मुझे नहीं लगता कि यह एक समस्या होगी।

क्या कोई कारण है कि मुझे इसका उपयोग क्यों नहीं करना चाहिए? यदि नहीं, तो आप एस्प: बटन या इसके आधार पर एक नया सर्वर नियंत्रण के साथ इसका समर्थन कैसे करेंगे? अगर मैं टाल सकता है तो मैं अपना खुद का सर्वर नियंत्रण नहीं लिखना चाहूंगा

सबसे पहले <button runat="server"> समाधान काम किया, लेकिन मैं तुरंत एक ऐसी स्थिति में चला गया जहां उसे CommandName संपत्ति की आवश्यकता हो, जो कि HtmlButton नियंत्रण नहीं है ऐसा लगता है कि मुझे सभी के बाद से बटन से नियंत्रण प्राप्त करने की आवश्यकता है।

रेंडर पद्धति को ओवरराइड करने के लिए मुझे क्या करने की आवश्यकता है और इसे रेंडर करने के लिए मुझे क्या चाहिए?

अद्यतन करें

DanHerbert के जवाब ने मुझे फिर से इसका समाधान खोजने में रुचि दी है, इसलिए मैंने इसके लिए कुछ और समय बिताया है।

सबसे पहले, TagName को ओवरलोड करने का एक बहुत आसान तरीका है:

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

डेन के समाधान के साथ समस्या के रूप में यह खड़ा है टैग के भीतर का HTML मूल्य संपत्ति में रखा गया है, जो पोस्टबैक पर एक सत्यापन त्रुटि का कारण बनता है। एक संबंधित समस्या यह है, भले ही आप मूल्य संपत्ति को सही ढंग से प्रस्तुत करते हैं, तो IE का ब्राइंडेड का कार्यान्वयन <button> टैग के बजाय मूल्य के बजाय innerhtml पोस्ट करता है। इसलिए, मूल्य गुण को सही ढंग से प्रस्तुत करने के लिए, और इसके लिए आईआर के कुछ प्रकार के समाधान प्रदान करने के लिए AddAttributesToRender विधि को ओवरराइड करने की आवश्यकता है, इसलिए यह पूरी तरह से पोस्टबैक को स्क्रू नहीं करता है

यदि आप डेटा-बन्द नियंत्रण के लिए CommandName / CommandArgument गुणों का लाभ लेना चाहते हैं, तो आईई समस्या अनदेखा हो सकती है। उम्मीद है कि कोई इस के लिए एक वैकल्पिक हल सुझा सकता है।

मैंने प्रतिपादन पर प्रगति की है:

ModernButton.cs

यह उचित मान के साथ एक उचित HTML <button> के रूप में देता है, लेकिन यह एएसपी.Net PostBack सिस्टम के साथ काम नहीं करता है। मैंने Command घटना प्रदान करने के लिए कुछ की जरूरत है, लेकिन यह आग नहीं है

जब इस बटन को एक नियमित एएसपी के साथ साइड-बाय-साइड का निरीक्षण किया जाता है: बटन, वो मुझे जो मतभेदों की ज़रूरत है उससे दूसरे समान दिखते हैं I इसलिए मुझे यकीन नहीं है कि एएसपी.नेट इस मामले में Command इवेंट को कैसे जुटा रहा है।

एक अतिरिक्त समस्या यह है, नेस्टेड सर्वर नियंत्रण प्रदान नहीं किए जाते हैं (जैसा कि आप पार्सबल्डन (झूठी) विशेषता के साथ देख सकते हैं)। रेंडर के दौरान शाब्दिक HTML पाठ को नियंत्रित करने में बहुत आसान है, लेकिन आप नेस्टेड सर्वर नियंत्रणों के लिए समर्थन की अनुमति कैसे देते हैं?


आप नया नियंत्रण कर सकते हैं, बटन से उत्तराधिकारी प्राप्त कर सकते हैं, और रेंडर विधि को ओवरराइड कर सकते हैं, या साइट में सभी बटनों को ओवरराइड करने के लिए। ब्राउज़र फ़ाइल का उपयोग कर सकते हैं, जिस तरह से सीएसएस मैत्रीपूर्ण सामान ट्रीविय्यू नियंत्रण आदि के लिए काम करता है।


मैंने आपके प्रश्न पर एक ही सटीक चीज़ की तलाश में ठोकर खाई। एएसपी.नेट Button नियंत्रण वास्तव में गाया गया है, यह जानने के लिए मैंने रिफ्लेक्टर का उपयोग कर समाप्त कर दिया। यह वास्तव में बदलना आसान हो जाता है।

यह वास्तव में TagName के TagName और TagKey गुणों को ओवरराइड करने के लिए नीचे आता है। आपके द्वारा ऐसा करने के बाद, आपको यह सुनिश्चित करने की आवश्यकता है कि आप बटन की सामग्री मैन्युअल रूप से प्रस्तुत करते हैं, क्योंकि मूल Button वर्ग में कभी भी रेंडर करने के लिए सामग्री नहीं थी और यदि आप सामग्री को प्रस्तुत नहीं करते हैं तो नियंत्रण एक टेक्स्ट-कम बटन प्रदान करेगा

अद्यतन करें:

विरासत के जरिए बटन नियंत्रण में कुछ छोटे संशोधन करना संभव है और फिर भी काफी अच्छी तरह से काम करते हैं। यह समाधान ऑन कॉमांड के लिए अपने स्वयं के ईवेंट हैंडलर्स को कार्यान्वित करने की आवश्यकता को समाप्त करता है (हालांकि यदि आप जानना चाहते हैं कि कैसे करना है कि मैं आपको यह कैसे दिखाता हूं कि यह कैसे नियंत्रित किया जाता है)। यह उस मान को जमा करने के मुद्दे को भी ठीक करता है जो इसमें मार्कअप है, IE के अलावा, शायद मुझे अभी भी यकीन नहीं है कि आईई के बटन टैग के खराब कार्यान्वयन को कैसे ठीक करें। यह सिर्फ एक सचमुच तकनीकी सीमा हो सकती है जो कि आस-पास काम करना असंभव है ...

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

इस नियंत्रण का उपयोग करने के लिए, आपके पास कुछ विकल्प हैं। एक को एएसपी मार्कअप में सीधे नियंत्रण रखना है।

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

मुझे नहीं पता है कि दोनों विकल्पों का एक संयोजन कितना अच्छा काम करता है जैसा मैंने परीक्षण नहीं किया है।

इस नियंत्रण का सिर्फ एक ही नतीजा यह है कि मुझे नहीं लगता कि यह पोस्टबैक में आपके नियंत्रण को याद रखेगा। मैंने यह परीक्षण नहीं किया है इसलिए यह पहले से ही काम कर सकता है, लेकिन मुझे संदेह है कि ऐसा होता है। मुझे लगता है कि पोस्टबैक में उप-नियंत्रणों के लिए कुछ व्यूस्टेट प्रबंधन कोड जोड़ना होगा, हालांकि मुझे यह लगता है कि यह आपके लिए कोई समस्या नहीं है। व्यूस्टेट समर्थन को जोड़ना बहुत कठिन नहीं होना चाहिए, हालांकि यदि आवश्यक हो तो आसानी से जोड़ा जा सकता है।


मैं पूरे दिन इस के साथ संघर्ष कर रहा हूं - मेरा कस्टम <button/> उत्पन्न नियंत्रण काम नहीं कर रहा है:

System.Web.HttpRequestValidationException: एक संभावित खतरनाक अनुरोध। क्लाइंट से फ़ार्म मान का पता चला था

क्या होता है। नेट एक name विशेषता जोड़ता है:

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

आईआई 6 और आईई 7 का उपयोग करते समय name विशेषता सर्वर त्रुटि फेंकता है। अन्य ब्राउज़रों (ओपेरा, आईई 8, फ़ायरफ़ॉक्स, सफारी) में सब कुछ ठीक काम करता है।

इसका इलाज उस name विशेषता को दूर करने का है फिर भी मुझे नहीं पता है कि बाहर


यह एक पुराना सवाल है, लेकिन हम में से उन लोगों के लिए जो अब भी एएसपी.नेट वेब फॉर्म के अनुप्रयोगों को बनाए रखने के लिए पर्याप्त नहीं है, मैं स्वयं के माध्यम से अपने आप में गया था जबकि बिल्ट-इन बटन नियंत्रणों के अंदर बूटस्ट्रैप ग्लिफ़ को शामिल करने की कोशिश कर रहा था।

बूटस्ट्रैप प्रलेखन के अनुसार, इच्छित मार्कअप निम्नानुसार है:

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

मुझे एक सर्वर नियंत्रण द्वारा प्रदान करने के लिए इस मार्कअप की ज़रूरत है, इसलिए मैं विकल्पों को ढूंढने के लिए तैयार हूं

बटन

यह पहला तार्किक कदम होगा, लेकिन यह प्रश्न बताता है- बटन <input> <button> बजाय एक <input> तत्व को प्रस्तुत करता है, इसलिए आंतरिक एचटीएमएल जोड़ना संभव नहीं है।

लिंकबटन (क्रेडिट को 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 गुण

विपक्ष

  • <button> बदले <button> renders <button> </a>
  • रेंडरर्स और घुसपैठ जावास्क्रिप्ट पर निर्भर करता है

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 ईवेंट को प्रबंधित करने के लिए रेंडर और निकम्मा जावास्क्रिप्ट पर निर्भर करता है

इस बिंदु पर यह स्पष्ट है कि अंतर्निहित नियंत्रणों में से कोई भी उपयुक्त नहीं लग रहा है, इसलिए अगला तार्किक कदम वांछित कार्यक्षमता प्राप्त करने के लिए उन्हें कोशिश और संशोधित करें।

कस्टम नियंत्रण ( डेन हर्बर्ट के उत्तर में क्रेडिट)

नोट: यह दान के कोड पर आधारित है, इसलिए सभी श्रेय उसके पास जाता है

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

मैंने कक्षा को न्यूनतम से नीचे छीन लिया है, और जितना संभव हो उतना छोटा कोड के साथ एक ही कार्यक्षमता को हासिल करने के लिए इसे पुन: लागू किया है। मैंने कुछ सुधार भी जोड़े हैं I अर्थात्:

  • PersistChildren विशेषता हटाएं (अनावश्यक लगता है)
  • TagName ओवरराइड निकालें (अनावश्यक लगता है)
  • Text से एचटीएमएल डीकोडिंग को निकालें (आधार वर्ग पहले से ही इसे संभालता है)
  • OnPreRender छोड़ें बरकरार; इसके बजाय AddParsedSubObject ओवरराइड करें (सरल)
  • RenderContents ओवरराइड को सरल बनाएं
  • एक Value प्रॉपर्टी जोड़ें (नीचे देखें)
  • एक नेमस्पेस जोड़ें ( @ रजिस्टर डायरेक्टिव के नमूने को शामिल करने के लिए)
  • निर्देशों 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 गुण
  • घुसपैठ जावास्क्रिप्ट पर रेंडर या भरोसा नहीं करता है

विपक्ष

  • कोई नहीं (एक अंतर्निहित नियंत्रण नहीं होने के अलावा)




htmlbutton