PeteL's Blog : Code Samples

Setting X-UA-Compatible with ASP.NET Pages

PeteL — Wed, 15 Apr 2009 18:47:00 GMT

I got an email today asking about the best way to go about adding the X-UA-Compatible tags on ASP.NET pages where you’ve got a master page, and may want to over ride the X-UA-Compatible tag in some content pages, but not others.

After playing around with it in Visual Studio for a few minutes, I pulled together the following scenarios:

Access To The Server

The optimal way to do this, if you have server level access, is to add the IE=EmulateIE7 as an HTTP Response Header from the server. Then, any pages served from that server will be rendered in IE7 mode. If Internet Explorer finds the X-UA-Compatible tag in both the HTTP Response Header, and as a META tag, the META tag will win out. Thus, if you've added the IE=EmulateIE7 to the server, you can over ride it by using the following code snippet:

protected void Page_Load(object sender, EventArgs e)
{
     HtmlMeta xuac = new HtmlMeta();
     xuac.HttpEquiv = "X-UA-Compatible";
     xuac.Content = "IE=EmulateIE8";
     Header.Controls.AddAt(0, xuac);
}

One quick note about the Page_Load method, you'll note I use the Header.Controls.AddAt(0, xuac) method. The X-UA-Compatible tag needs to occur BEFORE any code on the page is run, if it doesn't IE will ignore the X-UA-Compatible tag; so it's best to makes sure this is the first tag on the page.

No Server Access

If you don't have access to the server, and you want to put the X-UA-Compatible tag in the ASP.NET MASTER page, you could do something like this:

In the master page, I'd create a Content Place Holder:

<asp:ContentPlaceHolder ID="cphMeta" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</asp:ContentPlaceHolder>

Then, in the individual pages, where you want to override, and go to IE8 standards, you'd insert

<asp:Content ID="Content1" ContentPlaceHolderID="cphMeta" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</asp:Content>

ReMIX: Presentations in PDF & Source for VS2008 Demo

PeteL — Thu, 28 Jun 2007 02:02:00 GMT

Yep, the internet is on! I think most of the comments I got yesterday all revolved around the fact that I posted all my presentations in PPTX format. I work for Microsoft, and well, I use PowerPoint to create my presentations. I figured most people, even if they didn't have PowerPoint on their machines would at least have the viewer so they could see the slides, but it sounds like quite a few people would rather have a PDF or some other format. So, here you go!

TechEd: Top 5 Web Blunders
ReMIX: Building Your Own Video Site
ReMIX: Implementing Rich UI
ReMIX: A Tour Around VS2008
ReMIX: Search Engine Optimization for Rich Media

Note that these are stored on my personal website, so I can't guarantee how long they'll last as they're not on an official Microsoft server.

I've also included with this post the source to the VS2008 demo that I did. I had to swap the pictures out and replace them with corporate clip art, but the rest of the content is the same. I included the source for what I started with, and the source that I finished with so that you can see where I started, and where I finished. If you want to follow along, you can watch the original demo at the MIX site

ReMIX: Search Engine Optimization For Rich Internet Applications

PeteL — Tue, 26 Jun 2007 00:06:00 GMT

I think that this was my favorite session I did while doing all my ReMIX presentations. It was the one I found most interesting, and most relevant to the work that I do, and see many web developers and designers doing every day.

I'm not sure if there is video for this session, but if it shows up, I'll be sure to link to it. In the mean time, I've included the slides for you to check out, and I'll try to get a blog post out about in the next week or two summarizing the info in the deck.

ReMIX: Building Your Own Video Site

PeteL — Tue, 26 Jun 2007 00:01:00 GMT

In Amsterdam and Zurich, I presented a session called Building Your Own Video Site. It was pretty cool, but sadly, the one hour we had to do the session, there was no real way to build the application up from scratch, so we just used a pre-built sample, and added some new UI and features to it.

The site is available to play with today on the MIX07 servers at http://mixer1004.mixsandbox.com and you can see the slides and get the entire video from the MIX07 site. I would include the slides that I used here, but the PPTX is about 10megs, so I'd suggest getting it from the MIX07 site where there's a bigger pipe, and more edge servers.

ReMIX: Using Visual Studio 2008, codenamed Orcas

PeteL — Mon, 25 Jun 2007 23:57:00 GMT

