Announcing HTML5 & CSS3 support for Visual Studio 2010 SP1

Since the last few months it feels like web standards are moving at pace that we would really like them to move. Every browser is pushing the envelope ahead including our very own IE9. For the first time it feels like web is getting the extra freedom of expression that it deserves and we want to contribute to that. ASP.NET developers have been asking for HTML5 & CSS3 support all the time and today we are super excited to announce the public availability of Visual Studio Web Standards Update which brings a ton of HTML5 & CSS3 support to Visual Studio 2010 SP1. VS Web Standards Update is a free extension available for anyone who is using Visual Studio 2010 SP1 and it provides HTML5 & CSS3 support based on current W3C specifications.

HTML5 VS Web Standards Update provides you intellisense and validation for most common HTML 5 features like: · Video & related tags · Audio & related tag · New input types like email, url, date etc · Drag & Drop support · Accessibility standard WAI-ARIA · Microdata · Schema.org & more SEO friendly goodness · Browser APIs · Geo-Location - Having location aware websites is growing trend and now you will have full intellisense and validation within Visual Studio for creating websites which are location aware. For sample view the source for the IE9 test drive demo. · Local Storage – IE has been supporting local storage from IE8 onwards, now Visual Studio will provide you with full fidelity intellisense to create sites which can save state within browser. For sample of try view source on HTML5 Demo Site CSS3 This update supports intellisense and validation for most of the CSS3 modules including: · 2D Transforms · 3D Transforms · Animations · Background & Borders · Basic Box Model · Basic UI · Behavior · Color · Flexible Box Layout · Fonts · Generated Content for Paged Media · Hyperlink Presentation · Line · Lists · Marquee · Media Queries · Multi Column · Namespaces · Paged Media · Presentations Levels · Ruby · Selectors · Speech · Syntax · Template Layout · Text · Transitions Additionally, if you are trying to make websites which work on a variety of platforms and browsers you will love the fact that Web Standards Update not only supports IE specific prefixes like –ms; but also other vendor prefixes like –webkit and –moz. With all of the above goodness we hope you all will enjoy this update as much as we did creating it and hope you will share the good news with our larger developer community. Sharable Links · Download URL - http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83 · VWD Team Announcement post by Mads - http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx · Walkthrough post by Hanselman - http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx Finally, I want to call out that this update is made feasible due to heroic efforts by a lot our team members working on their personal spare time, so please give a huge shout out to our team including Mads Kristensen, Peter Spada, Van Kichline, Aliaksei Baturytski, Damian Edwards, Barry Tang, Bala Chirtsabesan, Alex Gavrilov, Xinyang Qiu, Jon Jung, Scott Hanselman, Teri Schroeppel & Yong Lee. Thanks again!! Vishal R. Joshi | http://vishalrjoshi.com | @vishalrjoshi PS: The Web Standards Update works on both VS 2010 SP1 and VWD Express 2010 SP1. Being a VS Extension, it does not support certain CSS3 selector syntax & Browser API intellisense which would require servicing the shipping bits.

Applying XDT magic to App.Config

For several weeks now people have been asking to be able to use the XML Document Transform (XDT) with App.Config files similar to what is available with Web.Config files in VS 2010…
In all honesty there is no official/supported  implementation of XDT for any other project type than Web Application Projects but the good news is that the basis of Web.Config Transformation resides in Web Publishing Pipeline (WPP) which are set of extensible tasks and targets hooked up to provide a great deployment story for Web Applications…
Today, Ming (our senior dev on Visual Studio) and I decided to get together to give some love to App.Config file too… The below implementation is a crude way of getting XDT working into other project types within VS 2010… In a way, I would say it is a big solution for a smaller problem but the idea here is to get people unblocked and show the kind of things that WPP is capable of doing… 
If by now everything is sounding foreign then please check out the articles:

Web.Config Transformation

VS 2010 Snippets for Web.Config Transformations

Web.Config Transforms (XDTs) for any XML files in your web projects
Goals

• Being able to use XDT syntax for App.Config files similar to what you can use with Web.Debug.Config and Web.Release.Config…
• Being able to use this in an automated fashion in build environments like Team Build…
• Reduce the concept count and make it as simple as possible (without digging deep into optimization & performance)…

Please take a look at Visual Studio extension which allows you to do this without the manual workarounds below:

 http://visualstudiogallery.msdn.microsoft.com/69023d00-a4f9-4a34-a6cd-7e854ba318b5

Step by Step Instructions

The example I am using below should be hopefully super simple that you can follow along without any prep work… All you need is VS 2010 which has “Visual Web Developer” components installed…

Step 1 Create a new Windows Forms Application in VS 2010

Step 2 Add App.Config file to the project…

Add simple test settings to App.Config file as shown below:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <appSettings>
    <add key="author" value="Vishal Joshi"/>    
  </appSettings>
</configuration>

Step 3 Add App.Debug.Config file to the project, I would recommend using the same App.Config file adding mechanism as shown below








Step 4 Modify the content of App.Debug.Config as shown below:

<?xml version="1.0"?>

<!-- For more information on using App.config transformation visit http://go.microsoft.com/fwlink/?LinkId=125889 -->

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <appSettings>
    <add key="article" value="XDT Magic for App.Config Files" xdt:Transform="Insert"/>
  </appSettings>
</configuration>

The key things to note above are:

• There is a XDT namespace declaration which allows XDT engine to recognize the Transform/Locator syntax in the file



