Wednesday, March 09, 2011

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.

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape