One of the aspects of my job that I hate the most is building long, mundane Asp.Net forms. I get so tired of dropping labels, textboxes, validators on a page and then formatting them over and over again. Every project I work on I find myself building the exact same form fields: First Name, Last Name, Email Address, Address, City, State, blah, blah, blah. It drives me nuts.
You’re probably thinking, why don’t you just copy and paste? That’s a valid question, but copying and pasting form fields, to me, is almost as bad as just building the thing from scratch. I never can remember the exact file name of an existing file I need to open or even where the project is stored. It’s a real hassle for me.
Enter code snippets.
Code snippets in Visual Studio can be a great tool for making long forms a lot less painful. Code snippets are basically XML files that you can assign shortcuts to that inserts a block of code at a certain place in Visual Studio. There is another kind of snippet that will wrap around a selection…but only works in C#, not VB or HTML…which drives me crazy, so don’t get me started!
Code snippets are stored (generally) in a Visual Studio folder in your Documents folder (the path for mine is Documents\Visual Studio 1010\Code Snippets). Inside the Code Snippets folder there are folders for each types of snippets. HTML snippets go in Visual Web Developer (so C# snippets go in the Visual C# folder and so forth). I created a folder called “My HTML Snippets” to store all my snippets (how many times can I possibly use the word snippet in a post? I guess we’ll see.)
Again, Code Snippets are XML files, saved with the extension “.snippet”.
The format of the XML is:
<?xml version="1.0" encoding="utf-8"?> <CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <CodeSnippet Format="1.0.0"> <Header> <SnippetTypes> <SnippetType>Expansion</SnippetType> </SnippetTypes> <Title>Title goes here</Title> <Author></Author> <Description> </Description> <HelpUrl> </HelpUrl> <Shortcut>[keyboard shortcut]</Shortcut> </Header> <Snippet> <Declarations> <!-- variables, either Editable or not --> <Literal Editable="true"> <ID>Var1</ID> <ToolTip></ToolTip> <Default></Default> <Function></Function> </Literal> </Declarations> <Code Language="html"><![CDATA[HTML CODE GOES HERE]]></Code> </Snippet> </CodeSnippet> </CodeSnippets>
Here’s how I use snippets to build my forms. I basically have a snippet for each type of control. I suggest you first decide on a “standard” way to build forms. Mine is all controls will have Labels (with AssociatedControlID’s) and will be wrapped in side of a div tag. Like so:
<!-- First Name --> <div class="ff"> <asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" CssClass="lbl">First Name:</asp:Label> <asp:TextBox ID="txtFirstName" CssClass="tb" runat="server"></asp:TextBox> </div> <!-- End First Name -->
To the div I assign the class=”ff” (I like short classes, ff stands for “FormField”) and the Label and TextBox both have set classes. I also found that commenting the beginning and end of a field can be a real time saver when needing to find a field on the page! Also notice that the ID’s for the Label and TextBoxes are the same except for the prefix. This is, of course, my preferred methods of setting up forms. You may have a different layout or naming convention. It really doesn’t matter, it’s completely up to you.
So now that I have my layout set up, I want to set this up as Code Snippet. The easiest way to do this is to create a new .snippet file inside the snippets folder (remember to make sure it’s in the Visual Web Developer folder. You can copy the XML format above and paste it in the new snippet document. Then copy the HTML you want to use as a snippet and paste it inside the <![CDATA[]]> in the Code XML element. Give it a title (say, “Textbox”). You can assign it a shortcut (say, “tb”). It is worth noting that the shortcut is not a keyboard shortcut. Visual Studio will replace the shortcut with the full html. You actually type it in. So, in this example, you type in “tb” and it will replace the tb with the HTML from the snippet. Save the file and you have your first snippet.
Open an ASPX page in Visual Studio and somewhere in the HTML type in your shortcut (you must be in Source View) and hit tab. If your snippet was set up successfully you should see your HTML code now appear!
Adding Literals
Obviously, as it is now, it’s not very helpful since the comment, the Label text and the control IDs will always be the same. Let’s fix that so it’s a little more dynamic.
Inside the XML for your snippet there is an area named “Definitions“. In this section you can set up variables (called a “Literal“). These variables can be editable (Editable attribute) or read-only (set Editable=”false”). You can provide a tooltip for them and a default value as well as set up a function (which is outside the scope of this discussion). Once you have these variables set up (remember to set an ID), you can call these from the Code with a “$”.
In the above snippet, I want to set a variable (or Literal) for a couple things. I want a variable to hold the Text of the label (the friendly description of the control). I am also going to use that same variable for the beginning and ending comment. Here’s how I can set that up. First, I need to set up the Literal inside the <Declarations></Declarations> section.
<Declarations> <Literal Editable="true"> <ID>Text</ID> <ToolTip>Text</ToolTip> <Default>Text</Default> <Function></Function> </Literal> </Declarations>
This is an editable Literal that is simply called Text. In my code I’m going to replace the words “First Name” with this literal. My snippet Code now looks like this.
<Code Language="html"><![CDATA[<!-- $Text$ --> <div class="ff"> <asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" CssClass="lbl">$Text$:</asp:Label> <asp:TextBox ID="txtFirstName" CssClass="tb" runat="server"></asp:TextBox> </div> <!-- END $Text$ --> ]]></Code>
Now if you save it, go back to Visual Studio and type in your shortcut and then tab you will see a highlighted area for the text. Hit tab again and type in something (like “First Name”) and you will see the comments and the label text update to the words “First Name”. (Tab will cycle through all variables in the snippet, which you’ll see in a second)
This is better, but my controls still have the ID of FirstName. So I’m going to create another Literal in the Declarations section to store the control ID. I want the prefix to be the same (“lbl” for Labels, “txt” for TextBoxes, etc) so I’ll create a literal for just the Field Name. My Declarations now looks like this:
<Declarations> <Literal Editable="true"> <ID>Text</ID> <ToolTip>Text</ToolTip> <Default>Text</Default> <Function></Function> </Literal> <Literal Editable="true"> <ID>CtlID</ID> <ToolTip>ID for the Control</ToolTip> <Default>FirstName</Default> <Function></Function> </Literal> </Declarations>
And the Code looks like the following:
<Code Language="html"><![CDATA[<!-- $Text$ --> <div> <asp:Label ID="lbl$CtlID$" runat="server" AssociatedControlID="txt$CtlID$" CssClass="lbl">$Text$:</asp:Label> <asp:TextBox ID="txt$CtlID$" CssClass="tb" runat="server"></asp:TextBox> </div> <!-- END $Text$ --> ]]></Code>
Notice I changed all instances of “FirstName” with the new variable (Literal). Now when I save it and call it with my shortcut the HTML will appear with the words FirstName highlighted. You can tab to the first instance and change it to something like “LastName” and all instances of FirstName will change to LastName. The comment and label text will stay the same until you tab to it and change it. You get the idea.
By using these Literals you can do much more. Within my textbox snippet I also have Literals set up for the textbox class (ID is tbClass), the label class (ID is lblClass) and a class for the wrapping div (ID is divClass). The defaults for each of these is the same as my sample HTML above.
This post I just scratched the surface of Code Snippets. Again, I have snippets set up for each kind of form field. I also have a different snippet if the control is required (so for this TextBox example, my shortcut is rqtb and it adds a required validator automatically. It also adds a required class to the label. It uses the Text for part of the Validation Error message (you can download both of these snippet files below).
it doesn’t have to stop there, say you have a set of fields you use for almost every form, you could easily set up an AddressForm snippet. You can also create an email textbox snippet that will add the reqular expression validator as well.
Since I’ve been using Code Snippets the time I spend creating these mundane forms has been drastically cut! Give them a try! I’d love to hear what you’ve come up with in the comments section.
Code Snippets are just part of my daily workflow. I use snippets to build the forms. I use App Themes to assign global properties to controls. I’ll cover this in more detail in a later post.