I presented this session both in Amsterdam and in Zürich, though I managed to lose my notes in Zürich and had do to a number of the demo's by the seat of my pants which was a bit of a challenge.

In any event, it was based on a session by Omar Khan of the VWD team that he presented at MIX07, called "Using Visual Studio Codename Orcas to Design And Devloper Rich AJAX Enable Web Sites"

ReMIX: Implementing Rich UI For Web Applications

PeteL — Mon, 25 Jun 2007 23:51:00 GMT

In Amsterdam at ReMIX, I presented "Implementing Rich UI for Web Applications" where I showed how to deliver richly interactive web experiences with animation, video and more using Silverlight and Expression.

It was based on a session from MIX07 by Joe Stegman titled "Building Rich Web Experiences using Silverlight and JavaScript for Developers"

Web Blunders: The Top 5 Biggest Mistakes On The Web

PeteL — Mon, 25 Jun 2007 23:45:00 GMT

At TechEd this year, I presented a session where I presented my top five pet peeves on the web, the biggest and easiest problems to avoid on the web. With how easy it is to share content on the web, I felt that these top five things were the best and easiest to get rid of.

In order, I felt they were:

5. Unprofessional Site Design
4. Lousy Content
3. Poorly coded HTML/CSS/JavaScript
2. Inappropriate use of Rich Content
1. Not Being POSH

I've attached my slides below, so check them out, and let me know what your pet peeves are!

Javascript Debugging In Visual Web Developer "Orcas"

PeteL — Wed, 14 Mar 2007 04:20:27 GMT

Up until now, we've never had a great set of JavaScript debugging tools, but "Orcas", the next version of Visual Studio will have some great new JavaScript debugging tools. While Visual Web Developer "Orcas" hasn't shipped yet, there is a CTP available that you can download and install.

The VWD team (and my old team) has posted on their blog a couple of blog posts about how to do JS debugging in VWD Orcas. It's worth checking out.

Jscript Intellisense in Orcas: http://blogs.msdn.com/webdevtools/archive/2007/03/02/jscript-intellisense-in-orcas.aspx
Jscript Intellisense in March CTP – Gotchas & Workarounds: http://blogs.msdn.com/webdevtools/archive/2007/03/07/jscript-intellisense-march-ctp-gotchas-workarounds.aspx
Jscript Debugging in Visual Web Developer 2005: http://blogs.msdn.com/webdevtools/archive/2007/03/08/jscript-debugging-in-visual-studio-2005.aspx
Jscript Debugging in Visual Web Developer Orcas: http://blogs.msdn.com/webdevtools/archive/2007/03/09/jscript-debugging-in-visual-web-developer-orcas.aspx

Generating OPML's with the RSS Platform

PeteL — Sat, 17 Feb 2007 01:04:22 GMT

Just before I headed up to Web Directions North, I wrote a little chunk of code to help me do a system back up. Enough people at work have been losing data on their hard disks, so I decided I wasn't going to have that happen to me. I picked up a NAS storage device, 2 500gig hard drives, and got it all set up at home. It works quite nicely. I set up SyncToy to back up all the data that I find important, and run daily or weekly.

But one thing was not getting back up that I was a bit worried about. My RSS feed list. I couldn't find where the RSS platform stores the OPML list, or even if it does, so I figured, since it's an open platform, I'd just write a method that would create the OPML list for me! Once I got the initial work done, it was really easy.

So, I figured I'd share the code. This code will return a string, that is the OPML list of all the feeds that you've subscribed to using the RSS Platform. Sure you can just go into IE, and choose File/Export, but that's a manual process, I wanted something automatic.

using System;
using System.IO;
using System.Collections.Generic;
using System.Text;
using Microsoft.Feeds.Interop;
using System.Collections.Specialized;

namespace BackupHelper
{
    class OPMLBuilder
    {
        public string Result
        {
            get
            {
                return sbResult.ToString();
            }
        }

        StringBuilder sbResult;

        public OPMLBuilder()
        {
            sbResult = new StringBuilder();
            sbResult.Append("\r\n \r\n  \r\n \r\n \r\n");
            FeedsManager mgr = new FeedsManagerClass();
            IFeedFolder root = (IFeedFolder)mgr.RootFolder;
            BuildFeeds(root, 0);
            sbResult.Remove(sbResult.Length - 13, 13);
            sbResult.Append(" \r\n\r\n");

        }
        public bool WriteOPML(string filename)
        {
            try
            {
                //Pass the filepath and filename to the StreamWriter Constructor
                StreamWriter sw = new StreamWriter(filename);

                //Write a line of text
                sw.WriteLine(sbResult.ToString());

                //Close the file
                sw.Close();
                return true;
            }
            catch (Exception ex)
            {
                return false;
            }
        }

