Today’s Task:

Add some Silverlight content to an existing Asp.Net MVC project. The MVC project contains the standard CRUD for the application, while the Silverlight is meant to provide rich visualization of the data.

Prerequisites:

• VS 2010
• An existing Asp.Net MVC 2.0 project
• Expression Blend 4.0 (installs Silverlight 4 and Silverlight 4 SDK)
• Silverlight 4.0 tools for Visual Studio 2010

Creating the Project:

As stated in the opening and prerequisites, I am starting with an existing Asp.Net MVC application. You should have Blend 4 installed, and have also installed the Silverlight 4 tools for Visual Studio.

1) Right click on your web project and choose add new item (ctrl+shift+a). From the add new Item window, click on Silverlight under Installed Templates and then select the Silverlight Application. Name your Silverlight application appropriately. In my example, I have named my project DataVisualization. Click Add

2) The next screen that comes up is the “Add Silverlight Application” screen. I accepted the defaults with the follow exception, I changed the location from being a sub folder of my MVC application to one level higher. The destination folder, ClientBin is still created in your MVC application. Make sure that you select Silverlight 4 for the version. Finally click Add.

3) You should now have the following in your solution.

• Your existing Asp.Net MVC application
• A new Silverlight 4 application named DataVisualization
• A DataVisualizationTestPage.aspx in your MVC application
• A DataVisualizationTestPage.html in your MVC application
• A Silverlight.js in your MVC application

We will eventually remove the test pages, but for now we will leave them so that they can serve their intended purpose.

4) Build the solution. You should see a DataVisualization.xap added to the ClientBin folder in your MVC application.

5) Right click on DataVisualization.html and choose view in browser. You should see an empty page in the browser, but get no errors. Right clicking anywhere in the browser window should bring up the Silverlight context menu.

Integrate the Silverlight Application

In this stage, we are going to make our new Silverlight application appear like it’s part of the rest of our MVC application. Right now if you browse to it, it doesn’t look like its part of anything. We also want to be able to allow our users to navigate thru our web application so we need our existing menu to show up.

1) Either create a new controller/view or re-use an existing controller/view in your MVC application to house your Silverlight application. I’m going to reuse an existing controller called Dashboard, which has one view, Index.

2) Open up your view, and the DataVisualizationTestPage.aspx file. We need to move some stuff over to our view so it displays our Silverlight application. I have some pre existing styling and layout defined, so my view is going to look differently from yours. I also store my java script files in a specific location, so I will be moving the included silverlight.js as well. The screen shot below shows what I am starting with in the view for reference.

3) If you don’t have any existing standard for your JavaScript, you can place the two script tags from the test page somewhere before the reference to the Silverlight object. For example, place the two script tags just below the second content place holder. Next, copy the form tag inclusive and paste it into your view. For me, I pasted it into my div tag that I have setup to control my formatting. In the screen shots below you can see my view, and resulting web page. We still have an empty Silverlight control, but now it looks like its actually part of our website.

4) Remove the DataVisualizationTest.aspx page, but keep the HTML page as we will need it in the next section.

Working with Blend

The final step is to begin adding content to our Silverlight application. For this we are going to switch to Blend to make sure that we are able to work in both tools.

1) Start up Blend and choose to open an existing project. Browse to the location of your DataVisualization project (folder that contains DataVisualization.csproj) and open it. You should see the content of your project listed on the left under the project tab (assuming default Blend layout) and the empty MainPage.xaml in the middle. Notice that we have a solution called DataVisualization, and that I did not open up my existing MVC application solution.

2) Go to Project in the tool bar, and click Run Project (or press F5). You will see that our empty MainPage is shown using the DataVisualizationTest.html page, and that we are using the local Asp.Net development server. This is good enough for me. I’m hoping that with this setup I can work independently of my MVC application, and more importantly, a designer would be able to work independently as well. When deploying my application to production, I can remove the DataVisualizationTest.html page.

3) TFS Integration – At this point I can’t figure out how to get Blend to work with TFS. It’s possible since I downloaded the trial version that it does not include TFS support, or I need to install Team Explorer on top of Blend. For now I can use the Explorer add-in to get by.

Conclusion

At this point we have a functioning Silverlight application, integrated with an existing Asp.Net MVC application. We are able to work independently of the web application in Blend and vice-versa. This is my first attempt at this type of solution, so I will post a follow-up in the future to report back how well it worked, and if I needed to make any changes.