• There is a new node being inserted into the config file using the syntax xdt:Transform=”Insert”

Step 5 Save the edited files and unload the project frin VS 2010 Solution Explorer using the right click command as shown below:








Step 6 Edit the .csproj/.vbproj file to make App.Debug.Config file to be dependent on App.Config file as shown in the syntax below:

    <Content Include="App.config" />
    <Content Include="App.Debug.Config" >
      <DependentUpon>App.Config</DependentUpon>
    </Content>

The key things to note above are:

• By default the build action of App.Config and App.Debug.Config file will be “ None”… It needs to be changed to “Content”… This is a tiny pre-requisite for WPP but if you encounter any issues because of this then we can dig the work around…



• DependentUpon node will make your App.Debug.Config appear as a node under your App.Config file similar to the way Web.Debug.Config and Web.Release.Config files appear under Web.Config file…



• In VB Projects nested files are hidden so you might need to unhide these by clicking the icon on the solution explorer…

Step 7 Change the ProjectConfigFileName property within your .csproj/.vbproj file



WPP has an inbuilt property called ProjectConfigFileName which is by default set to Web.Config, we need to change this to app.Config which will allow projects like WinForm project not expect web.config files to transform… You can add this property right under ProjectGuid property as shown below:

  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">x86</Platform>
    <ProductVersion>8.0.30703</ProductVersion>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>{2D587604-866B-4675-8587-FA9728EC59D8}</ProjectGuid>
    <ProjectConfigFileName>App.Config</ProjectConfigFileName>

Step 8 Hook up WPP within your WinForms project by importing the WPP targets.



You can search for “Import” node in your project file and then simply copy below one line for WPP targets import

  <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v10.0\Web\Microsoft.Web.Publishing.targets" />

Step 9 Add a target to copy the transformed App.Config file to your output (BIN) directory




You can simply copy paste the below code just before your </project> node closes in the .csproj/.vbproj file

  <Target Name="PostTransformAppConfig" AfterTargets="TransformWebConfig">
    <Copy Condition="Exists('$(TransformWebConfigIntermediateLocation)\transformed\App.config')" 
          SourceFiles="$(TransformWebConfigIntermediateLocation)\transformed\App.config" 
          DestinationFiles="$(OutputPath)\WinFormConfigTransform.exe.config" />
    <Copy Condition="Exists('$(TransformWebConfigIntermediateLocation)\transformed\App.config')" 
          SourceFiles="$(TransformWebConfigIntermediateLocation)\transformed\App.config" 
          DestinationFiles="$(OutputPath)\WinFormConfigTransform.vshost.exe.config" />
  </Target>

The key things to note above are:

• We hooked up the new PostTransformAppConfig target after TransformWebConfig target… The TransformWebConfig target is the native target in WPP which does any XML transform and will do the actual job of transforming App.Config as well..



• The location at which the new App.Config file is getting copied is pretty self explanatory but do note that you do want to change “WinFormConfigTransform” to be the name of your own Project…  I just used a project called “WinFormConfigTransform” and hence the DestinationFiles path is named as such…

Step 10 Run /T:TransformWebConfig task on your Project from MSBuild



You need to use Visual Studio 2010 Command prompt and type in the below command



msbuild C:\Vishal\WinFormConfigTransform.csproj /t:TransformWebConfig



After running the above command if you now check the BIN folder of your project you should see that the Project.exe.Config file is now modified as shown below:



 



NOTE: If you want the App.Config file to be Transformed after every build in your Visual Studio IDE (this will take some perf away but may not even be noticeable) then you can change Step 9 code to be as below:

<Target Name="PostTransformAppConfig" AfterTargets="Build">
    <CallTarget Targets="TransformWebConfig"/>
    <Copy Condition="Exists('$(TransformWebConfigIntermediateLocation)\transformed\App.config')" 
          SourceFiles="$(TransformWebConfigIntermediateLocation)\transformed\App.config" 
          DestinationFiles="$(OutputPath)\WinFormConfigTransform.exe.config" />
    <Copy Condition="Exists('$(TransformWebConfigIntermediateLocation)\transformed\App.config')" 
          SourceFiles="$(TransformWebConfigIntermediateLocation)\transformed\App.config" 
          DestinationFiles="$(OutputPath)\WinFormConfigTransform.vshost.exe.config" />
  </Target>

The only key difference above is that I made the new target to be called after “Build” and in the new target I made a call to “TransformWebConfig” target to ensure the transform happens before we try to copy the transformed app.config file to their final location…




With the above change now when you build in IDE then the new transformed App.Config will be copied to your output directory…



With the above 10 steps you should now be able to Transform your App.config just like the way you do Web.Config files in VS 2010



-Vishal



PS:  Whenever you make changes to your project file (like above) you make your project susceptible to data loss during upgrade to future versions of VS as next versions of VS will not know all the fancy code you put in the files, but such risks are part of the game to get all the fancy toys working :-)

Xml Document Transform (XDT) Snippets for VS 2010

During my PDC talk I had shown some of the snippets that can come handy while using Web.Config Transformations…  This post is intended to share the XDT snippets and instructions on how to install them to use them with VS 2010…

• Download XDT zip file from my SkyDrive
• Unzip the files and copy the inner XDT folder into %Program Files%\Microsoft Visual Studio 10.0\Xml\1033\Snippets

• After this the XDT snippets will be available for you to use within any XML file within VS 2010…

