This post is part of a series on using client certificates in Windows Phone 7. I expect there to be 3 parts involved:

1. Setting Up IIS Express
2. Client Certificates on the Browser
3. Client Certificates on the Emulator
4. Client Certificates on the Phone

Setting Up IIS Express to Accept Client Certificates

First, lets tell IIS Express that we want to accept client certificates.  To do this, lets open up the IIS Express application host configuration file located at:

C:\Users\{Your User Name}\Documents\IISExpress\config\applicationhost.config

and as always, make a backup before modifying this file!  Make a notice of your site configuration located around line 161:

Go to about line 330 and change the enabled attribute of the iisClientCertificateMappingAuthentication element to enabled:

And if you go to around line 314, replace the access element to the following block:

You will see that there are 3 options in the above block.  For the sake of debugging, lets leave the first option, SslNegotiateCert, as the uncommented one.

Save the file, run your web application and you will now find that it asks you to select a client certificate.  In my case, working at Microsoft, I have lots:

Create a Client Certificate and Trust Chain

But, I don’t want to use a certificate from work, I want to create my own certificate.  To do that, we really need to create two certificates, a ‘localhost’ certificate to act as our client certificate, and a root certificate that we can place in our trusted root store. 

To do this, click Start and type ‘cmd’, right click on the ‘cmd.exe’ and select Run as Administrator.  Type “cd “\program files (x86)\Microsoft SDKs\Windows\v7.0A\bin” or wherever you may have a copy of makecert.exe installed.

First, lets create a new root certificate:

When you do this, you will be asked for a password to protect the private key.  You can choose none if you wish.  Now we need to use our new localhostCA certificate to issue a new client certificate:

Now, before we can use that certificate, we need to ‘trust’ our LocalhostCA certificate.  Type the following into our command prompt:

and click Install Certificate:

And select “Place all certificates in the following store” and select Browse…

Click the Show physical stores checkbox and select Trusted Root Certification Authorities and Local Computer.

And than OK, Next, and Finish.  You should be greeted by a friendly “The import was successful.” dialog.

Now, lets go back to our web application created in Part 1 and hit F5.

Boom, now select the “localhost” certificate and you should be good to go.

Using the Client Certificate

So, now that we have a client certificate, how do we use it?  In our web project, go to Views\Home\Index.cshtml and add the following:

F5 your application, select your client certificate and you should see something like the below:

Congratulations, in the next article, we will connect all this with a Windows Phone 7 project.

This post is part of a series on using client certificates in Windows Phone 7.  I expect there to be 3 parts involved:

1. Setting Up IIS Express
2. Client Certificates on the Browser
3. Client Certificates on the Emulator
4. Client Certificates on the Phone

Setting Up IIS Express

Create a new ASP.NET MVC 3 Web Application project

And select Internet Application with the default settings

Now to work with SSL, we need to use either IIS or IIS Express, and since I seem to make new applications every 15 minutes, I figure this is a good chance to get familiar with IIS Express.  The first step is to install IIS Express via the Web Platform Installer by following this link.  Once you are done clicking on a few accept/allow dialogs and clicking on the final Install button, wait for the install to finish and then restart Visual Studio 2010.

Right click on your web project and select “Use IIS Express”

and click Yes on the following dialog:

and note the address given at the next dialog:

Now to enable SSL, click on your project, pull up the Properties panel (F4) and set SSL Enabled to True.

And again, note the SSL URL which should be something like https://localhost:44300.  Lets set that as the default URL for our debugging.  Right click on the web project and select properties.  Go to the Web tab and update the Project Url under Use Local IIS Web server.

Now, you should be able to F5 your project.  A security validation error will come up, if you click on the scary looking “Continue to this website (not recommended)”, you should see your website come up normally.

Trusting Your Self Signed Certificate

So, now we are in the realm of security and certificates.  Lets start by telling our development machine to trust the SSL self-signed certificate that gets automatically created by IIS Express.  Click on Start, type ‘mmc’ and run the mmc.exe application.  Click File, and select Add/Remove Snap-In….  Double-click on Certificates and select Computer Account when the Certificates snap-in dialog pops up and click next.  On the next dialog, Local Computer should be selected and click Finish.

The resulting screen should look like this:

and after selecting OK, expand the Certificates (Local Computer) node on the left, and the Certificates node underneath that.  Find the localhost certificate issued by localhost.  Drag that certificate to the Trusted Root Certification Authorities node.  The result should look like this:

Now, lets go back to our web application and F5 our application again.  If everything went well, the web page should come right up without any errors and the address bar should no longer be a scary red:

Quick recap, where are we right now.  We have a web application, using SSL via IIS Express with a trusted self-signed certificate.  Let’s take this the next step, using self-signed client certificates.

So here is one of the issues I have with Interprise and ASP.Net Storefront:

The “Shopping Cart” header does not fit with the font, styling, color scheme, or really anything.  If I want to change it, I have to create a new graphic.  But not just one graphic, but 79 graphics:

So, what can we do about it?  Well here comes HTML + CSS to the rescue!

Changing your ASPX file

The default box for the Shopping Cart example above looks like this:

The asp:Image is where the Shopping Cart displays the blue boxes we wish to get rid of.  Lets add after that asp:Image control with the following:

and set the asp:Image control to have a Visible=”false” attribute like this:

and change the table beneath all that to have no style, but instead use the “boxBody” class, like this:

So the completed block looks like this:

One thing to note about the above, we could have deleted the asp:Image control, but made it invisible instead.  If we deleted that line, we would have to change the ShoppingCart.cs file to no longer look up the image and I am a bit too lazy for that.

Getting Some CSS Up In Here

So, now what?  Lets create some CSS that can make everything pretty:

What this does, is take our boxHeader.png image, which looks something like this:

or

What I like about the first image is that I can use the table.boxBody CSS style to blend in and get a nice unified look:

Pretty cool huh?

And Repeat

So, once you have the above done as a proof of concept, you need to start changing this all over the place.  Here is a list of files that need to updated to use my H3/Span method instead of the image.  ** Make sure you make backups of each file you edit! **

• ShoppingCart.aspx
• Account.aspx
• CreateAccount.aspx
• Xml_Packages\page.search.xml.config
• CheckOutShipping.aspx.cs (* see note)
• CheckOutPayment.aspx.cs (* see note)
• CheckOutReview.aspx.cs (* see note)
• [ I am sure I missed some ]

For the XML Packages, instead of changing the boxes, you can modify the BoxFrameStyle AppConfig, but I prefer to use a class instead so I can do a CSS only skin.

About CheckOut[blah].aspx.cs Files

Update the DisplayOrderSummary method like so:

Each file requires slight difference, but you should be able to figure them out.

No clue why they bake the graphic/skin into the code like that.  You can Modify the type, it exists in the InterpriseSuiteEcommerceCommon.InterpriseIntegration namespace, but there is a large amount of code in there. 

So, you want to make a good impression on your customers?  Take a critical look at your website and think, “does my front page look like I want it?”  Likely you make some compromises because your template requires it.  This is all about how to get past that limit and do more with your site!

(Picture still coming)

Allowing Special Default Template

In the 800 eCommerce module, under Setup –> Application Configuration, do a search for HomeTemplate.  Set the Config Value to ‘hometemplate.ascx’.

Before You Start

This modification requires the modification, Helpers for Adding Server Side Controls In Interprise 5.6.22

Creating a HomeTemplate

This is something that you can go crazy about, or go really simple.  The simple way, take your template.ascx file, make a copy, and rename it ‘hometemplate.ascx’.  Here are some common things you would want to do to this page:

• Remove any redundant menus.  Some sites have both a menu on the top and a menu on the left.  Consider removing one of them. 
• Refine your 'skin’ by hand to improve its layout.  This is the one page where you can safely do things on a by-pixel basis.
• Remove as much distracting content as possible, make it really easy for your visitors to find what the next step is.
• Start telling a ‘story’ that starts with your home page and ends with your customers placing an order.

Once you get your HomeTemplate clean of clutter, we need to remove the ‘automatic’ content from it.  Look for these lines:

Delete them. 

Promotional Image Rotator

So, now what can we do here?  Let’s create an awesome image rotator!  Now, I use Telerik controls myself, but I am sure a quick Google search can help you find something free if that’s more your style.  I tend to be willing to pay for a product that is supported by such an awesome company.

To use some DataBound controls that use the “System.Web.UI.DataboundLiteralControl”, we have to make a very minor change to the default App_Code\SkinBase.cs file.  Find the ProcessControl method and replace it with this one:

The only difference is that we ignore DataBound types (or at least the one that causes errors).  Now that the boring stuff is out of the way.  Lets add the control to our hometemplate.ascx:

And add the following to the SetupControlsRequiringScriptManager in App_Code\SkinBase.cs (added in the Begin You Begin step) right after the comment:

Getting Data Into Your Rotator

The RadRotator control’s data loading is handled by the asp:XmlDataSource control.  As pasted above, the application will load a file located at /images/ttx/Promo.xml, you can change this path to something that makes sense for you, but here is the file format you should use:

For each image/add you want to use, create a new PromoItem with the elements/attributes shown.  Remember to use alt tags on your images.  It is better for your search results AND in some cases, it is the law.

For the Link Url, you can create topics, one for each promotion.  You could also just link to a product, category, manufacturer, or whatever you want.

Now, if you run your site, you will notice you have an awesome rotating promotion in your site!

Loading Promo Data From a Topic

But wait, there’s more!  How about using a topic instead of an XML file you say?  Easy.  Change the asp:XmlDataSource to look like this:"

And then add a topic to your website that looks something like this:

(Click to enlarge)

More in the upcoming Part 2!

If you are trying to integrate an ASP.NET server side control, especially one that requires use of a ScriptManager, you will find that the lack of a server side form element can put an end to your ambition.  Getting around this is not that hard, here are the steps.

Changes to SkinBase

Add the following methods to your App_Code\SkinBase.cs file:

And then add the SetupControlsRequiringScriptManager(); to your OnPreRender method:

Using The Result

Now, in your template.ascx, you can take your server side control and give it an ID, for example:

And add the following line to the SetupControlsRequiringScriptManager method right under the example comment:

and you are done!

How Does It Work

This method works the same way as the ASP.NET Menu control workaround that is built into App_Code\SkinBase.cs, it creates a placeholder for the control and places the control into the HtmlForm, and tells it to not display (via the CSS display tag). Then, when the page is loaded into a browser, a script takes the control and puts it into the placeholder and sets its to display. 

** Warning ** Webkit browsers, such as Chrome and Safari, do not handle the visibility changes of div elements the same as other browsers.  If you are having trouble getting your controls to display in Webkit browsers when everything else is working fine, contact your control vendor for a workaround. 

So, lets take a look at the Interprise search page.  You know, the one that looks something like this:

Don’t get me wrong, It functions, and I find that I use this screen all the time over the course of my work day, but I just wish it could answer some questions for me, such as these:

• How much does this product cost again?
• What do I have in stock right now?
• What was the name of that discontinued product again?

Template Changes

So, first, we need to make one change to our template to support this.  Don’t fret, it is really easy:

Put the above line to your skin’s template.ascx’s head section.  If you don’t know jQuery yet, it is the #1 tool needed to make your site pop.  It does not do it for free, but between XmlPackages, SQL, and jQuery, there is almost nothing you can’t do. 

Including Discontinued Products In Search Results

Ok, this one is really easy!  Create the following SQL Stored Procedure which is just slightly modified from the default aspdnsf_WebSearchInventory procedure:

Now open your XmlPackages\page.search.xml.config and change the following block:

to this

and you should be ready to go.  Note, you can add a ‘ShowDiscontinued=0’ or ‘ShowDiscontinued=1’ to show or hide discontinued products. 

Labeling Out of Stock or Discontinued Products