With the release of the VS2010 Release Candidate, I went about uninstalling VS2010 beta 2 and ran into an issue. I started out by going to Add/Remove programs to uninstall VS2010 Ultimate Beta 2, but during the uninstall process, it hung at the point of running VSTestConfig_UnInstall_def. At the same time, my network adapter was set to disabled, and could not be enabled. I ended up having to do a hard reset on the machine. Upon reboot, the entry for Visual Studio was not in Add/Remove programs, however, running the setup off the Beta 2 ISO allowed me to pick up where I left off.

The VS2010 RC Readme contains instructions for uninstalling the RC, and a link to the VS 2010 B2 readme for the uninstall instructions for that version. So after uninstalling VS 2010 Ultimate, I uninstalled the remaining components in the following order:

1. Visual Studio 2010 Tools for Office Runtime Beta 2
2. The .NET Framework version 4 Language Pack
   1. This was not present on my computer but included in the uninstall instructions
3. The .NET Framework version 4 Extended
   1. This removed 2 “.Net Framework 4” items from the list
   2. I was prompted to reboot and did so
4. The .NET Framework version 4 Client
   1. I was prompted to reboot and did so

At this point, I felt that I had uninstalled everything I needed to, so I proceeded to mount the RC .iso and proceed with the installation. It looks like we’ll be getting the premium edition at work when it RTM’s, so I went with that edition for the Release Candidate. I figured there is no sense in playing around with features that I won’t have in a couple of months. 

After a quick reboot during the install (happens after .Net 4 is installed), the rest of the installation went flawlessly. I fired up Visual Studio, and it did open noticeably faster for my small solution. My TDD.Net plugin for XUnit was still fully functional which I was not expecting. All unit tests passed for my Windows Service application I’ve been working on.

On the web side of things, just about everything is working, and all tests pass on my Asp.Net MVC application. The one exception is the client side Asp.Net MVC validation on my logon page. The other pages that have the client side validation work fine. I’ve tried updating the .js files from a newly created MVC project, as well as trying the Microsoft Ajax script files instead of the JQuery files. At this point I’m not going to waste any more time on it.

Next up, TFS 2010 RC install.

Scenario

Locally developed Asp.Net MVC 2 application which needs to be deployed to a remote web server. The web server, running IIS 7.5 is hosted by a 3rd party, but we have full administrative access (Virtual Machine). In order to meet our deployment needs, we will install and configure MSDeploy. MSDeploy is a new add-on for IIS 6 and above which enables the package and installation of web applications, and optionally remote deployment and administration. You can also use it to synchronize settings between web servers, for example in a Web Farm. It is the remote deployment that we are most interested in, which is built upon the packaging and installation piece. For this post I will be assuming a deployment source of Visual Studio 2010 Beta 2. MSDeploy ships with an API which can be used to do the deployment from say a build task on a Build Server (stay tuned for a follow-up post on that).

Installation

First you need to download MSDeploy to your remote web server and install it. Here is the direct link for the 64 bit version of MSDeploy. Other version can be downloaded from the MSDeploy website. Once downloaded, run the MSI installer and select the custom option. You need to select the IIS 6 Deployment Hanlder to get the remote deployment feature. I also select the UI Module and Management Service Delegation UI (See screen shot below). After selecting the desire components, hit next, then install.

Configuration Overview

If you had IIS Manager open during the installation, you will need to restart it. Once restarted, you can right click on the Default Web Site and you should see a deploy option listed.

Next we will be configuring some accounts and permissions for our remote deployment, following the instructions provided by Microsoft, which can be viewed in their entirety here. Following these rules we will be able to create a specific account for our application which limits our external exposure. I’m happy to see we can use the new IIS Users/Management feature instead of having to create a local or domain windows account. Here is an overview of the steps we will be doing:

1. Create an IIS Manager user account for the customer.

2. Give the WMSvc account access to the customer’s directory.

3. Configure delegation for the customer.

4. Add delegation rules for the customer.

5. Restart the Web Management Service.

6. Test the Web Deployment Handler.

Step 1 – Create an IIS Manager User

In IIS manager, select the root server level (this is usually named after the name of the computer IIS is running on, it’s the node just below Start Page). Once selected scroll down in the middle pane to the Management section and select IIS Manager Users.

• Double click on IIS Manger Users
• Click Add User from the actions list on the far right side
• Enter a username, and a strong password
• Click OK

I used the naming convention, [AppName]User, and a randomly generated password from KeePass. Once created you get additional options for managing the user, like Change Password, and Disable.

Step 2 – Grant the WMSvc account access to our directory

The Service name (as shown in the Services MMC) is Web Management Service, and is not started by default. Using the Services MMC, start the Web Management Service and set it’s start-up type to Automatic, or Automatic-Delayed.

