2008-11-15 16 views
30

मैं तब तक ठीक काम करने के लिए सरल उदाहरण प्राप्त कर सकता हूं जब तक कोई मास्टर पेज शामिल न हो। मैं बस इतना करना चाहता हूं कि एक बटन पर क्लिक करें और यह एक मास्टर पृष्ठ का उपयोग करते हुए .js फ़ाइल में जावास्क्रिप्ट के साथ "हैलो वर्ल्ड" कहें। किसी भी मदद की बहुत सराहना की :)मास्टर पेजेस के साथ JQuery का उपयोग कैसे करें?

उत्तर

26

संपादित

@Adam टिप्पणी में बताते हैं, वहाँ एक देशी jQuery तंत्र है जो मूल रूप से मेरी मूल जवाब में हैक के रूप में एक ही बात करता है। jQuery का उपयोग करके आप

$('[id$=myButton]').click(function(){ alert('button clicked'); }); 

मेरे हैक मूल रूप से एक प्रोटोटाइप ASP.NET के लिए चारों ओर काम के रूप में विकसित किया गया था कर सकते हैं और मैं मूल जवाब के लिए यह अनुकूलित। ध्यान दें कि jQuery मूल रूप से हुड के नीचे एक ही चीज़ करता है। मैं अपने हैक को लागू करने पर, jQuery तरीके का उपयोग करने की सलाह देते हैं।

मूल जवाब टिप्पणी संदर्भ

के लिए छोड़ दिया जब आप एक मास्टर पृष्ठ, ASP.NET निर्भर पृष्ठों पर नियंत्रण के नाम mangles का उपयोग करें। आपको हैंडलर जोड़ने के लिए सही नियंत्रण खोजने का एक तरीका पता लगाने की आवश्यकता होगी (माना जाता है कि आप जावास्क्रिप्ट के साथ हैंडलर जोड़ रहे हैं)।

मैं इस सुविधा का उपयोग करने के लिए:

function asp$(id, tagName) { 
    var idRegexp = new RegExp(id + '$', 'i'); 
    var tags = new Array(); 
    if (tagName) { 
     tags = document.getElementsByTagName(tagName); 
    } 
    else { 
     tags = document.getElementsByName(id); 
    } 
    var control = null; 
    for (var i = 0; i < tags.length; ++i) { 
     var ctl = tags[i]; 
     if (idRegexp.test(ctl.id)) { 
      control = ctl; 
      break; 
     } 
    } 

    if (control) { 
     return $(control.id); 
    } 
    else { 
     return null; 
    } 
} 

तो फिर तुम जैसे कुछ कर सकते हैं:

jQuery(asp$('myButton','input')).click (function() { alert('button clicked'); }); 

जहां आप अपने बच्चे पेज

<asp:Button ID="myButton" runat="server" Text="Click Me" /> 
+1

मैं इस पर बहुत नया हूं और नाम-मैंगलिंग के बारे में कोई जानकारी नहीं थी। मैं इसे बाद में जाऊंगा। मैं इसकी सराहना करता हूं। –

+1

अपने ब्राउज़र पर 'स्रोत देखें' (या समकक्ष) का उपयोग करने के लिए उपयोग करें। यह आपको न केवल यह जांचने की अनुमति देता है कि आपके पृष्ठ उन सभी को प्रतिपादित कर रहे हैं जिन्हें आप चाहते हैं, लेकिन लोगों के पृष्ठों से चाल सीखने के लिए। – belugabob

+0

क्या एक जानबूझकर टाइपो '$ एएसपी' वी 'एएसपी $' है? मैं इसे काम करने के लिए नहीं मिल सका - यह नियंत्रण को ठीक करता है लेकिन jQuery कॉल किसी कारण से काम नहीं करता – flesh

15

बस मास्टर पेज में <script type="text/javascript" src="jquery.js" /> टैग को हेड टैग में ले जाएं। फिर आप सभी सामग्री पृष्ठों में jquery का उपयोग कर सकते हैं।

jQuery के साथ मास्टर पेज का उपयोग करने के बारे में कोई जादू नहीं है।

1

मास्टर पर निम्नलिखित है पृष्ठ:

jQuery लाइब्रेरी मास्टर पेज में जाती है। देखें कि पथ सही ढंग से संदर्भित है या नहीं। आप इस तरह अतिरिक्त प्रलेखन जोड़ने के लिए पसंद कर सकते हैं:

<head> 
    <script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 
    <% if (false) { %> 
    <script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script> 
    <% } %> 
</head> 