So now that we added discontinued products, we can’t tell quickly what is discontinued or not.  And while we are at it, why not fix the same issue for stock problems.  Let’s throw in some price displays while we are at it.

These are all simple changes to the XmlPackages\page.search.xml.config.  Around line 158, we need to add two columns to our Product Results header row:

And now, in your product template (starting at line ~202), right after the inner-most <tr> element of the product table, add the following:

add then following columns; a Notes column before the product name column:

And the price column after the product name column:

Now you have the price and pretty notes for the stock status:

One Word: Checkboxes!!!

Now that we have all that done, we can use some simple jQuery magic to add some checkboxes that hide discontinued and/or out of stock items!

As part of this, we can refactor the search text to a format that is easier to extend (table system that breaks everything out) and makes it easily to match visuals with all our users’ browsers.  Replace the the Form element located around Line 76 of XmlPackages\page.search.xml.config with the following:

which gives us some checkboxes, but now we have to wire them up.  Put this script with your <xsl:template match=”/”>

Now, save everything and if you did it right (I know my instructions are not the easiest out there), you have some awesome stuff:

And if you uncheck the “Show Out of Stock” checkbox, all my products go away!

Pretty cool for an hour’s effort huh?  Maybe my next post will be table sorting…

Some of the products we list have 18-24 permeations and we want to show customers how many we might have in stock currently.  Luckily with XmlPackages, this is easy to do.

First, let’s look at the result:

Setting Up the Database

The first step to our result is to get the current stock information into our XmlPackage via a Query.  There are two way to do this, rowsets and XML.  A rowset is the common ‘table’ of information of from the database.  This is how most other packages work.  When looking for help on using XML result sets for Interprise, I doubt there are any existing samples, so I figured I might as well be first. 

** Warning ** This method is complex and may not be the “best” method, but it is the one I went with.

First, how do we get SQL to produce well structured XML data.  Well, if you are rocking SQL Server 2005 or latter and understand the T-SQL syntax, this is simple with the ‘FOR XML’ keywords.  Here is my stored procedure for matrix items using up to 3 attributes (Sorry for the scroll bars, but it is crazy long):

And the output is a single row with a single column that looks like the following:

Updating our XmlPackage

Now, how do we use that block of xml in our XmlPackages?  Well first, I will be modifying XmlPackages\product.matrixproduct.xml.config. 

Make sure you backup your XmlPackages before changing them!  You have been warned. 

First, lets add our Query to the Package element right before our PackageTransform element:

What this does is call our stored procedure passing in the ItemCode.  Make special note of the retType attribute, this is what tells the XmlPackage to view the result set as XML.

Now to use that XML data, here is a xsl:template showing how to do two common outputs, a list and a table.  The XSL is hardcoded to use 3 attributes, but you can easily modify it to use any number of attributes instead.  If anyone can find a better way to ‘layout’ the table without using 10 xsl:for-each elements, please let me know. 

And finally, lets call that template in our product.  I put my right after the description (Line ~130) like so:

So, that was not too hard, and I hope this gives everyone the courage to start doing awesome stuff with their XmlPackages.  There is an endless supply of data out there and you can access it all!

The default method to handing the asp:Menu is to have a single RootNode (default is ‘Home’) and use hover-over menus to drill down.  In my case, I wanted to have a row of items going across the top of my webpage like so:

instead of the default layout that looks like this:

Understanding App_Code\ISESiteMapProvider.cs

So, software such as Interprise is special.  It can’t just use a normal SiteMap stuck in a file somewhere.  They need to be dynamic.  The Categories and Manufacturers are obvious, but what about showing something like the nearest store?  Or how about if you are a “Woot” style company and want to have a “Quantity Remaining: 481” link on your menu?  To allow all this functionality, Interprise turned to XmlPackages. 

XmlPackages, and how they work, are outside the scope of this post, but they allow you to take a group of data sources (Query strings, SQL Servers, RSS Feeds, Locale information, etc.) and combine them using XML/XSLT to render content (usually HTML or XML). 

