Few Nice features in Visual Studio 11 Developer Preview for ASP.NET Developers

Visual Studio 2011 developer preview introduced many great features. These  includes IDE features such as HTML Editor Enhancements,  Debugging features, parallel computing improvements, SharePoint development features etc. You can read the Announcing Visual Studio 11 Developer Preview post from Jason Zander’s WebLog to know more about the newly launched Visual Studio. In this post I am going talk few of  nice features of Visual Studio 2011 developer preview  related with ASP.NET.

Server Side Event Handler Generation From Markup

This is really a great addition in Visual Studio 2011 Developer Preview for ASP.NET developers. If you are familiar with  WPF and XMAL development in Visual Studio, it should be well known for you, because  preview version of Visual Studio supports  generation of  event handler code from XMAL markup itself.  With Visual Studio 2011 developer preview, creating event handlers for ASP.NET controls have become significantly easy. You really don’t not need to write the event handler manually or  generating the even handler from design view.
In VS 2011 Developer preview, markup intellisense for all ASP.NET server-side events will show you list of exiting handlers and a value called “<Create New Event>” . Which means you can attach the event with some exiting event handler or  select “create New event” to generate an new  handler with the right signature in the code-behind file.

If there is no control Id provided, Visual Studio will consider the control id as “Unnamed” and will generate the event handler as shown in below.


If you are wondering  about what will happen if there are multiple controls  without ids, does Visual studio going to attach with same event handler? No, It will  append an incremental number with event handler name.

Visual Studio will generate Event handler name as <ControlName>_Click if control id is provided.

Smart Tasks within the HTML Editor

Along with Design View of ASP.NET , Visual Studio 2011 developer added support to enable smart tasks within HTML Markup.

This helps to configure the controls from HTML Editor, instead of moving around both source and design view every time.
To know more about the above features please read HTML Editor Smart Tasks and Event Handler Generation (ASP.NET vNext Series) post by ScottGu

Extract To User Control

This is very handy and quick time saving features and a much required during code refactoring. Consider a situation where you have designed some web pages which are quite large or you have realized that it would have been better to put some part of web page in a user control  so that you can use it  in multiple places. Yes,  manually this is a big process  to create controls, copy – past code and refer them in page. Well, VS 2011 Developer preview  makes this very easier. In source of HTML Editor you will have option called “Extract to User Control” .  Select the code block in HTML Editor which you want to move as user control and select “Extract to User Control” from context menu.

This will launch “Save As” dialog for user control. Provide the “User Control Name” and click “Ok”

This will automatically create a User Control and same will be referred to your page automatically.

Page Inspector Developer Preview

Page Inspector is a new tool that integrated browser diagnostics tools into Visual Studio . Yes, you can take similar experience  of IE Developer toolbar with in Visual Studio itself. Page Inspector works in Visual Studio with Web Application projects and Web Site projects and helps you  to easily inspect the web pages, Css styling, quickly diagnose issues.
Page inspector  is not installed by default with VS 2011 Developer Preview.  You have to install it separately  and the best possible ways to installed it using “Web Platform Installer” .

Once you have Page Installer installed, you will get “View In Page Inspector” option with the source view , Design view and even from solution explorer.

Select “View in Page Inspector” option to start inspecting the page. This will launch your page with in Visual Studio with other tooling support to inspect your pages using which you can start inspecting page styling with in visual studio itself.

This is just a quick introduction of Page Inspector Tool. I will suggest you to read out the Page Inspector v1 Developer Preview Release Notes for more information. Yes, this is a really great addition.

IIS Express Is Now Default Integrated Web Server

IIS Express is a lightweight, self-contained version of IIS optimized for developers.  Visual Studio 2010 SP1 allows you to build and test web applications using IIS Express instead of the built-in ASP.NET Development Web Server (Cassini) . But, Cassini was the default browser for Visual Studio 2010 SP1, and you need to change default value from project context menu to “Use IIS Express” .

I have published one tip on How to Use IIS Express for all new file based web sites and projects ? with Visual Studio 2010 SP1. But now, you really don’t required to change that. This feature came as default settings in Visual Studio 2011 Developer Preview.
Navigate to Tools > Options > Projects and Solutions and then Select “Web Projects” . You will find “Use IIS Express for new File based web sites and projects” selected by default. Which means Visual Studio 2011 Developer Preview will use IIS Express as default web server.

If you want Cassini to be back as default, you can uncheck this option and if you want to use Cassini for a specific project, select “Use Visual Studio Development Server..” from project context menu.