मास्टर पेज:

this.textBox.Attributes.Add("onChange", 
    String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID)); 
1

इस पोस्ट चेक आउट::

<head> 
<script type="text/javascript"> 
    $(document).ready(
     function() 
     { 
      alert('Hello!'); 
     } 
    ); 
</script> 
</head> 

सामग्री पृष्ठों और उपयोगकर्ता नियंत्रण के लिए codebehind

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

यह भी बताता है कि विजुअल स्टूडियो में jQuery के लिए इंटेलिजेंस कैसे प्राप्त करें।

5

Jquery का संदर्भ लें।Masterpage के सिर में जे एस फ़ाइल इस प्रकार है:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 

तो फिर तुम जैसे

$('#<%= myBtn.ClientID%>').show() 
में

बातें लिख सकते हैं

(कुछ ब्राउज़रों /> के साथ समाप्त होने वाले पसंद नहीं है) अपने जावास्क्रिप्ट अपने क्लाइंट कोड में एएसपी.Net नियंत्रण का संदर्भ देते समय क्लाइंट आईडी का उपयोग करना सुनिश्चित करता है। यह नामों और नियंत्रण के आईडी के किसी भी "उलझन" को संभालेगा।

+0

क्या मुझे यह काम करने की उम्मीद करनी चाहिए? $ ('# <% = बटन 1। क्लाइंट आईडी%' ') क्लिक करें (फ़ंक्शन() { अलर्ट ('हैलो वर्ल्ड!'); }); यह कोड मेरी .js फ़ाइल में है। मुझे पता है कि मेरे पास सब ठीक से सेट है क्योंकि अगर मैं 'उलझन वाली आईडी' की प्रतिलिपि बनाता हूं पृष्ठ स्रोत से यह ठीक काम करता है। –

+0

<% %> वाक्यविन्यास केवल .aspx फ़ाइल के भीतर काम करता है। तो यदि आप इसका उपयोग करना चाहते हैं, तो आपको अपनी स्क्रिप्ट को अपनी एएसपीएक्स फ़ाइल में धन्यवाद! –

20

यकीन है कि jQuery में जोड़ा जा रहा है कि सुनिश्चित करें मास्टर पेज। यह देखते हुए आप इस नियंत्रण है:

<asp:Button ID="myButton" runat="server" Text="Submit" /> 

आप इस के साथ जावास्क्रिप्ट wireup कर सकते हैं:

$(document).ready(function() { 
    $('[id$=myButton]').click(function() { alert('button clicked'); }); 
}); 

$(document).ready() पर सक्रिय होता है डोम को पूरा भरा है, और सभी तत्वों होना चाहिए। आप इस आगे

$(function() {}); 

के साथ अपने आईडी गुण के आधार पर चयनकर्ता वाक्यविन्यास $('[id$=myButton]') खोजें तत्वों को आसान बनाने के लिए, लेकिन स्ट्रिंग के अंत से मेल खाता है सकते हैं। इसके विपरीत, '[id^=myButton]' शुरुआत से मेल खाता है, लेकिन अनन्य आईडी को फ़िल्टर करने के प्रयोजनों के लिए जो बहुत उपयोगी नहीं होगा। JQuery के साथ आप कई सारे उपयोगी चयनकर्ताओं का उपयोग कर सकते हैं। Learn them all, और आपके बहुत सारे काम आपके लिए किए जाएंगे।

समस्या यह है कि एएसपी.Net प्रत्येक तत्व के लिए एक अद्वितीय आईडी और नाम विशेषता बनाता है, जिससे उन्हें मुश्किल मिलती है। ऐसा लगता था कि आपको अद्वितीय आईडी प्रॉपर्टी को सर्वर से जावास्क्रिप्ट में पास करने की आवश्यकता होगी, लेकिन jQuery उस अनचाहे बनाता है।

jQuery के चयनकर्ताओं की शक्ति के साथ, आप सीधे जावास्क्रिप्ट कोड में जावास्क्रिप्ट को सर्वर-साइड से और वायरअप ईवेंट को सीधे अपने जावास्क्रिप्ट कोड में डीक्यूपल कर सकते हैं। आपको मार्कअप में अब जावास्क्रिप्ट को जोड़ना नहीं चाहिए, जो पठनीयता में मदद करता है और रिफैक्टरिंग को अधिक आसान बनाता है।

0

मैंने उदाहरणों के सबसे सरल से भी शुरुआत की और कोई भाग्य नहीं था। अंततः मुझे मास्टर पेज के <head> अनुभाग के के बाहर jquery .js फ़ाइल जोड़ना पड़ा। फ़ायरफ़ॉक्स में काम करने के लिए मुझे कुछ भी मिल सकता था (अभी तक अन्य ब्राउज़रों की कोशिश नहीं की है)।

मुझे भी एक पूर्ण पते के साथ .js फ़ाइल का संदर्भ देना पड़ा। पूरी तरह से यकीन नहीं है कि उस के साथ क्या हो रहा है।

7

एडम का समाधान सबसे अच्छा है। सरल!

मास्टर पेज:

<head runat="server">  
    <title></title> 
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder>  
</head> 

सामग्री पेज:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("[id$=AlertButton]").click(function() { 
      alert("Welcome jQuery !"); 
     }); 
    }); 