To know how to use XDTs for Web.Config file please check out the post about Web.Config Transformations

Few interesting points about Transforms & Locators which are worth noting to do pretty powerful stuff with your XML are:

• Transforms  - Transforms act on a XML node i.e. from XDT engine standpoint the node on which a transform is found is plucked out of the document and passed as a node to the Transform itself (e.g. “SetAttributes” Transform)… The Transform class internally implements the logic of modifying the node with its own special logic (i.e. setting attributes in case of “SetAttributes” Transform) and returns back the node to the engine…  The XDT engine then replaces the new node into the document…  The engine also passes the handle of the parent node to the transform which the transform can then play around with (e.g. “Insert” Transform receives a new node as well as the parent node and has the DOM code of inserting the new node under the parent…)

• Locators – XDT usually traverses through the XML document and constructs the XPath all along e.g. when it hits the add node under connectionStrings in web.config it has already constructed the XPath (/configuration/connectionString/add)…  Locators help with narrowing down the XPath so that the correct node can be picked up… Check out the example below:

   <connectionStrings>
      <add name="1stDB" 
        connectionString="Data Source=Server1;Initial Catalog=DB1;Integrated Security=True" 
           xdt:Transform="SetAttributes" />
      <add name="2ndDB"
           connectionString="Data Source=Server2;Initial Catalog=DB2;Integrated Security=True" 
           xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
    </connectionStrings>

