ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

This is the sixth in a series of blog posts I’m doing on the upcoming VS 2010 and .NET 4 release.

Today’s post covers another useful improvement in VS 2010 – HTML/ASP.NET/JavaScript snippet support.  Snippets allow you to be more productive within source view by allowing you to create chunks of code and markup that you can quickly apply and use in your application with a minimum of character typing.

Visual Studio has supported the concept of “snippets” for VB and C# in previous releases – but not for HTML, ASP.NET markup and JavaScript.  With VS 2010 we now support snippets for these content types as well.

Using ASP.NET Snippets

Let’s walkthrough how we can use snippets to quickly implement a common security scenario.  Specifically, we’ll implement the functionality necessary to display either a “[ Login ]” link or a “[ Welcome UserName ]” message at the the top right of a site depending on whether or not the user is logged in:

step1

The above functionality is automatically added for you when you create a project using the new ASP.NET Project Starter Template in VS 2010.  For the purpose of this walkthrough, though, we’ll assume we are starting with a blank master page and will build it entirely from scratch.

We’ll start by adding a standard <div> element to a master page, and then position our cursor within it:

step2

We are going to use the built-in <asp:loginview> control to help implement our scenario.  The <asp:loginview> control is a templated control (first introduced with ASP.NET 2.0) that allows us to easily switch between “Anonymous” and “LoggedIn” templates that automatically display depending on whether the user is authenticated.  Rather than type the <asp:loginview> markup manually, we’ll instead use the new snippet support in VS 2010.

Typing in “<log” in the editor will bring up intellisense and display available elements, controls and code snippets that start with those characters.

step3

We’ll select the built-in “loginview” code snippet from the above list and hit the “tab” key to complete it:

step4

Now that we’ve selected the snippet we want to use, we can hit the “tab” key again to execute the snippet – which will cause it to immediately replace the snippet name with the markup below.  Notice below the snippet added a new <asp:loginview> control for us and automatically defined the two most commonly used templates on it.  We were able to implement that all with just 6 keystrokes (4 keystrokes to type “<log”, and then 2 tab keystrokes).

step5

We’ll now implement the “AnonymousTemplate”.

Typing in “<a” in the editor will being up intellisense and display available elements and code-snippets we can use:

step6

We’ll select the built-in “a” code snippet from the above list and hit the “tab” key to complete it.  When we hit tab again it will execute the snippet – which will cause it to replace the snippet name with the markup below:

step7

The “href” attribute attribute value and the inner content of the <a> element above are highlighted with a green background color.  This indicates that these values are replaceable parameters and that we can automatically tab between them when filling them out – avoiding the need to use the cursor keys or touch the mouse (making things much faster).

Without having to move our cursor or mouse, we can begin typing the login page URL we want to send users to if they are not authenticated on the site:

step8

When done, we can hit the “tab” key and VS will automatically highlight the second content parameter in the editor for us (no manual cursor movement or mouse action required):

step9

We can then type the text we want displayed (again without having to move the mouse or touch a cursor key):

step10

Once done with the “<AnonymousTemplate>” we can move onto the "<LoggedInTemplate>”.  We’ll type “<log” in the editor to bring up intellisense – and select the built-in “loginname” snippet:

step11

When we hit tab it will execute the snippet – which will cause it to replace the snippet with the markup below:

step12

The “FormatString” property value above was automatically populated for us with a default welcome text message.  The value is also automatically highlighted in case we want to change it (without having to move the mouse or cursor keys).  For this sample we’ll just keep the default text.

Our final markup then looks like below:

step13

When we run our application the above markup will display a “[Login]” link when we aren’t authenticated:

step19

When we are logged in we’ll see a welcome string like below:

step15

The total number of key strokes to implement this entire scenario is less than 15% of what we would previously have had to type.  Typing fast, I found I could implement the entire scenario in less than 15 seconds :-)

ASP.NET MVC Snippets

Built-in snippets are available for all ASP.NET controls and HTML markup elements. 

