Ryan Ternier

Killer ASP.NET ninja coding monkeys do exist!

Two ASP.NET features that are usually missed or misunderstood...T

Enter the Tilde (~)

Browsing the asp.net forums I notice a lot of people putting the '~' (tilde) character on every control that has some sort src or href.  Many think that the tilde character is a regular character that deals with file locations. Much like: /, ../, ../../ etc.

However, this little angle is actually an ASP.NET character that is a shortcut for"   HttpRuntime.AppDomainAppVirtualPath. (say that 10x in a row). This property refers to the virtual application root - not the root of the web server.  Remember that a Virtual Directory is in fact an Application (Server 2000 / XP). You'll notice that in Vista that the IIS team has gone the better rout and actually calls them "Applications" while still having the ability to have a virtual directory that functions as a directory.

So how do we use this character?

here are some examples.

If my Folder structure is as follow:

  • Website
    • Images
    • CSS
    • Admin

I have a master page within my main website, and content pages in my Admin. One thing newer web developers will do is declare an image like:

<img src="Images/MyImage.png" alt="my Image" />

That works for everything in the root directory, however once you get into the Admin directory - all images are broken.  A way to resolve this is:

<img src="http://weblogs.asp.net/Images/MyImage.png" alt="my Image" />

This can also lead into issues if you have a more complex structure. A quick way to resolve this is:

<asp:image id="myImage" runat="server" ImageUrl="~/Images/MyImage.png" AlternateText="My Image" />

This will always go to the root of your application and then to the Images directory.  This is very useful with Hyperlinks when you are working with multiple directories.

 

Enter the ALT-SHIFT (Really... ALT-SHIFT)

I've heard about this but I've always just stored this away in the back of my mind. This little button combo allows you to select VERTICALLY in Visual Studio.

 

Capture 

So, besides the nice little vertical line, what are the uses of this?

  • Easy way to remove a single line of characters (say Line numbers from an online post) without having to format a bunch of things
  • Easy way to remove comments if you commented out lines (You can use the shortcuts: CTRL E+C to commend and CTRL E+U to uncommented)
  • Quickly change values or remove values in XML.
  • Many many more.

Needless to say it's a beautiful tool that exists in Visual Studio (not just ASP.NET).

Posted: Oct 30 2007, 08:47 AM by Ryan Ternier | with 19 comment(s) |
Filed under: , ,

Comments

Dave said:

I always use absolute paths to my images lik src="/images/xyz.gif". Tilde seems like a waste of CPU cycles. What kind of hit do you take if you have 50 tildes on the same page Request? often wondered about that.

# October 30, 2007 12:11 PM

Ryan Ternier said:

I doubt it has that much of an impact.  I thought the same about $get() and $find() (using in JavaScript) and i've had no time delays.

I traced out doing it with 1000 images and I noticed almost 1 milisecond difference in the rendering time, so I doubt 50 will have any effect.

# October 30, 2007 1:06 PM

Mike Bosch said:

The Alt-Shift key to select vertically also works in Microsoft Word.

# October 30, 2007 1:22 PM

Anderson Imes said:

Besides the fact that "/images/xyz.gif" is not very accurate.  If you install your app in http://www.myapp.com/ this is fine, but if you decide to install your application at http://www.myapp.com/ApplicationRoot/ your url will resolve to http://www.myapp.com/images/xyz.gif, even though it probably now resides in http://www.myapp.com/ApplicationRoot/images/xyz.gif.

The tilde is your friend.

# October 30, 2007 2:28 PM

Joe Chung said:

You don't need Shift and Alt, just Alt.  That keyboard shortcut also works in Word 2007.

# October 30, 2007 3:42 PM

Ryan L. said:

The tilde is just a convenience feature to make your life easier between your dev environment and production environment. You do take a performance hit for using the tilde - its minor on a single request but it can start to add up as your traffic increases. Its very easy to get rid of with find and replace as your website traffic grows.

# October 30, 2007 10:21 PM

Christopher Steen said:

Link Blogs 21 Links Today (2007-10-29) [Via: Matt ] Interesting Finds: October 30, 2007 [Via: Jason...

# October 31, 2007 6:45 AM

Christopher Steen said:

Link Listing - October 30, 2007

# October 31, 2007 6:45 AM

JV said:

I knew this would come in handy. I always tend to forget stuff like "HttpRuntime.AppDomainAppVirtualPath", but I just needed it and remembered that I read something about it yesterday. Thanks ;)

# October 31, 2007 6:50 AM

Patrick P said:

I've also seen alot of new developers (well, new to ASP.NET anyway) use the "~" on controls that aren't server-side.

Ex.

&lt;img src="~/image/myimage.png" /&gt;

As opposed to

&lt;img src="~/image/myimage.png" runat="server" /&gt;

Great post, I never knew about ALT-SHIFT!

# October 31, 2007 10:20 AM

JD said:

I think it's important to point out that to use ~, you must use runat='server' attribute otherwise it won't work. Let's say you use a simple 'image' tag instead of asp:image tag.

# October 31, 2007 10:35 AM

FakeJoel said:

Wasted CPU cycles? Are you people idiots?

# October 31, 2007 10:35 AM

The Village Idiot said:

Hey FakeJoel

I think what Ryan L. is implying is that 50 img tags that have the runat server tag added simply so you can use a tilde for image mapping, is a potential performance penalty you will pay if the only reason is because you can't get your dev environment to match production. RunAt=Server isn't exactly a freebee unless you are able to do some cacheing.

# October 31, 2007 1:26 PM

Ryan Ternier said:

it's true that having runat="server" on any control does incur a performance loss on the server. You should only use the runat="server" if you need to modify that control on the server. If you don't need to modify that control, do not use the runat='server' as it is just a waste of CPU cycles.

# October 31, 2007 2:25 PM

Michael Carr said:

The performance hit you take from using the tilde is probably microscopic compared to the performance hit of accessing the database (assuming you're using a database)...

# October 31, 2007 2:51 PM

Ryan Smith said:

Thanks for the alt-shift command tip.  I can see that coming in handy in the future.

# October 31, 2007 3:23 PM

Chris May said:

Yes, the ~ is very useful, but I agree that I see people using it in regular HTML as if the browser knows what to do with it, when really you can only use it with URLs that are going to be parsed on the server.

BUT... the more IMPORTANT question is... howd you get your VS setup with the dark background??

# November 2, 2007 1:58 PM

Ryan Ternier said:

Hey Chris,

CHeck out: http://idehotornot.ning.com/

# November 2, 2007 2:44 PM

Russ C. said:

Alt Select also works in "Programmers Notepad" and SQL Server Management studio.  It's a life saver at times!

# November 7, 2007 4:58 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)