Based on the standard logic of XPath traversing XDT will always pick up the first “add” node i.e. one with 1stDB in the example below… That may not be always desirable…  In XDT we could have implemented the logic to do special things for appSettings & connectionStrings but then that would have made XDT specific to web.config instead we implemented Locators which now allows XDT to be general purposes XML transformation engine…  In the above example if we use a Locator called xdt:Locator=”Match(name)” on the 2ndDB then as soon as the XDT engine encouters a locator it calls the class implementing it (i.e. “Match” and allows it to play with the XPath that is being generated… In this case the match locator will help construct the XPath as /configuration/connectionString/add[@name=’2ndDB’]

The high level takeaway here is that when you play around with the snippets for XDT keep the above concepts for Transforms & Locators in mind and with the quick snippet explanations of each transforms and locators you should be able to very easily use all of them… If you encounter any issues plz feel free to reach out…

Thanks!!

-Vishal

Web Deployment Projects Released to Beta (WDP for VS 2010)

 

Our team recently released WDP for VS 2010… The key features to note for WDP for VS 2010 are:

1. All the core features of WDP 2008
2. Migration from WDP 2008 to WDP 201o
3. Multi-Targeting support in WDP 2010
4. Support Web Deploy Packages in the WDP project..

You can read more about the above features on our team blog at Visual Web Developer Team Blog

Download WDP 2010 Beta by clicking here!!

The guidance around using WDP 2010 is

• Use it if you want to migrate to VS 2010 and are currently using WDP for VS 2008
• Use it for TeamBuild/MSBuild based deployment of Web Site Projects in VS 2010…
• Use them for Web Application Projects (WAPs) if you feel it is extremely important for you to pre-compile/merge your projects… If not then you can use Web Deployment features built into VS 2010…

Hope this helps!!

-Vishal

VS 2010 Beta 2 Read Me Items for Web Deployment

There are some known issues/bugs related to VS 2010 Web Deployment features in VS 2010 Beta 2 Read Me… I can imagine reading the entire Beta 2 read me file can be daunting so I thought I can just copy paste the ones related to Web Deployment here…

DB Deployment will fail if the Database Name is longer than 127 characters

Description: If you are using latest VS 2010 Web Deployment Features and trying to deploy your database using the Deploy SQL property page then at times you might get error from VSMsDeploy task. 

There might be several reasons for the failure including connection and authentication issue but a current bug in the product does not allow you to script schema/data from a database (typically SQL Express MDF file) if the file path is longer than 127 characters.  In the OS like XP or Win2K3 the default path for the VS project & its default ASP.NET Login/Profile DB could be something like C:\Documents and Setting\... \Visual Studio 2010\Projects\MyProject\App_Data\ASPnet_DB.mdf... This path can potentially exceed 127 characters and result into Deployment failure...

Workaround: The easy work around is to have the project copied to a location where the path will not exceed 127 characters for e.g. C:\MyProject\App_Data...  This issue will eventually be resolved in the product...

Some VS 2010 Web Deployment Features will not work if VS 2010 is installed on Vista RTM instead of Vista SP1

Description:  If you are using the new Web Deployment feature set in VS 2010 and are using the below features which integrate with MSDeploy:

• Web Packaging
• One-Click Publishing
• DB Deployment

then you will have to use Vista SP1 instead of Vista RTM as your OS.

Workaround: MsDeploy requires features which are built inside Vista SP1 and hence trying to run Web Deployment features on Vista RTM fails.  This is a required dependency so you will have to use Vista SP1 as your OS for VS 2010.  Do note that you can still use any other operating system like XP, Win2K3, Win2k8 R2, Win7 etc to install VS 2010 and use the Web Deployment features, it is just advised that any of the OS versions that you use are updated with the latest Service Packs so that all the required dependencies are in place.

MsDeploy.exe.config file will be required to run Web Deployment on machines with .NET 4.0 only

Description: If you installed VS 2010 on a clean machine which does not have .NET 2.0 (e.g Win2K3)  and are trying to use the VS 2010 Web Deployment Features then when you run the deploy.cmd file to install your web package you might receive error stating "Msdeploy.exe -.NET Framework Initialization Error Unable to find a version of the runtime to run this application."  This is due to the fact that VS 2010 comes with only .NET 4/CLR4 and and CLR 4 does not allow CLR 2.0 executables to run  without having an explict exe.config file…  If you are using other .NET 2.0/3.0 or 3.5 exes on a box with just .NET 4 then you might face similar issues with those EXEs too…

Workaround: You can easily work around this by going to "%Program Files%\IIS\Microsoft Web Deploy" (& additionally also on "%Program Files (x86)%\IIS\Microsoft Web Deploy" folders and create following msdeploy.exe.config file in there

<configuration>
    <startup useLegacyV2RuntimeActivationPolicy="true">
            <supportedRuntime version="v2.0.50727" />
            <supportedRuntime version="v4.0" />
    </startup>
</configuration>

This issue will be fixed in the future releases of the product.

-Vishal

How to ensure placeholder folders are created during VS 2010 Web Deployment

During many web deployment scenarios developers want to be able create place holder folders where eventually their log files or runtime generated files like XMLs, Images etc will be stored…

With VS 2010 Web Deployment there will be a small work around required for you to be able to deploy place holder folders…  Before I go about explaining the work around let me call out that if you do not know about VS 2010 Web Deployment features it might be worth while to check out the blog series about VS 2010 Web Deployment at Overview Post for VS 2010 Web Deployment…

Anyways, as VS 2010 Web Deployment is completely based on MSBuild based Web Publishing Pipeline (WPP) lot of deployment depends upon the MSBuild constructs…  One of the key features which is also supported using MSBuild based constructs is the ability to exclude Files and Folders from deployment.  I am hoping to write blog posts on both of these topics at some point but currently without going into the details consider following:

There is a file/folder structure like C:\MyWeb\Foo\Bar\myfile.htm…  VS 2010 will allow you to exclude or include myfile.htm or folder “Foo” from Web Deployment… If you now chooses to include myfile.htm but chooses to exclude “Foo” folder then the WPP will get into unwanted complex state for potentially trivial gains…

That is the reason most of the include, exclude, delete etc operations are done at the File level rather than at Folder level… So when you are excluding a folder from deployment  behind the scenes a bunch of files under that folder are getting excluded and the end result is the folder being excluded too… The above explanation is not exactly how it translates into code but is more for understanding purposes…

Anyways, this design decision causes the side effect that if there are no files in a folder then the folder does not get deployed as well… By now I imagine you must have figured out the work around too :-) Ya! just put a place holder file even if it is empty.txt in your place holder folder and it will get deployed too !!

If this causes you a lot of grief then do write back with your scenarios so that we can try to understand and analyze them individually…

Also do note that whether you are creating a web package or doing 1-Click Publish the same rationale applies as ultimately same WPP is executed behind the scenes for both…

-Vishal

Server specific Web.config sections replacement with WDP

In this post I am hoping to explain how you can change your web.config settings per different server environment using Web Deployment Projects (WDP) for VS 2005 or VS 2008…

First of all let me start with the fact that WDP for VS 2005 as well as WDP for VS 2008 are build configuration aware… In fact, special effort was made in WDP 2005 & WDP 2008 to allow configuration specific settings…

That is the reason when you look at the WDP UI you can see configuration specific dropdowns as shown below:

You can create one build configuration per your server environment eg. “Testing”, “Staging” , “Production” etc and configure all of your WDP settings per build configuration pretty easily… Learn more how to manage configurations per build environment…

Next I want to change connectionStrings section in side the web.config for “Testing” server and “Release” server… The original connection String section in my web.config file looks as below:

<connectionStrings>
    <add name="vishal-db" connectionString="Data Source=vijoshi-DevBox; Initial Catalog=vishal-db; Integrated Security=True"/>
 </connectionStrings>

• For “Testing” environment I would like to change my Data Source to be vijoshi-Testing



• For “Release” environment I would like to change my Data Source to be vijoshi-Release

To accomplish this I am going to add two configuration files to my project named connectionString.Testing.config and connectionString.Release.config… After adding the two files my solution explorer should look as below:

The content of connectionString.Testing.config file will look as below:

<connectionStrings>
  <add name="vishal-db" connectionString="Data Source=vijoshi-Testing; Initial Catalog=vishal-db; Integrated Security=True"/>
</connectionStrings>

Notice that the connectionString.Testing.config only contains connectionStrings section (as opposed to original web.config which may contain many other sections) … Similar to the above example in connectionString.Release.config file I will only change the Data Source to vijoshi-Release…

After these two files are added I can now open my WDP configuration and go to the “Deployment” node and check the “Enable Web.config file replacement”…  After this the only thing I need to do is write connectionStrings=connectionString.Testing.config  as shown below…

 

 

After this when I build my WDP project the connectionStrings section will be replaced by the content of the connectionString.Testing.config…

Also now I can modify the Configuration from “Testing” to “Release” and set the Web.config file section replacements section to look as below

connectionStrings=connectionString.Release.config 

This way you can also modify the other config sections each in a new line of the text box shown above…

Hope this will help…

-Vishal

All for that small Drop Down Box – Part 2

Web MultiTargeting (Web MT) for VS 2010 has been a great journey of fine technology and a tons of learning for me in person, I am sure everyone in the team feels very similar (although some may add “+ lot of pain” into the mix :-))…  Yesterday, I published some of the details around what Web MT offers web developers in VS 2010… You can read it at:

