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.
Steps to create your first ASP.NET web forms project with jQuery UI:
- Launch Visual Studio Web Express.
- Create a new ASP.NET Web Forms Application.
- 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.
- Likewise, you can see jQuery-UI java script files within the Scripts folder.
- 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.
- Open the Site.Master Page.
- In the Site.Master page, in the <Head>……</Head> section, remove the codes other than the title and ContentPlaceHolder.
- 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.
- In the ScriptManager section, remove all the script reference except the script reference for jQuery and jQuery-UI.
- 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.
- Remove all the other codes within the <header>…..</header> section and just enter the title of the project.
- 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”.
- Use the jQuery UI style in <footer> section as well.
- Now open the Default.aspx file.
- In the FeaturedContent content section, just leave the <H1>….</H1> section and remove the other lines.
- 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.
- Now you are ready to build the solution.
- 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.
- You and copy the source code of Site.Master and Default.aspx from the article jQuery UI with ASP.NET: Sample Source Code.