Built-in snippets are also available for common ASP.NET MVC view scenarios, and for the built-in ASP.NET MVC HTML helpers. 

For example, we can type “<act” within a ASP.NET MVC view and select the “actionlink” snippet:

step16

When we complete it and hit the “tab” key the snippet will execute – which will cause it to replace the snippet name with the markup below:

step17

Notice that the “linktext” and “actionname” values are marked as snippet parameters – which means we can easily replace them without having to use the cursor keys or touch the mouse.  The first linktext parameter value is selected by default – which means we can just type to immediately replace the value, then hit tab to immediately select and replace the second actionname parameter:

step18

Custom Snippets

Visual Studio 2010 will include more than 200 built-in snippets that you can immediately use when you install the product.

What is really nice is that you are not limited to only using the built-in snippets.  You can also easily create your own snippets (complete with replaceable parameters) and both import them into VS 2010, as well as easily share them with other developers.  This makes it easy for you to quickly automate your own common tasks.

This article describes the snippet support that already exists in VS 2008, and provides a little more context on how to create and manage custom snippets.

Summary

Snippets are a useful feature that enable you to reduce keystrokes within the editor, and allow you to complete scenarios and tasks much faster.  Having snippets now enabled in not just VB and C#, but also in HTML, ASP.NET and JavaScript files, makes this capability even more useful – and can make you even more productive.

Hope this helps,

Scott

P.S. In addition to blogging, I have been using Twitter more recently to-do quick posts and share links.  You can follow me on Twitter at: http://www.twitter.com/scottgu (@scottgu is my twitter name)

Published Friday, September 4, 2009 2:12 AM by ScottGu

Comments

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 5:24 AM by anishmarokey

Wow nice work !!! .This makes the development more faster and easy.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 5:25 AM by Mohammad Mahdi Ramezanpour

Wow! It's amazing. Thanks for the interesting post.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 5:25 AM by anishmarokey

wow !!nice work .This makes development more faster and easy

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 5:34 AM by Gabriel

It would be nice to have a tooltip/description on each content parameter editing.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 5:55 AM by Vijay santhanam

Would love to see snippets available

per project. So u can distribute

snippets with version control

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 6:19 AM by Sehar

gr8! really nice to have it in IDE

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 6:45 AM by vik20000in

yes this is a really good addition. Its very good for people who like to work source code much more than use designer.

One question though, In case of a team, using TFS, can these snippets be automatically be updated in all machine. I mean what has been done to address the scenario, where one person creates snippet and want to share with team.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 6:46 AM by ASP.NET MVC Lover

Nice job guys... Especially the cool MVC integration into VS..

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 8:03 AM by Prashant V C

I loved these feature, great post !! I didn't know that javascript snippets are also available in VS 2010...

Cant wait to get final version..

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 8:12 AM by Vítor

Great! What about XAML?

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 8:54 AM by Joseph Ghassan

I hope these new added features won't compromise VS 2010 performance.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 9:00 AM by ccatto

Hey Now Scott,

Equip it with a snippet! that is what I've always been told.

Thx 4 the info,

Catto

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 9:04 AM by Chad

Awesome. I normally have to drop out to intype or similar text editor because  VS just doesn't have the support for writing HTML fast. Hopefully now I won't have to! I'm glad these have made their way I to VS as they have been in other editors for a long time.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 9:09 AM by habdulrauf

Thanks, it shows VS10 will make developer life a lot easier

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 9:25 AM by Mohamed Mosallem

It just keeps getting better and better

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 10:55 AM by Gareth

Nice - but what about javascript code outlining?  That would REALLY make a difference and something that is desperately wanted for javascript

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 12:39 PM by ryan

Nice.  But will we be able to use asp.net snippets when using "Code Optimized Web Development" mode?

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 1:18 PM by Mike Murray

You mentioned JavaScript support...that makes me wonder if that includes any jQuery snippets?

Another commenter brought up XAML...I want to echo that question as well.

Thanks.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 4, 2009 4:41 PM by Igor

