Click here to Skip to main content
15,861,172 members
Articles / Web Development / ASP.NET

Improving ASP.NET MVC MUSIC STORE more usability with DotNetAge in 30 minutes

Rate me:
Please Sign up or sign in to vote.
4.87/5 (12 votes)
23 Nov 2010GPL38 min read 82.8K   5.5K   32   11
Using the DotNetAge to upgrade the ASP.NET Mvc Music Store add widgets and security features just in minutes.

Introduction

MVC Music Store is a tutorial application built on ASP.NET MVC 2. It's a lightweight sample store which sells albums online, demonstrating ASP.NET MVC 2's productivity features and data access via Entity Framework 4. When we get the MVC Music Store source code,we will found it's too simple to use and it's look is very bad. So I will use another MVC platform to upgrade the MVC Music Store to make it have a good looking and improving usability, security and make it customizable.

Background

The ASP.NET MVC Music Store is just a sample for MVC 2. We want to add the features below for it with a little code:

  • Create / Edit pages at runtime
  • Support widgets on pages
  • Support RSS & Atom in every page
  • Support themes and change themes anytime that make Music Store Application have good looks
  • Support content publishing features like wordpress
  • Support forums
  • File Management
  • Action Security Management
  • User Management
  • Role Management

At first, download MVC Music Store Application from Codeplex http://mvcmusicstore.codeplex.com/, then download / install the DotNetAge project in your VS.NET Extensions manager.

Combine Project Files

Create a new DotNetAge project:

DMS_Create_NewProject

Combine the ASP.NET MVC MUSIC STORE project files:

  1. Combine the Web.Config.
    • Copy the connection String config from Music Store to DNA web config file.
    • Copy the namespace settings in pages section.
  2. Copy the MvcMusicStore.mdf database file to App_Data folder of DotNetAge project.
  3. Copy all controller class files exclude AccountController.cs, HomeController.cs the DotNetAge already has these classes they are not used for DotNetAge.
  4. Update the AssemblyInfo.cs file. (Modify the version number in order to enable widget auto discovery.)

    DMS_AssemblyInfo

  5. Copy all views files excluding Account and Home folders to DotNetAge Views folder.

    DMS_ProjectFiles

Run and Setting the Project Data

After combining the project files, press “F5” run the application and use “administrator” (password:”administrator”) login the DotNetAge. Then select the “SiteTools – > Console” to open the web site settings.

  1. Set base information of website:

    DMS_CommonSettings

  2. Select the UI-lightness theme and set the site logo:

    DMS_SelectTHEME

  3. Combine the CSS text:

    DMS_SETCSS

Create Widgets

Now look back at the ASP.NET MVC Music Store application and find which Actions we need refactoring.

 Image 7

  • In many pages, we found the GenreMenu is used anywhere and many times. In fact, it’s a data driven navigation menu. In ASP.NET Music Store application, it is static and looks so bad! We can create a Widget for this menu and make it look nice and make it possible to be be placed in any page by administrator/creator without touching any code.
  • Then on the bottom of page there is an album list for promotion, we can place it in every page and control the album display count by settings in runtime.
GenreMenuWidget

GenreMenu is an Action that contains in StoreController.cs, we add the WidgetAttribute to this Action and specify the widget title ”GenreMenu”, and specify the Category tab “MusicStore” that this widget contains in.

DMS_GenreMenu

Done! We can find this Widget in WidgetExplorer in “MusicStore” tab.

TopSellingAlbumsWidget

Do you remember we are not copying the HomeController.cs to the DotNetAge? The HomeController has a private method named “GetTopSellingAlbums” in ASP.NET MusicStore project. This method has one parameter that allows the user to specify how many albums will be returned. But hard code in Index Action.

DMS_TOPSELLINGALBUMS_ORG_CODE

Copy the GetTopSellingAlbums and Index methods to StoreController of DNAMusicStore project and rename the Index Action Method to “TopSellingAlbums”. Add the WidgetAttribute on TopSellingAlbums Action just like what we do with GenreMenuWidget.

We wants the user to be able to set the return album count in runtime, so add the PropertyAttribute on Action to specify the Count as User Preferences, and add a parameter that has the same name with the User Preference (in runtime, the DotNetAge Widget Engine will auto match the User Preference value to this parameter).

DMS_TOPSELLINGALBUMS_WIDGET_CODE

We need a setting panel for User Preferences that allows user can set the display count in runtime. Right click on TopSellingAlbums and click “Add View”, then place the code like below:

DMS_TOPSELLINGALBUMS_VIEW

We use the WidgetViewUserControl instead of ViewUserControl, because the WidgetViewUserControl contains the Widget Instance data and other methods, properties that is all we need to control the widget in runtime.

Look at this code:

C#
Ajax.RenderAutoSettingForm(PropertyDescriptors,IDPrefix,IsDesignMode

It will be auto generating a setting form that use to set User Preferences which we specified in Widget Action.

At last, use the Html.StartupScripts to render the scripts for this Widget.

Press “F5” to run the project and login as administrator, then select “SiteTools->Design this page – >Add Content”

We will find that there is a new tab “MusicStore” added. In MusicStore tab contains two Widgets “GenreMenu”, ”TopSellingAlbums”. Click the icon, it will show a dialog that previews the widget.

DMS_Widgets_Preview

Now we add the widgets on the page and look what is different between DNAMusicStore and ASP.NET MusicStore.

DMS_HOME_Result

We can place the ImageWidget, Flash widget or any widgets we want on the home page,and you can move the GenreMenu on another place.

In this 5 minutes, we:

  1. Create the DNAMusicStore project by using DotNetAge project template.
  2. Copy and combine the necessary files from ASP.NET MVC MusicStore.
  3. Set the base information, theme and style of the Music Store web site.
  4. Create GenrMenuWidget and TopSellingAlbumsWidget.
  5. Add the Widgets and renew the home page of Music Store.

Extend the Actions

Now you maybe have a question : “How to add the “Store”,”Cart”,”Admin” page on the menu ?”, the links is hard code in Site.Master in ASP.NET MVC MusicStore project , we still need to modify the Site.Master?

The DotNetAge's main menu is dynamic, it will auto detect which pages can be shown on it, which user can see the menu item. The DotNetAge allows the developer to specify the Action to display on the main menu, SiteMapPath by using “SiteMapActionAttribute”.

We added the SiteMapActionAttribute to the ShoppingCartController.Index Action and StoreController.Index Action and see what would happen.

DMS_StoreCtrl_SiteMapAction_Code

DMS_CartCtrl_SiteMapAction_Code

Press “F5” to run the project and type the URL in your browser “http://[your host name]/store”,“http://[your host name]/shoppingcart” then you will see the DotNetAge create the “store”, ”cart” menu for you that links to their Action.

DMS_AutoMenu

Enabling Widgets on your Pages

We extended the page that could be shown in main menu, but they couldn’t support widgets yet, sometimes we want our static page to be customized in runtime by widgets. Go to StoreController.Browse Action and specify the SiteMapActionAttibute like this:

DMS_StoreCtrl_Browse_Code

By default, the DotNetAge will auto create web page for the action from different URI, so I just want the DotNetAge to create on page for “Browser” action, web set the “IsShared” property to true and ignore the query string field in the Action URI.

Go to Browse View and add this code in it.

DMS_BROWSE_ENABLING_WIDGETS

We just need to define the place which contains widgets and add to class=”ui-widget-zone” that the element(s) will be a widget container.

Add “Ajax.EnabledCustomization()” server code in the View file to tells DotNetAge this page could contain widgets.

When done, press F5 and go to “http://localhost:???/Browse?genre=Rock” , click “SiteTools->Design this page”.

DMS_BROWSE_ENABLING_WIDGETS_VIEW

Extend Security

MVC provides an easy way to limit the users or roles to access the Action(s), but this way has a defect that you must hard code the role name or user name! This is not the best practice for MVC. The developer should not know which role name or user name would be used in runtime that is set by administrators.

DotNetAge provides two ways to control the Security in runtime instead of hard code:

Page Accessible Roles

The DotNetAge WebPage has an accessible setting, we can use this feature to limit the user to access the page.

For example, we extend the StoreManagerController.Index Action with SiteMapActionAttribute at first,then enter the http://localhost:???/storemanager and click “SiteTools->Edit page”.

Just select the roles that can access the admin page.

DMS_PageSecurity

When the Accessible roles set the page only available for the specified roles, the other roles user could not see the menu even the type the URL in browser DotNetAge wil return “404 Page not found.”

Action Base Architecture

Another way to control the Action roles or users access permission in runtime is calls “ABA”, we can use the ABA to extend the StoreManagerController to show how to control the Actions permissions.

DMS_ABA_Code

We just use the SecurityActionAttribute on the Action and specify the permission title, description, and group name. Press “F5“ to run and select “SiteTools-> Console ” then select the “Security” tab.

The DotNetAge auto creates the PermissionSet for “MusicStore” that you specified. And you can assign the Action Permission to the role(s).

DMS_ABA_Asign

The administrator can assign the permission to any roles that she/he wants.

So that is all! We just use 30 minutes to update the ASP.NET MVC Music Store to DotNetAge that makes the MVC Music Store more powerful and more usable. Enjoy!

Resource Links

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Architect DotNetAge
China China
In 1999, I started programming using Delphi, VB, VJ.From 2002 I started with .NET using C#.Since 2005 when i had became an EIP product manager I was focus on EIP and CMS technique. In 2008 i established dotnetage.com and started to shared my ideas and projects online. I believe "No shared no grow"

www.dotnetage.com

Comments and Discussions

 
SuggestionIt is a good efford but there is much more well designed and useful online stores available like nopcommerce Pin
Lyubomir Rumenov Velchev7-Apr-14 1:14
Lyubomir Rumenov Velchev7-Apr-14 1:14 
QuestionVery elegant. Very nice. Very much appreciated. Pin
PhilMcGahan17-Dec-13 13:23
PhilMcGahan17-Dec-13 13:23 
GeneralThanks Pin
krvisa_pure9-Nov-13 7:02
krvisa_pure9-Nov-13 7:02 
Questiondna musicstore project " Register.aspx" Pin
soosop5-Oct-13 2:58
soosop5-Oct-13 2:58 
GeneralMy vote of 5 Pin
D V L24-Feb-13 0:11
professionalD V L24-Feb-13 0:11 
GeneralMy vote of 5 Pin
AbdullaMohammad16-Feb-13 4:15
AbdullaMohammad16-Feb-13 4:15 
QuestionI too believe "No shared no grow" Pin
P_A_122-Jun-12 0:57
P_A_122-Jun-12 0:57 
QuestionReally Good Pin
P_A_122-Jun-12 0:56
P_A_122-Jun-12 0:56 
GeneralMy vote of 5 Pin
Anurag Gandhi22-May-11 20:54
professionalAnurag Gandhi22-May-11 20:54 
GeneralYour server is down Pin
DavidAtDisplayData21-Jan-11 9:14
DavidAtDisplayData21-Jan-11 9:14 
GeneralRe: Your server is down Pin
Yaba Dab14-Feb-16 9:38
Yaba Dab14-Feb-16 9:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.