</script> 
</asp:Content> 

कुछ एक, एक लेबल एक्सेस करना चाहती है यहाँ जहां बटन

<asp:Button ID="AlertButton" runat="server" Text="Button" /> 
1

है मामले में वाक्य रचना है

$('[id$=lbl]').text('Hello'); 

जहां lbl लेबल आईडी और पाठ लेबल में प्रदर्शित करने के लिए है 'हैलो'

0

एडम Lassek के रूप में करने का विरोध किया,, jQuery चयनकर्ताओं का उपयोग कर से जुड़ा हुआ है, हालांकि मुझे लगता है कि इसके लायक स्पष्ट रूप से बाहर बुला अपनी कक्षा से तत्वों का चयन उनकी आईडी

उदा। $("#myButton").click(function() { alert('button clicked'); });

के बजाय बजाय $(".myButtonCssClass").click(function() { alert('button clicked'); });

का उपयोग करें और बटन के लिए वर्ग जोड़ें:

<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" /> 

इस बारे में चिंता करने नहीं होने का लाभ मिलता है कि क्या दो नियंत्रण आईडी 'अंत' उसी तरह से एक ही समय में एक ही jQuery कोड को एक ही समय में (उसी सीएसएस वर्ग के साथ) लागू करने में सक्षम होने के अतिरिक्त।

1

जब पृष्ठों को मास्टर पेजों के साथ प्रस्तुत किया जाता है, तो पृष्ठ प्रतिपादन पर नियंत्रण आईडी बदल जाती है ताकि हम उन्हें #controlid जैसे jQuery में संदर्भित न कर सकें। इसके बजाय हमें input[id$=controlid] का उपयोग करने का प्रयास करना चाहिए। यदि नियंत्रण इनपुट नियंत्रण के रूप में प्रदान किया जाता है या यदि एंकर टैग jQuery में a[id$=controlid] का उपयोग करता है।

0
  • समस्या -> जब Site.Master पृष्ठों नियंत्रण आईडी नामों (एएसपी नियंत्रण के लिए) ContentPlaceHolderID उन्हें पहले से जुड़ा हुआ हो का उपयोग कर। (गैर एएसपी नियंत्रण के लिए यह एक समस्या नहीं नोट के रूप में वे नहीं करते हैं यह 'पुनर्व्याख्या' - यानी वे बस के रूप में लिखा दिखाई देते हैं)

  • समाधान:

      1. सरल -> जोड़ने ClientIDMode = एएसपी नियंत्रण परिभाषा में "स्थैतिक" (या गुणों के साथ सेट) aspx पेज में
    • विकल्प शामिल हैं:
      1. जेएस कोड में ContentPlaceHolderID नाम हार्डकोडिंग उदाहरण "# ContentPlaceHolder1_controlName" - eek !!!!
      1. एएसपी पेज में <% = controlName.ClientID%> का उपयोग कर - प्लस, यह बताए - वहाँ, एक चर (या चर की वस्तु) के लिए। परिवर्तनीय (या ऑब्जेक्ट डॉट नोटेशन) का उपयोग बाहरी जेएस पेज (नोट: <% = controlName का उपयोग नहीं कर सकता) में किया जा सकता है।ClientID बाहरी js में%>)
      1. एएसपी पेज में और के रूप में ".controlName" नियंत्रण की बात कर आईडी के रूप में एक अनूठा (इसी नाम) के साथ CssClass का उपयोग के बजाय " #controlName "
      1. का उपयोग करते हुए" [आईडी $ = _ controlname] #controlName "" के बजाय "- यह एक छोटे खोज शामिल है और है एक नियंत्रण है कि समाप्त होता है की तलाश में है अद्वितीय नाम के साथ - इस तरह से शुरुआत अप्रासंगिक है
संबंधित मुद्दे