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.

5 comments:

Guy Schaller said...

i do agree that if you are not using jQuery in all of your pages you can save the user the trouble of downloading it, and make him download jQuery only if he at some point visits that particular page.

but... don't forget that its not that big of a deal. the jQuery files are minified and dont weigh that much. and also if the user visited one of your pages that has jQuery that file is now cached in his browser. he doesn't download it again everytime he visits one of your pages.

and if you want you can even improve the chances that this user has jQuery already cached. and use a cdn, google cdn or microsoft cdn
and that way save him the trouble of downloading it agian.

mical said...

hey dude this is really nice blog its very useful for me and describrd how to use jquery with master page and please contineu posted this type of another blog thannks for sharing iformation

deepak54 said...

Thank you u resolve my problem

deepak54 said...

Thanks for resolve my problem

Kuv said...

Thank you for your useful post. I managed to get jquiryui datepicker working on asp.net 2.0 content page without having to declare any of the css and javascript in the master page! Good Post...very appreciated.

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