ASP.NET MVC नेविगेशन और उपयोगकर्ता इंटरफ़ेस डिजाइन

Question

लघु संस्करण:

---

आप किसी भी तरह से एक इनपुट बटन (प्रस्तुत) और एक एंकर टैग एक ही सीएसएस नेत्रहीन का उपयोग कर प्रस्तुत करने के लिए प्राप्त करने के लिए की जानते हैं और कोई जावास्क्रिप्ट नहीं?

लांग संस्करण:

---

मैं एक ASP.NET MVC आवेदन के विकास कर रहा हूँ। साइट में मेरे मॉडल के विवरण देखने या अपडेट करने के लिए पेज शामिल हैं। पृष्ठ कार्यवाही फ़ॉर्म के अंत में निहित हैं और आम तौर पर शामिल अद्यतन और रद्द या संपादित, हटाएँ और सूची (यदि पर एक विवरण पृष्ठ देखने)। अद्यतन, संपादित, और कार्यों सर्वर के लिए एक प्रपत्र से डेटा पोस्ट है, जबकि रद्द और सूची कार्यों/उचित प्राप्त अनुरोधों द्वारा संभाला जा सकता है कर रहे हैं हटा दें। यह ध्यान रखना महत्वपूर्ण है कि मेरे डिज़ाइन लक्ष्यों में से एक यह है कि जावास्क्रिप्ट सक्षम होने पर जावास्क्रिप्ट को जिस तरीके से अक्षम किया गया है, साइट को यथासंभव समान रूप से काम करना है। मैं यह भी चाहता हूं कि यूआई तत्व समान रूप से प्रस्तुत करें कि क्या तत्व पोस्टबैक का कारण बनता है या जीईटी अनुरोध को बंद कर देता है।

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

संपादित: स्टाइलिंग बटन और एंकर सीमांकन बॉक्स में ही एक ही आकार में रेंडर करने के लिए हो रही फोंट बाउंडिंग बॉक्स के भीतर आधारभूत करने के लिए एक ही स्थिति के सापेक्ष में प्रस्तुत करने के लिए प्राप्त करने में सक्षम नहीं किया जा रहा है और और शामिल का उपयोग कर मतभेद कंटेनर के सापेक्ष संरेखण। चीजें सिर्फ एक पिक्सेल से एक या दूसरी तरफ मेरे tweaks के बावजूद थे। यदि आप इसे काम करने में सक्षम हैं, तो कृपया मुझे बताएं। यह जानकर कि यह संभव है, तब तक कोशिश करना जारी रखेगा जब तक कि मैं इसे काम नहीं कर पाता।

एक चीज जिसकी मैंने कोशिश की थी, बटन बटन की तरह स्टाइल किए गए बटन के चारों ओर जीईटी-एक्शन लपेट रहा था। यह फ़ायरफ़ॉक्स में बहुत अच्छा काम करता है, लेकिन आईई 7 में नहीं। आईई 7 में ऐसे बटन पर क्लिक करने से एंकर पर वापस क्लिक करने का प्रस्ताव नहीं था। जो कुछ मैं अभी आया हूं, वह आवश्यक कार्रवाई से जुड़े विधि = "जीईटी" का उपयोग करके जीईटी के लिए एक नया फॉर्म बनाना है। मैं उस सबमिट बटन के चारों ओर लपेटता हूं जिसमें एक ऑनक्लिक हैंडलर है जो वांछित कार्रवाई के यूआरएल पर location.href सेट करता है। यह दृश्यमान रूप से वही प्रस्तुत करता है और काम करता प्रतीत होता है, भले ही फ़ॉर्म किसी अन्य रूप में घोंसला हो। एक मामूली निगल यह है कि यदि जावास्क्रिप्ट अक्षम है, तो मेरे जीईटी यूआरएल में एक अच्छा साफ यूआरएल होने की बजाय अंत में ? होता है।

मैं क्या जानना चाहता हूं कि किसी और ने इसे अलग तरीके से हल किया है जो बेहतर काम करेगा (और शायद कम HTML की आवश्यकता है)? क्या आपके पास कोई अन्य विचार है जो मैं कोशिश कर सकता हूं?किसी भी तरह से प्राप्त यूआरएल पर ? ठीक करने के लिए जब अनुरोध एक पोस्ट जब जावास्क्रिप्ट बंद कर दिया है के रूप में प्रस्तुत किया जाता है?

नमूना एक विवरण से नीचे दिए गए कोड को देखना। मुझे लगता है कि मैं कर सकता (और यकीनन चाहिए) के साथ-साथ जावास्क्रिप्ट के माध्यम से onclick हैंडलर जोड़ने के लिए, लेकिन कोड actuall बेहतर पढ़ता है जब मैं इसे इनलाइन है। मैं नीचे दिए गए सभी चिह्नों को उत्पन्न करने के लिए HtmlHelper एक्सटेंशन का उपयोग कर रहा हूं। मैंने पठनीयता में सुधार के लिए इसे सुधार दिया है।

<form action="../Edit/2" class="inline-form" method="get"> 
     <input class="button" 
       onclick="location.href='../Edit/2';return false;" 
       value="Edit" 
       type="submit" /> 
    </form> 
    <form action="../Delete/2" class="inline-form" method="post"> 
     <input class="button" 
       value="Delete" 
       type="submit" /> 
    </form> 
    <form action="../List" class="inline-form" method="get"> 
     <input class="button" 
       onclick="location.href='../List';return false;" 
       value="List Donors" 
       type="submit" /> 
    </form> 

Answer 1

आप की जांच करनी चाहिए बटन टैग स्टाइल के बारे में this article। इसमें सीएसएस और दोनों को समान रूप से प्रस्तुत करने के लिए सीएसएस शामिल है और बटन में आइकन को अनुमति देने का साइड इफेक्ट भी है।