        private void BuildFeeds(IFeedFolder parent, int n)
        {
            string spacing = new string(' ', n+1);
            if (n > 0)
            {
                sbResult.Append(spacing + "\r\n");
            }

            foreach (IFeed feed in (IFeedsEnum)parent.Feeds)
            {
                sbResult.Append(spacing + " \r\n");
            }

            foreach (IFeedFolder folder in (IFeedsEnum)parent.Subfolders)
                BuildFeeds(folder, n + 1);

            sbResult.Append(spacing + "" + "\r\n");
        }
    }
}

Hope some of you find that useful!

Sorry it's taken so long to get it up, after getting back from Web Directions North, I seem to have gotten hit with some kind of cold/flu or something that has knocked my on my butt. I've been at home all week. I've done about 30 emails all week, and usually I'm about 50-80 a day! If that gives you any idea of how I've been feeling. Today is the first day I've felt somewhat human again.

Web Design World Session: IE7 From CSS to RSS: How to Take Full Advantage

PeteL — Wed, 13 Dec 2006 23:51:00 GMT

I just finished my session titled "Internet Explorer 7 From CSS to RSS: How To Take Full Advantage" here at Web Design World, and it went over pretty well. Cameron Moll is currently doing a session right now, so we did lose quite a few people to him, but he's an excellent speaker and is showing some really cool CSS and design stuff, so I understand why they're over there.

I talked about some of the cool features around IE7, like what quirks mode is vs. standards mode; how to use RSS on your site, how to implement OpenSearch on your page, and then finally some of the cool CSS fixes that we made for IE7.

I've uploaded my slides along with this post so that the info can be shared. I'm don't have the samples that I showed available, but much of the info that I showed is included in the slides. If you're looking for something specific, let me know and I'll try to get it up there for you!

Random Image Loading With JavaScript

PeteL — Sun, 19 Nov 2006 03:52:00 GMT

I'm teaching the From Prints To Online: Updating Your Website class today at PCNW, and I had someone ask how they could random show an image on their home page. All of the students aren't really web designer or developers, but fine art photographers. They know and understand photography like the back of their hands, but not HTML, CSS or JavaScript.

Normally with a big class, I would have said it's a little too hard to teach to all 12 students (remember, these are not people who understand code). But, I've got a small class this weekend, so I figured why not. I also figured I might as well post it for those who are interested.

In the head, you'll need to paste the following code:

    function newImage()
    {
        document.getElementById("mainImage").setAttribute("src", MyImages[Math.round(Math.random()*3)])
    }
</script>

You'll obviously need to change the file names to what ever files you want to load.

In the <body> tag, you'll also need to add onload="newImage()", so you get something like <body onload="newImage()">

Finally, you need to make sure that you have an image with an ID of "mainImage" on your page somewhere. If you don't, you'll get JavaScript errors.

Hope this helps!

Live From Redmond: Creating Real World Web Application UI with Master Pages, Themes and Site Navigation

PeteL — Tue, 08 Aug 2006 04:08:00 GMT

A few days ago, I presented a Live From Redmond: Creating Real World Web Application UI with Master Pages, Themes and Site Navigation in an on demand web cast. For my first presentation, it went pretty well. I had never used Live Meeting before, and had only had one Live Meeting "Goofup", where I forgot to shift over to the desktop, instead of the slides.

The presentation went well, but admittedly, there was a lot of information presented, an hour was really way too short to do everything that I wanted to talk about. In fact, I cut out a good chunk of stuff as I was moving through in order to get through to site navigation and themes in the last few minutes.

In any event, I had said that I would offer the sample for download after the presentation, and so here it is. You can download it at http://www.nocommonground.com/blogSamples/finishedsite.zip. It's about 6 megs to download but contains everything that I demo'ed in it's completed form, so you can use that as a sample for where you want to go.

File Checksum

PeteL — Fri, 07 Apr 2006 05:37:00 GMT

I brought a neat idea to my lead earlier this week, and lo and behold, he started working on it! He got the hard part done one morning when he was in before everyone else, but now I get to implement this idea.