Interprise uses a two step system for its SiteMap.  First the SkinBase gets the contents of XmlPackages\page.menu.xml.config via App_Code\ISESiteMapFactory.cs.  Then it takes that information, localizes some strings (everything with the (!menu.YourAccount!) style syntax) via your string tables, and finally it pulls all your categories, section, and/or manufacturers.  This is all done with magic in App_Code\ISESiteMapProvider.cs.

Now, to reach our goal, you would be thinking that all we need to do is change the starting node used in ISESiteMapProvider, but doing so creates an invalid sitemap (more on this in a bit).  So, we leave this alone for now…

Setting Up the New SiteMap

First thing we need to do is edit the default SiteMap to move ‘Home’ alongside the other categories and create a new empty RootNode.  We need a RootNode because Microsoft’s standard requires one, and only one, RootNode.  While I have linked to the docs, it is good to point out that Urls must be unique, you cannot have two links pointing to the same page in a single SiteMap.

As I mentioned above, the required file is located at XmlPackages\page.menu.xml.config.  Here is an example after moving Home to be along the rest of my nodes and adding a new RootNode to be ignored:

Changing App_Code\SkinBase.cs

Now that we have our new and improve SiteMap, we need to tell our SkinBase class to handle the SiteMapNode information explicitly instead of relying on data binding.  Again, this is required because even if we wanted to replace the ISESiteMapProvider, we still would be stuck with a single root node.

Edit the SetupTelerikMenu() method inside App_Code\SkinBase.cs replacing the commented lines with this block:

If you are trying to use the asp:Menu control instead of the Telerik control you would want to edit SetupMenu() instead.

Now we just have to add the SetupRadMenu method and its related code.  Again, if you are using the asp:Menu instead, just change instances of RadMenu to System.Web.UI.WebControls.Menu.  Add these methods to your App_Code\SkinBase.cs:

and that’s it for SkinBase.  Notice that I left the ability to revert back to a single root node just by uncommenting a section of SetupRadMenu and commenting out the other.

Skin Template.ascx

And just for completeness, here is what your Templace.ascx might look like.  Again, I am using a Telerik menu instead of the ASP.NET Menu, but you get the idea I am sure:

Notice that there is nothing ‘special’ here, everything is handled in SkinBase.

Next Steps

If you are following my series here, you will notice that we have a Telerik menu, and now we have complete control over what we are displaying on it, while still using the dynamic items from the ISESiteMapProvider.cs.  But where can we take this?  Here is my next step:

But that will have to wait until I get a bit more time to write everything down.  But trust me, it might be awesome.

Setup

This example is assuming Interprise 5.6.22 and Telerik.Web.UI version 2011.2.712, but any recent Telerik version should work fine.

Add the following DLLs to the \bin directory.  You can locate them in your \Program Files directory.

• Telerik.Web.Design.dll (not needed for most people, but might as well put it there)
• Telerik.Web.UI.dll
• Telerik.Web.UI.Skins.dll (not needed if you don’t want to use any embedded skins)
• Telerik.Web.UI.XML

Customize App_Code\SkinBase.cs

Edit your App_Code\SkinBase.cs file, but make sure you make a backup.  It is really easy to kill your site.  Also note that if you start changing this file on a live site, you can cause errors for customers who happen to be using the site at the time. 

Add the following code to the “Find Menu” region (around Line 592)

Add the following code to the “SetupMenu” region (around line 432)

Change the OnPreRender method (around 396) from SetupMenu() To SetupTelerikMenu().  If you ever wish to undo these changes, this is really the only line that you need to change back.

Changing Your Template

In your template.ascx for your skin (\Skins\Skin_1 is the default), add the following with the other Registers at the top (line 3 or 4 usually):

Replace everything in the “horizNav” div with the following:

If you want to use a default Telerik skin, replace TTX with the name of the skin you want to use and change EnableEmbeddedSkins to true.

For a custom skin, replace ‘TTX’ with the name of your custom CSS skin for the menu and add the required CSS entries such as:

And you should be done.  All-in-all, it will take you longer to get your CSS file right than it will to do the ‘hard stuff’