Using JQuery with Content Master Pages in Asp.net?

I want to use JQuery to only one of my content page, so rather than loading heavy jquery .js file on all pages i would like to just load on one of my application page.

So In order to use JQuery in individual content page rather than declaring in Master Page i have used following steps.



Remember: Don't declare anything in master page.

Please refer to below example.  Practically below example won't make much sense, but it gives you an idea about how to declare .css file and .js file of jquery in content page.  It also show how to call jquery function.


<asp:Content ID="Content1" ContentPlaceHolderID="CC" Runat="Server">       


<link type="text/css" rel="stylesheet" href="jqueryJS/jquery-ui-1.7.2.custom.css" />




Your Page Content




<script type="text/javascript" src="jquery-1.4.2.js"></script>


    <script language="javascript" type="text/javascript">
$(function(){
 $("#flag").html("Hello World !! (display due to jQuery)");
});
    </script>
</asp:Content>

Above example try to demonstrate that

1. Declare any .CSS File on top of content page, if it is not declared in Master Page.  (Any specific .CSS File which is been used by your JQuery code).
2. Have your Page Content as usual.
3. Declare path for JQuery .Js file, before </asp:Content>
4. Write JQuery code which you would like to execute, just before </asp:Content> and after JQuery file declaration.
5. You should also remember that when referring to any element in content page client-side id has some added characters.  Example: <input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button1" id="ctl00_ContentPlaceHolder1_Button1" />, so you can refer to such element like $("#<<%=Button1.ClientID%>")

Since JQuery .Js files affects the performance, I recommend using Jquery file to individual content page rather than loading in Master Page, as hardly few pages of your application is using JQuery.