With the new designer surface, I wanted to create a test bed that used a known set of HTML and ASPX files and checked their design time rendering. The idea being that we'd have a set of "golden" images, and would run our test bed against these golden images. If anything changed, we'd fail that test and could look at the image to find out what had changed in the rendering and figure out if its a bug or an actual planned change. I've got a collection of about 600+ web sites, and I wanted this test to be pretty dynamic, so adding new tests took next to no work, or pulling them out was next to no work.

John got the first part done this week, the designer surface image capture, and he also created an image comparer. It looks at the two bitmaps, and compares them pixel by pixel. If they're different, it creates a new file with the different pixels highlighed in lime green. As I was working on it today, I decided that I don't want to compare every pixel, as more often than not, the pixels will be the same, so instead, I wanted to find a way to create a checksum of the file, and only compare if the check sums are different. I did a bit of searching online, and came up with the following code.

    Function GetChecksum(ByVal file As String) As Byte()
        Dim md5 As New System.Security.Cryptography.MD5CryptoServiceProvider()
        Using fStream As New System.IO.FileStream(file, IO.FileMode.Open)
            Dim bytes() As Byte = md5.ComputeHash(fStream)
            fStream.Close()
            Return bytes
        End Using
    End Function

    Function ToHexString(ByVal bytes() As Byte) As String
        Dim hexStr As New System.Text.StringBuilder()
        Dim i As Integer
        For i = 0 To bytes.Length - 1
            hexStr.Append(Hex(bytes(i)))
        Next i
        Return hexStr.ToString()
    End Function

Super Sweet! You feed in the file and it feeds out an array of bytes. For ease of comparison and human reading, I'm having the tool convert the bytes to hex so that I've got something that I can see and compare.

This thing saved me about 8 minutes for only 6 sites. I went from comparing 6 sites in about 10 minutes to 6 sites in less than 2 minutes!

There's A Hard Way & An Easy Way: Getting/Reading HTTP Responses

PeteL — Fri, 03 Mar 2006 20:08:00 GMT

Yesterday, after somone asked on the forums how to do a web request in an application, I posted some code that I had written a while ago, and I got some great feedback on it. It solved a problem that I was working on, and did exactly what a few people have been asking for.

As it turns out, that was the hard way of doing things. If you don't count { } on separate lines, that took 9 lines of code. Someone yesterday pointed out how to do it in 4.

So I present to you, 4 lines:

        public static string GetHTML(string url, string proxy)
        {
            System.Net.WebClient client = new WebClient();
            if (!String.IsNullOrEmpty(proxy))
                client.Proxy = proxy;
            return client.DownloadString(new Uri(url));

        } 

The one difference on this, it that in the one from yesterday, I was able to put a timeout of 2.5 seconds. If the page hadn't downloaded in that, it failed. With the code I've posted today, there doesn't seem to be a method or property to set that value.

Getting/Reading HTTP Responses

PeteL — Thu, 02 Mar 2006 20:16:00 GMT

There has been a semi-frequent request on forums and such for people who want to do an HTTP request from their application (either web or client) and get the response as a string back so that they can process it from there. I had some code that did something similar, so I figured I'd modify it and post it here for all to use.

This will work in any application, either Windows Client, or as part of a Web Application (if you wanted to create a magic proxy site).

using System;
using System.IO;
using System.Net;

namespace HTTPReader
{
    class HTTPReader
    {

        public static string GetHTML(string url, string proxy)
        {
            
            System.Net.WebRequest wr = System.Net.WebRequest.Create(url);
            wr.Timeout = 2500; // 2.5 seconds
            if (!String.IsNullOrEmpty(proxy))
            {
                System.Net.WebProxy myProxy = new System.Net.WebProxy(proxy, true);
                wr.Proxy = myProxy;
            }
            using (System.Net.WebResponse wresp = wr.GetResponse())
            {
                Stream s = wresp.GetResponseStream();
                using (StreamReader sr = new StreamReader(s))
                {
                    return sr.ReadToEnd();
                }
            }
        }
    }
}

Edit1: You know, one thing I love about the community, you tell me when I'm wrong, or can do things better. This is slightly updated after poppyto provided a few suggestions! Thanks!

Edit2: Thanks to toub, I've added his suggested changes. It's fair to note, that I'm not catching any exceptions in here, and that is intentional. You could wrap this in a try catch block, but I'd rather you handle this how you want your app to deal with it.