How to use JQuery with Master Pages?

后端 未结 13 1121
甜味超标
甜味超标 2020-12-04 18:13

I can get simple examples to work fine as long as there\'s no master page involved. All I want to do is click a button and have it say \"hello world\" with the javascript in

相关标签:
13条回答
  • 2020-12-04 18:36

    Adam's solution is the best. Simple!

    Master page:

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

    Content page:

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

    where the button is

    <asp:Button ID="AlertButton" runat="server" Text="Button" />
    
    0 讨论(0)
  • 2020-12-04 18:40

    If your site has content pages in other folders, using the Page's ResolveUrl method in the src path will ensure that your js file can always be found:

    <script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
    
    0 讨论(0)
  • 2020-12-04 18:42
    • PROBLEM --> when using Site.Master pages the control id names (for ASP controls) get the ContentPlaceHolderID prefixed to them. (Note this not a problem for non-asp controls as they don't get 'reinterpreted' - i.e. they just appear as written)

    • SOLUTIONS:

        1. Simplest --> add ClientIDMode="Static" to the asp control definition (or set with properties) in aspx page
      • Alternatives include:
        1. Hardcoding the ContentPlaceHolderID name in the js code e.g "#ContentPlaceHolder1_controlName" - eek!!!!
        1. using the <%= controlName.ClientID %> in the ASP page - plus, assigning it - there- to a variable (or object of variables). The variable (or object dot notation) can then be used in external js page (NOTE: Can't use <%= controlName.ClientID %> in external js)
        1. Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
        1. Using the "[id$=_controlName]" instead of "#controlName" - this is involves a small search and is looking for a control that ends with the unique name - that way the start is irrelevant
    0 讨论(0)
  • 2020-12-04 18:43

    Just move the <script type="text/javascript" src="jquery.js" /> tag into the head tag in the master page. Then you can use jquery in all content pages.

    There is no magic about using master pages with jQuery.

    0 讨论(0)
  • 2020-12-04 18:43

    Reference the the Jquery .js file in the head of the MasterPage as follows:

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

    (some browsers don't like ending it with />)

    Then you can write things like

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

    in your javascript making sure to use the ClientId when referencing an ASP.Net control in your client code. That will handle any "mangling" of names and ids of the controls.

    0 讨论(0)
  • 2020-12-04 18:48

    In case if some one wants to access a label, here is the syntax

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

    where lbl is the label id and the text to display in the label is 'Hello'

    0 讨论(0)
提交回复
热议问题