All for that small Drop Down Box – Part 1

I covered approx 10 different features of MultiTargeting in the previous post, today I am going to time box myself to a couple of hours to write as much as I can and then see if we need Part –3 of this series in few more days or not… :-)

Anyways, let us get started!!

Filtering Markup Intellisense

One of the essential benefits of working within IDE like Visual Studio is that you get your code colorized correctly and intellisense keeps showing up as and when you need it…  Before working on many of these feature areas I often use to take things like keywords getting colorized and intellisense showing up etc pretty much for granted, now I don’t, now I appreciate that ultimately everything is a text pad before it becomes as fancy as VS 2010 code editor is… :-)

The MT team did a reasonable amount of work to make sure that when you go about typing <asp: in HTML editor of VS 2010 and you start getting intellisense as below:

then that is actually customized to the correct ASP.NET version… Imagine if folks got <asp:ListBox in .NET 2.0 project (where ListBox control is not supported) and they started using the ListBox only to find out when the web project is deployed it will not work…  Well, VS 2010 will not show you <asp:List Box in .NET 2.0 project but in order to do that there was work done to filter out the mark up from intellisense which does not apply in a particular framework… After we got the filtering working then the team was assigned to do some more work to make sure that the design was refined in a way that it did not adversely impact performance…

Correct JavaScript Intellisense

You must have already heard that VS 2010 gives great JavaScript intellisense support… In fact in VS 2010 there was a lot of work in this area (out side of MT work) to ensure that you get intellisense everywhere, hopefully I will write about that also in a different post but whether or not I do I am sure you will start noticing the difference in JavaScript intellisense in VS 2010 over VS 2008…

Anyways, for now what is interesting to know is that for Microsoft AJAX the JavaScript files are embedded inside the assemblies like System.Web.Extensions etc…  The AJAX support has only been growing in every .NET framework release and it is one of the reasons why people move from .NET 2.0 to 3.5 and will hopefully move to .NET 4 too… 

You might recollect the reference assemblies discussion from my Part 1 post and that reference assemblies are meta data only assemblies… You might also recollect that VS 2010 process loads only .NET 4 and then reference assemblies are used to mask .NET 4 features in lower level targets like .NET 2.0/3.0 and 3.5… 

Now the AJAX JavaScript files are embedded inside assemblies and they actually differ from framework to framework…  If VS 2010 would use the embedded JavaScript files from .NET 4 assemblies all the time then .NET 2.0/3.5 projects would land up consuming some JavaScript functions which may not be available in that framework…  Due to such scenarios the Reference assemblies actually always contain embedded resources (even though they do not actually contain the source code implementations)… Web MT team worked on getting these embedded resources from the correct reference assemblies and feeding to the JavaScript intellisense engine to ensure that you get correct AJAX intellisense when you are using Microsoft AJAX feature sets…  It was kind of cool to see even JavaScript intellisense get target aware, I hope folks who use a lot of Microsoft AJAX will be able to appreciate this :-)

Special support for AJAX Control Toolkit (ACT)

It is funny that we land up calling AJAX Control Toolkit as “ACT”, I guess not many web developers using and contributing to ACT don’t do so!!  Anyways, ACT 1.0 was an out of band release (i.e. it did not ship as part of .NET 2.0) and offered various controls and extenders which are used by many many web developers…  Eventually ACT 3.5 and now community previews of recent ACT release are becoming available…  When you download and use ACT then you get controls and extenders in your toolbox and your web controls get options to add or remove extenders (e.g. A TextBox control can have a ColorPicker extender)… When all this things come together in VS 2010 there are a lot of possibilities like what if you have .NET 2.o project what kind of ACT should be made available, what if you have ACT 1.0 as well as ACT 3.5  on your box how should VS 2010 react to it, what should be allowed and what should be prevented via errors and intellisense so that web developers do not land up getting their webs into a bad state… ACT in itself with all its combinations keeps several members of our QA team busy for extended period of time… Their goal is  that things should just work and web developers should remain blissfully unaware of the complexity behind the scene… 

Actually the entire MultiTargeting feature in a way is like that “If you as a developer never realized MTs existence throughout your project lifespan--> from creation, to editing to deployment in production, to end of maintenance life then it is “mission accomplished” for us:-)”…  It feels like working in the entertainment industry, making movies everyday and contributing in the category of work which is pivotal but does not have an Oscar category associated with it!!  As long as our movie is loved by the people watching it we will be happy and satisfied, so in short the ask from you is “Love VS 2010 and .NET 4”  it is indeed great!!

Support for 3rd party controls

Ensuring that 3rd party controls from likes of Infragistics and Dundas work seamlessly across framework versions (based on how they are designed) was also important… Some people want to be able to not keep buying same control over and over again after upgrading their framework version (sounds familiar :-))…  There is a reasonable amount of work done in verifying controls from many of our partners and also working with many control vendors to provide them with the guidance on how to work within VS 2010 to make sure things continue to work find when people migrate their projects into VS 2010…  The central MT team across the division worked together to come up with a guidance document for control vendors to integrate into VS 2010, even this simple blog post series is long enough so I will leave to you to imagine how much information must be poured into that document which will be used by various companies to build controls which will work within VS 2010…  You will be surprised on how versioning, licensing and naming is done by various partners… Ensuring that nothing of this broke in VS 2010 was not easy…:-)

ASP.NET Compilation System

