An ASP.NET MVC 2 & JQueryUI example : Part 1 – Introduction

This entry is part 1 of 2 in the series ASP.NET MVC 2 & JQuery

MVCJQueryUIExample is an ASP.NET MVC example application that uses the JQueryUI CSS theme framework to create a fully themeable user interface which allows designers to use JQueryUI’s themeroller application to create new application themes. The demo source code shows my personal take on creating themeable CSS frameworks and some cute JQuery to allow previews of themes on the fly.

Below are some examples of the application using some of the standard themes available, all applied with no change to the code base:

image

image

image

Requirements:

You will need to have Visual Studio 2010 or Visual Web Developer 2010 Express installed to build the source.
You will need to have ASP.NET MVC 2 installed, I used the Microsoft Web Platform Installer to install it.
You will need to have Microsoft SQL Server 2008 Express installed as the project uses the SQL ASP.Net membership provider to store the selected theme in use against a users profile in the Visual Studio generated ASPNETDB.

I am assuming that you already have a basic understanding of ASP.NET MVC and are at least familiar with using the ASP.NET membership system and a reasonable knowledge of javascript.

The source code is available for download here.

Basic Concept:

The demo website is fairly simple consisting of a Header Area that contains a User Menu and a Logo Area, a Content Area and a Footer Area.

Outline

User Menu Area:
The User Menu Area’s content changes based on whether the current user is logged on or not.

When logged on the User Menu Area contains the user’s personal gravatar if they have one, their username, which if clicked will take them to a page to edit their profile including change their preferred application theme, and a log off button.

UserMenuLogoff

When not logged on the User Menu Area only displays the log on button.

UserMenuLogon

Content Area:
The Content Area’s holds two types of content: page views such as Home, Products, Blog, About and Contact and administrative views such as Logon, Registration and Profile Editing.

When displaying page content the Content Area uses a two column layout with tabs representing the pages available, clicking a tab results in a browser request and only the content for the selected tab is available at any one time. For this demo the individual content pages just display portions of Lorem ipsum as fake content and the sidebar data is static.

PageContent

When displaying administrative views the Content Area uses a single column layout and always displays a link to the Home page.

AdminContent

The administrative pages in the application are:

  • A logon page
  • A new user registration page
  • A user details and profile editor page

ProfileEdit

The user details and profile editor page has tabs that do not cause a request to the server when changing tabs, the data for both tabs is available without a post back.

The Details:

Now that you know what the website is designed to do we can get down to the details and show how it is done.

The CSS theme structure:

If you open the project in Visual Studio you will see a project layout as below. In the content directory there is a themes subdirectory and then a further sub directory for each theme.

image

At the top level of the content directory the following CSS files are present:

  • reset.css (a file taken from the Yahoo User Interface framework that resets element styles to common values across all browsers as each browser has different default values).
  • reset-fonts.css (also taken from the Yahoo User Interface framework and similar in that it resets all font styles for elements to common values across browsers).
  • typography.css (a CSS file where we place any font based styles for our application that are not theme specific)
  • layout.css (a CSS file where we place all styles that affect the layout of our application, these are not theme specific but based on how we want to structure the site layout. It should not contain any styles that set colors or fonts).
  • default.css (a CSS file that includes all the above files so that we can just include one file in our application).

The themes directory contains all the JQueryUI themes from the 1.8.2 build. Each theme subdirectory has a CSS file named “jquery.ui.all.css” so to change a theme basically requires linking to the same file in a different directory based on the theme name as each “jquery.ui.all.css” file contains exactly the same CSS classes just with different colors / fonts etc. based on the theme. You can make a new theme with the themeroller application and place it in the theme directory to make it available to your application.

JQueryUI:

The JQueryUI widgets have great documentation so I will just discuss how I used their CSS framework in the demo app.
JQueryUI is basically a set of UI widgets such as accordion, button, datepicker, dialog etc. In order to keep a similar styling across these widgets they developed a set of CSS classes that can be reused and composed together to set common styles. These styles fall into the following areas:

  • Widget Containers – styles pertaining to containers, container content and headers.
  • Interaction States – styles pertaining to clickable elements interactions including a default style, hover style, active style and focus style.
  • Interaction Cues – styles pertaining to elements that are highlighted, disabled or in an error state.
  • Icons – styles pertaining to how images and icons are depicted and the JQueryUI themes contain a set of default icons that have had their colors set for each theme.
  • Miscellaneous Visuals – corner styles and overlay styles.

By applying these styles to the elements of our application we can leverage the same framework as the JQueryUI widgets and get a themeable application, for example if we apply the widget container styles to our broad container areas (Header, User Menu, Content, Footer) and the interaction styles to our links and tabs we are immediately able to use any of the JQueryUI standard themes and have our application look and feel themeable. I’ll dive into the code a little later to show you exactly how I did this.

ASP.NET MVC 2:

The ASP.NET MVC part of the project has very few changes from the default project created by the project wizard. There are only two controllers, the generated AccountController and the HomeController, the HomeController has methods for each of page data view and just returns an appropriate ViewResult.

The first real change in the ASP.NET MVC project is in how I setup the master pages. I have one Site.master that includes all the appropriate scripts and CSS files, it also renders the header and footer areas and has a content placeholder for the Content Area. There are two nested master pages, OneColumn.master and TwoColumn.master, which can plug into the Site.Master content placeholder and as mentioned earlier the page views use the TwoColumn master page while administrative views use the OneColumn master page.

The second change is that I have setup the Profile Provider in the Web.config file to have a property called “Theme” that allows us to store the users chosen theme against their ASP.NET membership profile.

image

That’s the end of the introduction to the demo, hopefully it gives you an idea about what the intent and basic concepts of the demo are. in part 2 we will dive into the code.

Series NavigationAn ASP.NET MVC 2 & JQueryUI example: Part 2 – Jumping in >>
This entry was posted in enterprise-examples and tagged , , , , . Series: . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

One Comment

  1. Posted April 19, 2014 at 12:15 am | Permalink

    You ought to take part in a contest for one of the greatest
    blogs on the internet. I am going to highly recommend this website!

    christian louboutin shoes homme

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Skip to toolbar