Note the user account that the service is running under. By default it runs as Local Service. You will need to Grant the Local Service account full permissions to the targeted deployment directory. Since I’d like to look into running the Web Management Service as a lower privileged account in the future, I took the extra steps to create a local user group called MSDeplyUsers, added Local Service to it, and granted permissions to the group. This will allow me to more easily switch accounts in the future.

Before proceeding, you may need to make an additional change to your IIS server configuration. By default, the Management Service is not configured to accept remote connections. While the Web Management Service is stopped, in IIS Manager, click your top level server node on the left, and then select Management Service under Management in the center pane.

Check the box for Enable remote connections, and select a SSL certificate. I’m using a self signed SSL cert for now. I also added IP restrictions to restrict remote deployments from my office only. You can use www.whatismyip.com to determine you IP, but unless you have a static IP, you may have to come back and change this often. You will also need to add the port specified to your allow section in your firewall rules.

Step 3 – Configure Delegation

In order for our user account we created in Step 1 to have access to their folder, we need to grant permissions on the folder (or site). You can only set folder level permissions if the folder is setup as an Application.

Once you have selected the level (using the navigation tree on the left) at which to grant permissions, you can select the IIS Manger Permissions option in the central pane.

• Click on IIS Manger Permissions
• Click on Allow User on the far right pane
• Select IIS User and then select the user you created in Step 1

Step 4 – Add delegation rules

We now need to grant some specific rights to our user so they can deploy. This is done using the Management tools at the server level.

• Double click on Management Service Delegation
• Click on Add rule on the actions pane
• Select the Deploy Content Only Template (I, as an administrator will handle the configuration of the application directory and advanced configuration).
• Accept all default
  • Providers: contentPath
  • Actions: *
  • Path Type: Path Prefix
  • Path: {userScope}
  • Run As: Current User
• When you click OK, you will be asked to provide the name of a user to add to the rule. This is where you specify your user you created in Step 1.

The steps for IIS 7.5 may differ from IIS 7.

Step 6 – Restart Web Management Service

Pretty self explanatory, using the Services restart, or start the Web Management Service.

Step 7 – Test

In visual study, you need to publish your web application to your newly configured remote server. Right click on your web project and choose Publish. In the screen that comes up, select MSDeploy Publish as your Publish Method and fill in the settings to match what we did in Steps 1 – 6.

Assuming everything is setup correctly, you should be able to publish you application to your remote server. Based on the rules we setup in Step 4, this will only publish content. It will not deploy database scripts, or create the application for you (mark the folder as an application). You can follow the more detailed instructions to set this up, but I wanted to keep this simple for now.

Trouble Shooting

Nothing ever works right on the first time does it? It took me a couple of tries (by couple I mean hundreds) to get all the configuration setup on the client and server. Here are some of the errors I got and what I did to fix them:

Connection Timeout

Could not complete the request to remote agent URL 'https://Server:8172/msdeploy.axd?site=<site>'.
Unable to connect to the remote server
A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond <Server>:8172

If you get connection timeouts, make sure you can browse to the Service URL entered above in the publish web screen. If you can’t, you hosting provider may be blocking port 8172. You should at least get prompted for credentials when using a Web Browser. If using a self signed cert, you will also get a certificate warning in the browser. Finally, you should see you attempt in the Log Files for the Management Service. The default path for the log files is: %SystemDrive%\Inetpub\logs\WMSvc

Error 400 Bad Request

