VS 2010: support ASP.NET, HTML, Javascript snippets

This article will tell about another interesting innovation in VS 2010 - support for HTML / ASP.NET / JavaScript snippets (fragments). Snippets allow you to work more productively with the code by creating pieces of code for reuse in the application, while typing a minimum of characters.

Visual Studio supported the concept of snippets for VB and C # in previous versions, but not for HTML, ASP.NET markup, and JavaScript.

Using ASP.NET Snippets
')
Let's take a look at how we can use snippets to quickly execute a simple security script. In particular, we implement the functionality necessary to display either the "[Login] links" or "[Welcome, User]" messages in the upper right-hand corner of the site depending on the authorization status:



This page will automatically appear after creating the ASP.NET Project Starter Template project in MS 2010. For this review, we are working with a clean master page and build everything from scratch.

We will start by adding a standard <div> element to the master page, and will write code in it:



We will use the built-in <asp: loginview> control to implement our script. The <asp: loginview> control is a template (first introduced in ASP.NET 2.0), which allows us to easily switch between “anonymous” and “authorized user” templates. Instead of typing <asp: loginview> manually, we will use the new snippet.

By typing “<log” in the editor, intellisense will show the available elements, controls and snippets that start with the given characters.



We will select the built-in “loginview” snippet from the list and press Tab to complete:



Now that we have chosen the snippet, we need to press Tab again to launch it, which will immediately replace the snippet with the markup below. Notice that the snippet added a new <asp: loginview> control and automatically declared the two most commonly used templates in it. As a result, we had to press only 6 keys - four, in order to type “<log”, and then two times Tab.



Let's fill in “AnonymousTemplate”.

By typing “<a” in the editor, intellisense will show the available elements and snippets that we can use:



We will select the built-in snippet “a” from the list, then press Tab. After another pressing Tab, we will launch a snippet, which will be replaced with the following markup:



The value of the “href” attribute and the internal contents of the <a> element are highlighted in green. This means that these values ​​are replaceable parameters and we can switch between them using Tab, filling them, without using the arrows or the mouse.

Without the need to use the arrow keys or the mouse, we can begin to enter the URL of the login page to which we wish to send the user if he is not authorized:



When we’ve finished typing the URL, we can press Tab and VS will automatically highlight the second parameter for us in the editor (no cursor or mouse movements are required):



Now we can enter the text to display (once again, we did not move the mouse cursor and did not press the arrow keys):



Once we have dealt with “<AnonymousTemplate>”, you can go to “<LoggedInTemplate>”. We will type “<log” in the editor and select the “loginname” snippet from the list:



After pressing Tab, the snippet will generate the following markup:



The value of the “FormatString” property was automatically generated for us with the default greeting text. The value is also automatically highlighted in case we want to change it. For this example, we will keep the text as default.

Our final markup will look like this:



When we launch our application, the above markup will show the “[Login]” link if we are not logged in:



When we log in, the welcome line will look like this:



The total number of keystrokes to implement the above scenario - less than 15% of what we had to do before. Typing faster, I saw that I was able to implement the above script in less than 15 seconds :-)

ASP.NET MVC snippets

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

Embedded snippets are also available for simple ASP.NET MVC view scripts and for embedded ASP.NET MVC HTML helpers (helpers).

For example, we can type “<act” in the form of ASP.NET MVC and select the “actionlink” snippet:



As a result, running the snippet, we get the following code:



Please note that the “linktext” and “actionname” values ​​are highlighted as snippet parameters - this means that we can change them without using the mouse or the arrows. The first parameter “linktext” is selected by default, we can immediately give it values, then press Tab and set the value for the parameter “actionname”:



Own snippets

Visual Studio 2010 includes more than 200 built-in snippets, which you can immediately use after installing the program.

But the most important thing is that you are not limited to using built-in snippets. You can create your own snippets (supporting replaceable settings), as well as import them into VS 2010, so you can share your snippets with other developers. This all makes it easy to automate your own tasks.

This article describes support for snippets, which is already implemented in VS 2008 and provides a little more information on how to create and manage your own snippets.

Conclusion

Snippets - a very convenient feature that allows you to reduce the number of keystrokes in the editor, increase the speed of implementation of various actions and tasks. And adding snippets not only in VB and C #, but also in HTML, ASP.NET and JavaScript files, gives this feature even more convenience and can further increase your productivity.