Enjoy Visual Studio 2011 Developer Preview and ASP.NET vNext !!

Bundling and Minification in ASP.NET 4.5

Optimizing application performance  is a key element for business. There are several ways by which we can optimize the applications performance. It can be done either by server side code optimization, caching or some client side optimization. In this post I am going to discuss about one handy and smart way to optimize web applications performance using Bundling and Minification  features which is introduced with ASP.NET 4.5 Developer Preview. ASP.NET 4.5 Developer Preview introduced bundling, which combines multiple JavaScript files for faster loading with less number of requests for download and minification, which reduces the size of JavaScript and CSS files by removing unneeded characters .  Combination of these bundling and minification helps web pages to load very faster. Let’s have a looks how it works.
The below images shows the typical web application structure of  that contains CSS and Javascript files along with other asp.net elements.

Scripts folder contains all the JavaScript files where as Styles contains all the CSS file. CSS  and JS files takes milliseconds of time  to load into the browser though it’s really matter how much time it’s takes to load the CSS and JS files.
This is how you refer the JavaScript and CSS in applications markup.

Run your application and  inspect the loaded Css and JavaScript files using IE Developer toolbar . You can see all the mentioned css and JavaScript in the html markup  loaded individually.

To take a more granular look on the loading perspective, you can use the IE Developer toolbar. You will find there are individual request to download the css and javascript files and each of them taken individual time.

You can take a quick look using YSlow statistics viewer for total number of request for javascript and css files.

ASP.NET 4.5 Introduced Bundling and Minifying the files which reduce the number of requests by merging the files into a single one. Bundling combines multiple JavaScript files for faster loading and reduced the number of request to download the files and minification reduces the size of JavaScript and CSS files by removing unneeded characters.
To apply the binding and  Minifying first of all you need to refer the folder for css and javascript instead of individual files. Along with the folder name you have the append css for CSS folder and js for JavaScript folder.

Once you are done with this changes, you have to enable the Bundling on Application_Start() event of global.asax.cs  file

That’s all. Run the application once again and inspect the save thing for CSS and JavaScript in IE Developer Toolbar. Interestingly you will find only one CSS File and one JavaScript has been loaded.

You can also use IE Developer toolbar to checkout the result. Yes, there is only two request, one for CSS and another for JavaScript. You can also find the significant amount of changes in file size and number of request for JS and CSS file also reduced.

Here is some inside view,

.NET 4.5 introduced a new class called BundleTable provides programmatic access to the collection of registered Bundle objects in an ASP.NET application. Bundle object  contains the  list of JavaScript or CSS files . ASP.NET runtime dynamically combines into a single virtual file that a browser can retrieve by using a single request.

Every elements of Bundle object is a key value pair . Key is a string that define either “JS” or “Css” and Values contains the the type of  System.Web.Optimization.DynamicFolderBundle.

You can create your custom bundles for JavaScript  as well as CSS.  Below code snippets shows the same.

01	void Application_Start(object sender, EventArgs e)

02

{

03	BundleTable.Bundles.EnableDefaultBundles();

04

05	var jSBundle = new Bundle("~/JsMinify", typeof(JsMinify));

06

07	jSBundle.AddFile("~/Scripts/CustomFunction.js");

08	jSBundle.AddFile("~/Scripts/jquery-1.4.1-vsdoc.js");

09	jSBundle.AddFile("~/Scripts/jquery-1.4.1.js");

10	jSBundle.AddFile("~/Scripts/JSONCreate.js");

11

12	BundleTable.Bundles.Add(jSBundle);

13

14	var cssBundle = new Bundle("~/CSSMinify", typeof(CssMinify));

15

16	cssBundle.AddFile("~/Styles/Collection.css");

17	cssBundle.AddFile("~/Styles/GlobalSupport.css");

18	cssBundle.AddFile("~/Styles/MasterStyle.css");

19	cssBundle.AddFile("~/Styles/MenuStyle.css");

20	cssBundle.AddFile("~/Styles/Minimum.css");

21	cssBundle.AddFile("~/Styles/Ribbon.css");

22	cssBundle.AddFile("~/Styles/Site.css");

23

24	BundleTable.Bundles.Add(cssBundle);

25

26

}

Once you have your own bundle object, you can specify the same in your html markup as shown in below

Now, run the application and inspect your own created bundle in IE Developer toolbar.

One of the biggest advantages of this custom bundle objects is, you can refer multiple directories as shown in below code snippet.
As shown in above code snippet, we are adding one directory for bundling with