Remote agent (URL https://Server:8172/MsDeploy.axd:8172/msdeploy.axd?site=<site>) could not be contacted.  Make sure the remote agent service is installed and started on the target computer.
An unsupported response was received. The response header 'MSDeploy.Response' was '' but 'v1' was expected.
The remote server returned an error: (400) Bad Request.

This one was driving me nuts, and the fix/cause is absolutely ridiculous. Notice the two /MsDeploy.axd, one pascal cased, and the other all lower case. Now take a look at the following screen shot and compare have I have in the ServiceUrl and the example service URL provided in the same dialog.

Looks like it should work right? Nope, doesn’t work. What fixed it, changing it so that the /MsDeploy was all lower case as in https://Server:8172/msdeploy.axd. This got rid of the first MsDeploy.axd.

Error 401  

Remote agent (URL https://Server:8172/msdeploy.axd?site=Default Web Site) could not be contacted.  Make sure the remote agent service is installed and started on the target computer.
An unsupported response was received. The response header 'MSDeploy.Response' was '' but 'v1' was expected.
The remote server returned an error: (401) Unauthorized.

The first question I had was, is the site “Default Web Site” correct? I was worried about the spaces in the name, but after reviewing the log files, the correct escape characters for a space where present. The full result code was a 401.2. I saw that my user account I created in Step 1 was being passed thru, and assumed that it had something to do with that.

I changed my credentials to an Windows Administrative account and gave that a go, and it worked. This means the service itself works, but either my authentication or authorization for the IIS user account is incorrect. If you are having problems with an administrative account, you need to make sure that you have the option enabled for Administrators to bypass rules. This is under Management Service Delegate, Edit Features. If you change this setting, you need to restart the Management Service.

When I had the Allow Administrators to bypass rules box unchecked, I got a different error message, one that said I was unauthorized to perform an action, not a 401. This led me to believe that my IIS User was suffering from an Authentication issue, not authorization.

Since the IIS Users are for management, I decided to try connecting to my Application using the IIS Management tool. Running this as a non-administrator you presented with a “empty” view. Right clicking on clicking on Start Page allows you to Connect to a Server, Web Site or Application. Selecting Application, and entering my credentials left me with a 401 Unauthorized error, confirming my belief that its a problem with the IIS User and not MSDeploy.

After playing around with the IIS settings, the IIS User account started working when connecting via IIS Manager, but not via VS. I do not believe I changed anything (without changing it back) to explain why it started working in IIS manager. The result codes when it was failing was the same 401.2 as I was getting when connecting via IIS.

For now I have to leave this as an open issue, and maybe try again on a local server.

UPDATE:

I got it working more or less. Check out the comments for what I had to do.

This post is part of my PDC09 Conference Notes series. These are my raw notes taken while watching the various session videos from PDC09. Refer to my original post for some conventions I tried to use.

• 4 Scenarios:
  • It Works on My Machine
  • Choose the right tests
  • Solve Complex Debugging Tasks
  • Multi-Tier Performance Analysis

• Hard to Reproduce Bugs (It works on my machine/I can't reproduce it)
  • Solved by a new feature, IntelliTrace
  • Used to be solved by adding Debug statements
  • IntelliTrace adds Record, Playback and Rewind
  • Demo shows a nightly build that failed
    • Click thru the build report to view the IntelliTrace log file
    • Shows Threads, test data, system info, loaded modules
    • Double click on call stack for the exception (test failure) line where error occurred and takes you to the exact line in the source code.
    • Step forwards and backwards in playback to view what was going on (variable state, etc)
    • Filter which events you want to see (Asp.Net, ADO.Net, Registy, etc)
  • You can now see the return value of methods!
  • Records the exact execution path thru branches eliminating guess work.
  • No need to add anything to your code
  • Various levels of recording. The more you record, the higher the performance impact. No mention was made of how much of a performance hit, although the default settings are not supposed to impact it much.
  • Works with Asp.Net as well. Tracks events like gets and posts, allows you to jump into code at that point in time
  • How does it Work?
    • IntelliTrace record starts, loads CollectionPlan.xml and starts recording
    • IntelliTrace does not allow you to change what happens in your code since it's a recording. You can't change a variable for example
  • Settings
    • IntelliTrace is set in Tools/Options/Intellitrace.
    • Maximum amount of disk space for recording
    • Where are they stored? C:\ProgramData\Microsoft Visual Studio\10.0\TraceDebugging\
  • What do you need to get IntelliTrace on a PC?
    • Install visual studio
    • Install Test and Lab Manager
    • Install Test Agent

IntelliTrace Options Window

• Test Impact Analysis (Choosing the right tests to run)
  • Automatically pinpoint which tests are impacted as a result of a code change, including manual tests, although I'm not sure how it works
  • TIA, as far as I can tell will only run with tests written in MS Test.
  • If it can work with Manual tests, I see some advantage with that, but not running all of your automated tests just seems bad. It seems like they may be fixing a symptom (slow running tests) instead of the problem (poorly written tests)
  • Working from the Nightly Build point of view
    • You can see impacted tests
    • You can drill thru the impacted tests to see what changes caused the tests to be impacted.

• Multi-Tier Performance Analysis
  • Scenario: Client Side script in the browser, business logic, database calls
  • To start, goto Debug and click Start Profile Analysis
    • Select Profile Type
    • Select Project, Executable or Asp.net/java script application
    • Enable Tier Interaction Profiling
  • My Demo (I tried this out locally while watching the video)
    • Ran a Asp.Net MVC project
    • I run everything as a normal user, not an admin. However, you need to be an admin, but VS prompts your for credentials and it just works.
    • You start out in summary view, but there is a drop down at the top (Current View) that gives you access to stuff like Tier Interactions.
    • Tier Interactions showed my database calls, the sql executed and how long they took
    • It takes a little longer for it to get started, so there is a still a place in my book for using SQL query analyzer while developing, but for end to end debugging of slow pages, this is awesome.
  • Report Shows
    • Most expensive code paths
    • Lets you look at "all code" which will include the base class library and loaded modules
    • Jump between various report views by right clicking
    • Jump to code

• Collaborative Debugging (Solve Complex Problems)
  • While debugging, pin the value of a variable to the editor window (right click while hovering)
  • You can add comments to those pinned values
  • You can export a break points and data tips as XML which you can then e-mail or what ever
  • After you import the break point and data tips, run the app in debug mode
    • Application will stop on the break point
    • The value and comments will be displayed as exported/imported

• Debug a Crash in a Deployed Application using Dump Files
  • When application crashes, open up task manager, find the task, right click and chose create dump file.
  • No need to have anything installed to create the dump file
  • Open dump file in visual studio, and you can debug it.
    • Shows stuff about the computer it was running on
    • Modules Loaded
    • OS
  • Press ctrl+alt+q to get to QuickWatch, and type in $expression, and you'll get info on the exception that caused the crash.
  • My Test/Demo
    • Create new Widnows forms app with a button. When clicking the button throw new exception.
    • Close VS, and run compiled application. Click on the button. The unhandled exception dialog will appear. At this point, go into task manager, find the process, right click and choose create dump file.
    • Dump file was created in: C:\Users\USERNAME\AppData\Local\Temp\APPLCIATIONNAME.DMP
    • Quit the application and go find the dump file and double click on it, VS will launch.
    • You get the basic information, native debugging (machine code), but no managed debugging.
    • It looks like you have to download the symbols from Microsoft, and possible set a path for the debug symbols for your application, but I wasn’t able to get it to work when I tried it. I will re-post if I get it to work.

This post is part of my PDC09 Conference Notes series. These are my raw notes taken while watching the various session videos from PDC09. Refer to my original post for some conventions I tried to use.

FT60 - A Lap around Visual Studio and TFS 2010

• Planning
  • Excel workbook for planning Iteration (for a specific Area?)
  • Calculates # of working days based on Start and End Date
  • Supports holidays and other non-working days by using the Interruptions sheet
  • Capacity Planning graphs
  • Looks like working in Excel is a much better (almost preferred) experience in 2010.
  • Reports (at least the capacity report) was updated right away, no waiting for warehouse to refresh.

• Hierarchical Work Items
  • As the name implies, you can setup hierarchies with your work items (kick ass!)
  • Query support for hierarchical work items, allows you to define a query for the top level item, and a second query for the child work items (I have to think that this feature was added as a direct result of MS dog fooding TFS).

• Develop in Parallel
  • Branch visualization
    • Branches now show up as a "special" folder in Source Control viewer
    • View Hierarchy (Right click on branch) allows you to view the branches and their relationships in a graphical view. You can add a description for the branch
    • Drag and Drop merges
  • Change tracing
    • Combine branch visualization with change sets, you can see which branches were affected by a given change set. Arrows show stuff like merge directions.
  • Actionable History

• Continuous Integration
  • Gated Check-in
    • Verify code via a shelved check in set before something gets actually checked in.
    • Seems somewhat redundant with proper branches for development, but I guess it's another way to solve the problem. Although I think that you should be running most of the tests locally before even trying to check in.
  • Architecture Diagrams
    • Map actually code assemblies (projects) to a block diagram.
    • Blocks are for things like Web Layer, Business Layer, Data Layer etc.
    • You can setup dependencies between the blocks, like Web Layer depends on Business Layer.
    • You can verify that code does not break the dependencies you have outlined in the block diagram (i.e. don't have a business component that references the web component).
  • Visual Work Flow (WF) designer for builds looks a lot better then editing XML, but we all know that Microsoft rarely demos stuff that has been tested in the real world.
  • Build Reports are improved, more information with direct links to the information in TFS that you need to get more details. Hopefully less digging around the build output folder.
  • New SysTray app that notifies you about build events

• Project Visibility and Health
  • Nice graphs in MOSS. Do they work in WSS?
    • Burndown
    • User Stories vs. Tasks
  • Graphs build on Web Parts so you can customize the page layout. Also change parameters passed to reports.

• Manageability
  • TFS Basic Install
  • New Admin Console written WPF. Looks like MMC.
    • Ports, URL's, etc
    • One click change TFS account password
    • View logs