With .NET 4 running in VS 2010 process the ASP.NET Compilation System used is also .NET 4… Before we talk more about this let me tell you what ASP.NET Compilation System does – it is the system which actually takes the web pages, parses the various ASP.NET related syntax present inside the HTML e.g. <asp:GridView etc and converts that into code… It also pulls out all of the inline C# or VB code out of your web page and calls the correct C#/VB compiler on it… This is the core ASP.NET Compiler which runs inside of Visual Studio…

Now imagine that the ASP.NET Compiler within VS 2010 was required to be made target aware… What I mean by that is when you are targeting .NET 2.0 and you have .NET 4.0 syntax in your web then the compiler needs to throw an error which shows up in your VS 2010 error list which you can then double click and you are taken to the line on which there was an error…  This actually is the same kind of error reporting mechanism that happens even when there is a typo in source code… In essence ASP.NET 4 compiler needs to get into the “correct framework mode” to provide the accurate error messaging and to avoid any type bleeding from happening…

There are also MT implications on C# and VB compilers which I will possibly cover in a separate post… In any case trust me that making compilation system target aware is a significant endeavor…

IIS Application Pool Mappings

As you know we have Visual Studio Development Server (aka Cassini) that is used to debug/run your project within VS without needing IIS…  I talked a little bit about this in my previous post… The other possibility for running and debugging your app is by using IIS on your local box itself…

VS allows you to create a WAP or a Web Site which uses IIS instead of Cassini… Even here MT needs to intervene; if you are creating a .NET 2.0 IIS Web then VS 2010 needs to go access IIS and create Virtual Directories, IIS Apps and map them to the correct App Pools running in correct target frameworks… Simply put VS 2010 needs to put .NET 2.0 project in .NET 2.0 App Pool and .NET 4 project in .NET 4 App Pool…  I wish it was just limited to this but there are instances when correct App Pools are not available and then VS 2010 needs to go and create them for that framework… Sometime the project is mapped to use .NET 2.0 App Pool and now it is being upgraded to .NET 4… In this scenario VS needs to go and change the IIS App to use the correct App Pool too…

VS 2010 actually uses IIS 6 Metabase APIs to make these changes and even when you are using IIS 7.0 or 7.5 VS 2010 continues to use the same Metabase APIs and hence if you are using IIS as your development server with VS 2010 with Vista/Win7 you will need to have IIS 6 Metabase Compatibility Layer turned on in Control Panel –> Programs–> Turn Windows Features On/Off  as shown below:

It is not only when VS 2010 flips/flops Virtual Directory App Pools when this compatibility layer is used… It is also used when IIS App is created for the first time, in short it is used every time you use IIS based web project within VS 2010…

In all honesty, in VS we could write code to get rid of the IIS 6 Metabase compatibility dependency and instead start using IIS 7 configuration system API but there was a lot work needed to do that we could never get to completely finishing it on time… :-( I totally understand that it is going to be an inconvenience to have the compatibility layer enabled and I apologize for the same but I hope that you will recognize the fact that we do have the intent to finish the work but just from cost and schedule standpoint we could not fit this work into VS 2010…

Anyways, I have reached at the end of my stipulated couple of hours of time to write this post… I assumed that if I give myself couple of hours to write then the content will be at reasonable reading length without making everyone bored, it will also ensure that I do not start writing gibberish :-)

I certainly have more inner workings to tell you about Web MT but I guess that the content is interesting enough to deserve “All for that small Drop Down Box - Part 3”…!!

So until then please do feel free to let me know if any of this is any good to anyone reading :-)

-Vishal

The remaining posts in the Web MultiTargeting Series are:

• All for that small Drop Down Box – Part 1
• All for that small Drop Down Box – Part 3
• Migrating Projects from VS 2008 to VS 2010

Fix-It: Nesting between .aspx and code behind is lost when you move files to a different folder

In this post I am hoping to cover a quick tip/trick about file nesting in ASP.NET Web Site Project.

Let’s say you have the below web site in your solution explorer:

If you move “About.aspx” and “About.aspx.cs”  to the “New Folder” shown above then you will see the file nesting in solution explorer incorrect…

To fix this issue there is a solution explorer button for “Nesting Related Files” as shown below…

When you click this button the project system should update the solution explorer and show you the nested files correctly…

-Vishal

Technorati Tags: Web Site,Visual Studio

Fix-It: Multiple instances of Visual Studio Development server getting created

