jQuery UI with ASP.NET – Step by Step Instruction

jQuery-UI is the child of jQuery. It is a user interface framework build with jQuery Library. Do you know that jQuery-UI comes with Visual Studio 2012 by default? Yes, the default User Interface framework which comes with Visual Studio for Web is jQuery-UI. When you create a Web Forms project or MVC project (Not an empty project), jQuery-UI Libraries will be available in it. It will even have the essential widgets to create a basic website.

For this article, I am using Visual Studio Express for Web 2012. You can either use either Visual Studio editions like Ultimate, Premium, professional or Team Server. Alternatively, you can download Visual Studio Express for Web 2012 from https://www.visualstudio.com/en-us.

This is a basic example by modifying the Site.Master page and the Default.aspx page using jQuery-UI’s style sheet and widgets.

For your convenience, you can copy the source code of Site.Master and Default.aspx from the article jQuery UI with ASP.NET: Sample Source Code.

Steps to create your first ASP.NET web forms project with jQuery UI:

  1. Launch Visual Studio Web Express.
  2. Create a new ASP.NET Web Forms Application.
    jQuery UI with ASP.NET - 01
  3. Open the Solution Explorer and go to the folder Content >> Themes >> Base. You can see several jQuery-UI style sheet widgets are already available in the project.
    jQuery UI with ASP.NET - 02
  4. Likewise, you can see jQuery-UI java script files within the Scripts folder.
    jQuery UI with ASP.NET - 03
  5. Now the project is created. The jQuery-UI framework needed for creating a basic website is also available in the project. You can start using the UI framework.
  6. Open the Site.Master Page.
  7. In the Site.Master page, in the <Head>……</Head> section, remove the codes other than the title and ContentPlaceHolder.
  8. Enter the below code instead of the removed lines of code. This line of code is to create a reference for the jQuery UI style sheet jQuery-ui.css.
    jQuery UI with ASP.NET - 04
  9. In the ScriptManager section, remove all the script reference except the script reference for jQuery and jQuery-UI.
    jQuery UI with ASP.NET - 05
  10. In the <header> tag, change the class to “ui-widget ui-widget-header ui-corner-all”. This will create the header with style in the jQueri-ui.css with a border line and rounded edges.
  11. Remove all the other codes within the <header>…..</header> section and just enter the title of the project.
    jQuery UI with ASP.NET - 06
  12. Remove the code from below the closing of </header> section until the <footer> section. Then create table structure with <div> tags. The table should have two columns. The left column is used for navigation urls and the right column will have the ContentPlaceHolder for FeaturedContent and MainContent. In the main div tag, set the class to jQuery-UI style “ui-widget ui-widget-content ui-corner-all”.
    jQuery UI with ASP.NET - 07
  13. Use the jQuery UI style in <footer> section as well.
    jQuery UI with ASP.NET - 08
  14. Now open the Default.aspx file.
  15. In the FeaturedContent content section, just leave the <H1>….</H1> section and remove the other lines.
    jQuery UI with ASP.NET - 09
  16. Remove all the lines from the MainContent place holder section and enter the below shown code. This code is to create an accordion widget with jQuery-UI. Accordion is one among the widgets in jQuery-UI similar to the vertical tabs, which will collapse/expand on clicking the tab heading.
    jQuery UI with ASP.NET - 10
  17. Now you are ready to build the solution.
  18. Build the solution by hitting F5 key or by clicking the green arrow button in the tool bar in Visual Studio. On successful completion of build the browser will open with your first ASP.NET web form with jQuery User Interface.
    jQuery UI with ASP.NET - 11
  19. You and copy the source code of Site.Master and Default.aspx from the article jQuery UI with ASP.NET: Sample Source Code.

 

 

5 comments for “jQuery UI with ASP.NET – Step by Step Instruction

  1. Dennis Ward
    July 7, 2015 at 9:46 pm

    Beaulin,

    This worked perfectly for me; however, it didn’t work for me when I changed from accordion to tabs. Would happen to have a working example of using tabs within the same sort of structure (Site.Master & Default.aspx)?

    Thanks!!!

  2. Tamas Szenasi
    December 8, 2014 at 12:54 pm

    For me this code is not working properly after doing everything with your “tutorial”. This is my working code:

    This is my heading section in the Site.Master file:

    I have to give references to the VS program where to find the scripts and the style sheet because without this the accordion is shown without styling.

    P.S: I checked it without the jQuery references. Should be a reference to them in the code.

    This is my solution. Thank you. Tamas

  3. Vishal R Shukla
    November 3, 2013 at 12:17 am

    This article of no use as their as not single asp object was created in this Example it is as using as HTMlL control and putting JQuery UI in It its on no Use

    • November 3, 2013 at 7:03 pm

      Vishal,
      Thank you for your feedback. May be this article is no use for you. But there are people like me, who need this as a “Hello World” kind of basic instruction, to start using jQuery.UI. In fact this is my first jQuery.UI experience with web forms. Any way, I’ll consider your feedback and try to go more in depth in my future articles.

      • July
        September 28, 2014 at 10:32 am

        How are you able to use FeaturedContent in Default.aspx when you make no reference to it in Site.Master?

Leave your thoughts...