I have question about javascript. If you have plans to add an object\function viewer such as class viewer in the c# editor?

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Saturday, September 5, 2009 12:37 AM by vn_nilesh@hotmail.com

As always very helpful article.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Saturday, September 5, 2009 5:28 AM by Keeno

This looks great. Do you know if they have added the ability to automatically import the correct namespaces in custom C# snippets? I know that this has been available to vb.net users only up until now.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Saturday, September 5, 2009 7:35 AM by ImanMasih

JavaScript Snippet is one of my dreams.it's wonderful

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Sunday, September 6, 2009 10:26 AM by video izle

Hımm. Yes, good idea. Thanks a lot..

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Monday, September 7, 2009 12:17 AM by thicouto

Waw! Javascript snippets is fabulous! I can't wait for VS 2010!

Nice post... Congratulations!

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Monday, September 7, 2009 2:59 AM by herzevekil

Thanks for sharing.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Monday, September 7, 2009 4:54 AM by Vernon de Goede

Hi scottgu,

Looks great! I'll give it a try if I had some more time :)

Thanks,

Vernon

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Monday, September 7, 2009 9:52 PM by Javascript Multi Level Drop Down Menu

very cool & good tip, thank you very much for sharing.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Tuesday, September 8, 2009 2:07 AM by Thanigainathan

Hi,

Thats a really nice feature to use.thanks for sharing.

Thanks,

Thani

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Tuesday, September 8, 2009 4:43 AM by SorinS

Useful as ever Scott. Can't wait for .Net 4.0 :)

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Tuesday, September 8, 2009 5:47 AM by Brendan

Cool, snippets should save a lot of time!

Is it going to be possible to add a 'Surround With' like you can in a code file but surround with a html snippet instead?

e.g 'Surround With' and then choose 'form' would add <form> to the start and </form> at the end around a selected html block and increase the indent, placing the cursor in the start tag to add any required attributes.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Tuesday, September 8, 2009 8:55 PM by jinglecat

Cool Feature. Looking forward to the 2010 coming.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Wednesday, September 9, 2009 2:39 AM by Zeeshan Umar

Nice features,i am dying to have a final version of VS 2010. Also thanks for sharing.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Wednesday, September 9, 2009 4:21 AM by outsource software developer

i really don't know  VS 2010 support snippet to HTML, ASP.NET markup and JavaScript thanks

for  sharing information

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Wednesday, September 9, 2009 3:50 PM by singhgurd

Ability to use tabs to navigate among snippet variables is great; never knew it existed.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Thursday, September 10, 2009 12:09 AM by shahed.kazi

Not sure how snippets work. If I use snippets and later want to change the snippet, will a change in the snippet reflect in all the pages using the snippet? Is it better to use user controls instead when to comes to using snippets for asp.net controls?

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Thursday, September 10, 2009 3:57 AM by EarlNet

Wooowwww..... What an intelligence....

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Thursday, September 10, 2009 8:35 AM by Zeeshan Umar

Visual Studio is making developer's life easy and easier. Snippts in JS and Markup is really a cool enhancement. Thanks for sharing it.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Friday, September 11, 2009 1:43 PM by Peter

What's needed now is a built-in snippet editor. Something that would allow me to select a block of text, right click, and select "Make snippet". The editor should also help me out with how to define parameters, code jump positions, and so on.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Monday, September 14, 2009 7:30 AM by Marcus

Well, I must say, at last. I've always wondered why that support wasn't there from the beginning at least for .aspx-files.

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Thursday, September 17, 2009 1:14 AM by Kevin Dente

Awesome. Much needed.

Will the editor differentiate between MVC and WebForms views, to avoid showing webform controls snippets like LoginView in an MVC view?

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Sunday, September 20, 2009 10:24 AM by awake

finally catching up with the textmate guys I see...

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Tuesday, October 20, 2009 5:29 AM by new292

nice work !!

# re: ASP.NET, HTML, JavaScript Snippet Support (VS 2010 and .NET 4.0 Series)

Tuesday, October 27, 2009 11:55 AM by Ali Mahran

a nice worke!!! i will create an application in a few time