Sometimes while developing some of you might notice a lot instances of Visual Studio Development Server (aka Cassini) in your system tray… Many of these icons when clicked on land up just vanishing away and at times these icons may flood the system tray causing frustration…  Sorry for that :-(

One of the reasons for this happening is that ASP.NET Development server is set up to use dynamic port allocation as shown below:

WAP (Right Click Project –> Properties –> Web)

Web Sites (Select Web Sites –> F4 to see properties)

Sometimes on some developer boxes either Windows firewall or custom firewall blocks a bunch of ports… In this situation Web Development Server tries to hook to one of the blocked ports port and is not allowed to… In the process the Development Server lands up crashing… Next time it tries to assign itself to another dynamic port and the same thing happens…  As a result there are various tray icons created even though the Web Development Server exe has actually crashed…  That is the reason when you hover over the icons in the system tray they vanish away…

Firstly, let me call out that this is a bug, I just verified it with our key dev Bill Hiebert and he confirmed that this is now fixed in VS 2010…  For the time being the work around for

VS 2008 developers is to go ahead and turn off the Auto-assign Port/Use Dynamic ports option and actually set a fixed port which you know is not blocked by one of your firewalls…  Hopefully with this the multiple icons in the system tray should no longer appear…

If you still face problem then do write back…

-Vishal

Technorati Tags: ASP.NET Development Server,Visual Studio Development Server,Cassini,Visual Studio

VS Project Template Vs Project System

You might many times hear the words “project templates” and “project system” from time to time, I though it would be worth while to talk about the differences between the  two from a web developer stand point…

Web developers using Visual Studio use either File –> New –> Project or File –> New –> Web site as shown below to create new Web projects as shown below:

The new project dialog for Web Developers looks as below:

and the new web site dialog looks as below:

What is probably interesting to note is that all the options that you see inside any of these dialog boxes above are just “Project Templates” and what that really means is that they are underlying the same project system but just wrapped with different set of start up files for easy project development…

In reality there are only two major Project Systems for Web Developers

1. Web Application Projects (WAPs) which are accessible via File –> New –> Project –> Web
2. Web Site Projects (WSPs) which are accessible via File –> New –> Web Site

What is also interesting to note is that WAPs and WSPs have different code bases (with reasonable set of shared components)… I will eventually write a post on real differences between WAPs and WSPs but today let us focus on Project Systems vs Templates…

A Project system like WAP or WSP actually takes care of building, compiling, debugging, managing source control, deploying, hooking up references, intellisense etc etc  for a project…  In essence the major code for functionality of the web project like commands, hot keys, content menus, toolbars etc are all specific to a project system and they remain the same across all the project templates of a single project system…

A Project template on the other hand is simply a bunch of files bundled together to allow a person to easily start developing a certain type of project…   The project templates can have specific files like .svc or .aspx with boiler plate code in it… Each project template can choose to include its own set of references or code files… Behind the scene the project system invoked to do all the magic remains the same… For example ASP.NET Web Application and WCF Service Application are just two different templates for “Web Application Project System”…  Similarly there are a bunch of project templates for “Web Site Project System”…

The key Project templates for Web Application Projects (WAP) are:

• ASP.NET Web Application
• Empty ASP.NET Web Application
• ASP.NET Web Service Application
• WCF Service Application
• Dynamic Data Linq to SQL Web Application
• ASP.NET MVC Web Application (MVC is a customized Web Application Project system, we call it Flavor of WAP, so it is not necessarily a project template only…)
• Dynamic Data Entities Web Application

Similarly, the key Project templates for Web Site Project (WSP) are:

• ASP.NET Web Site
• Empty Web Site
• WCF Service
• ASP.NET Reports Web Site
• Dynamic Data Linq to SQL Web Site
• Dynamic Data Entities Web Site

Hence many a times there are features which work for one project system but do not work for other… A classic example is App_Code directory which works great with Web Site projects but not as seamlessly with Web Application Projects…  Recently I wrote a blog post on Why App_Code does not work as well with WAPs…

Anyways, I hope this gives an idea on how the project systems and project templates for Web Developers work within Visual Studio…

-Vishal

Web Deployment Projects do not work after installing VS 2008 SDK

Some days back it was brought to our attention that Web Deployment Projects (WDP) stop working after installing Visual Studio 2008 SDK…  As you soon VS 2008 SDK is uninstalled then WDP again start working…

We narrowed down this issue to be due to “Isolated Shell Application” which come as part of VS 2008 SDK…  The work around to get WDP working again is to go ahead remove the Shell package by deleting the registry key below:

HKLM\Software\Microsoft\VisualStudio\9.0\Packages\{815946b0-1c0d-4eab-8226-36ea3c59162a}

If you would at anytime restore the Shell package functionality then it would be advisable to Export the registry key and save it somewhere (or repairing the VS 2008 SDK install should also do the same)…

If you have any concerns or issues please do not hesitate to write back to Vishal.Joshi@Microsoft.com

-Vishal

PS: Do note that although the WDP build reports failure with VS 2008 SDK installed the build is not really failing, it is just a reporting false failures, so it is not as severe as it sounds….

Importing a Web Package into IIS Manager

Today I am hoping to talk about installing/importing a Web Package into IIS using IIS Manager…

For this walkthrough you will first need a Web Package… If you want to get few ready made packages you can get them from Web Application Gallery…  There is also a MsDeploy package of BlogEngine.NET available on CodePlex, which you can download to try out this walkthrough…

Hopefully, eventually you will be creating your own web packages for deployment and this walkthrough will even apply at that time…  If you want to learn how to create a web package from Visual Studio 2010 then read the below posts:

• How to create a web package from VS 2010
• How to create a web package using MsBuild commandline
• How to include SQL DBs within your web packages 

To begin importing a web package into IIS using the new “Import Application” wizard you need to make sure that you have installed IIS Manager by going to Add/Remove Windows component…  You will also need MsDeploy installed over IIS, typically it will come with your VS 2010 installation but if you do not have VS 2010 just yet then you can download it from MsDeploy Download.

Today, I will install a Web Package of the sample ASP.NET 4.0 web application that I created earlier in the tutorial “Creating a simple ASP.NET 4.0 Web Site”…

To start importing the web package let us start IIS Manager (Start –> Run –> InetMgr)

I will be installing the web package under Default Web Site…  Although it is not required to install the package under Default Web Site, it can be installed under any Web Site of your choice… Also if the package created was a “IIS Web Site Package” then it could be installed under the server /sites node directly as well…  In anycase when we open the “Default Web Site” node then on the right side command bar you will now notice two new commands  1.) Export Application 2.) Import Application as shown below:

On clicking “Import Application” on the first screen you will be asked to provide the path to web package (.zip file)… I will be providing the location of the sample web package which I created in the earlier tutorial:

On clicking next the Import Application wizard will display the content of the web package as below:

Notice that in the above example the package wizard shows that the Web Package contains:

1. IIS 7 Application - This will actually do the job of creating an IIS Application and mapping the virtual directory…  It will also move any additional IIS Settings associated with the web application…
2. File System Content  - All the physical files (.aspx, .dlls etc) which need to be placed in the web site directory…
3. Database – This is the database that I packaged into my web package

On clicking “Next” I will get a screen which I will call as the “Parameters” screen…  When you create a package using VS 2010, then VS identifies the key attributes of your web application which you need to customize and it creates MsDeploy parameters for the same…  All these parameters are something which you can modify during the package import process as seen below…
In the above example notice that “Default Web Site” is read-only… This is due to the fact that the “Import Application” wizard was invoked from Default Web Site… I am now naming the Web As “SimpleASP4Web” and placing it under “C:\WebSites\SimpleASP4Web”…  Also note that I am using “SimpleASP4Web” DB on my local SQL Server…

The ConnectionString that I am providing in here will be used to deploy my packaged DB and will also be used to update my web.config file (this will happen only if the package was created to do so…  I will write a separate blog post on how to do that, but in future release of VS 2010 this option will be set by default when you create the web package at the first place…)

In any case now on clicking “Next” the Web Application installation will begin showing you a progress bar and hopefully within no time the web package will get installed showing you the status as below:

On hitting “Finish” on this screen the web package will be installed and on inspecting the IIS Manager you can see that the package is actually successfully imported and web site is ready to go:

On inspecting the SQL Server Management Studio you can also see the Simple ASP4Web DB also installed:

Hopefully you can see that the web deployment features with great UI options in VS 2010 and IIS will make the process of packaging and installing you web applications much easier than what it has been before…

-Vishal

Unload Web Site and WAP in Visual Studio

Inside Visual Studio many times people want to be able to unload a projects without having to completely close them…

Web Application Projects (WAPs)/ Class Libraries Unload

WAPs or Class Libraries unloading the project allows you to open the .csproj or .vbproj within an XML editor and modify the properties… This is by far the biggest reason why unloading WAPs, Class Libraries etc is used…  You can Unload most of the VS projects by Right Clicking on the project node and clicking “Unload Project” as shown below:

After Unloading the project looks as below and you can again Right Click on it to edit the project file.

Web Site Project Unload

Web site project on the other hand are different, firstly cause they do not have a project file and hence unloading them to edit the project file is not a motivation…  People still do want the ability to unload Web Site project and the scenario around it is that when you unload a project then on Solution build the unload project does not get built… This way if you are in middle of writing some code in that project and have existing errors then you can still unload it and continue with solution build…  Also Reloading the project will be faster than opening a closed project…  With that said if you Right Click on Web Site project you won’t find the “Unload Project” option… 

The right Click context menu is already very long for Web Site and as Unloading Web Site is not as common the command for “Unload Web Site” actually sits in the “Web Site” menu on top of Visual Studio as shown below:

After unloading the project you can then right click on the unavailable node (just like WAP above) and ask VS to “Reload Project”…

Also FYI unloading and reloading of project resets a lot of in memory objects associated with the project so in VS 2010 we explicitly load and unload WAP as well Web Site when you change your project’s target .NET framework version (e.g. move from 3.5 to 4.0)… This allows VS to hook in the correct intelligence, toolbox etc etc associated with the correct .NET Framework version…

Hope this small tip & trick  will help you…!!

Disabling Script Debugging with VS 2010, Silverlight & IE 8

This is a quick post to cover few items related to Script Debugging and the way it is impacted by Silverlight, Internet Explorer 8 and Visual Studio 2010…

With IE 8 there is no longer option to disable script debugging… When VS 2010 will launch IE 8 then script debugging will be enabled by default… This will help people debug scripts flawlessly without having to go and change script debugging features within IE 8… While this is a good feature for most users it might at times create problem when you do not really want script debugging to be enabled for performance reasons (i.e. if you do not want to debug scripts and have lot of scripts in your pages)…

On separate note Silverlight is a special debugging option for Web Projects…  You can view that by going to Project –> Properties –> Web…  Check the screenshots below for Web Application Projects (WAP):

for Web Sites you can view those options by going to Web Site—> Properties –> Start Options as shown in the figure below

Now Silverlight debugging is mutually exclusive with Script Debugging as Debugger at a time can attach to only one of the two, so when you turn on Silverlight debugging then VS has to turn Script Debugging Off…  If you have bunch of Client side scripts in your Silverlight project which needs to be debugged then in that case you will have to go to the above option and turn off Silverlight debugging to have Script Debugging enabled… 

Now a side effect of all this is that if you want to turn off Script Debugging on your regular projects then your easiest work around is to go and turn on Silverlight debugging and your script debugging will get turned off by itself…

GreggM on our Debugger team has got some further detailed work around via modifying the registry at http://blogs.msdn.com/greggm/archive/2009/04/06/disabling-script-debugging-in-vs-2008-ie8.aspx, it is a great post take a look at it…

Hope this workaround helps you!!…