Archive

Archive for the ‘Visual Studio 2005’ Category

IE6 Causes Z-Index Nightmares…

Rather than update the post from yesterday, this chaos deserves it’s own post.

Yesterday, I discussed layering Modal Popup Extenders with the Update Progress controls.  In IE7, FF3, and, well, most everything except IE6, it works like a champ as-is.

The “bug”?  After quite a bit of research, the problem revolves around the following issues:

  • lack of support for the { position: fixed } property,
  • lack of support for the { right; bottom} properties,
  • … unreliable suport for {height: 100%, width: 100% } properties,
  • general pain and suffering
  • <SELECT> tags (or ASP:DropDownList objects) exist above any other z-index,

I’m sure there were other issues.  Really.

After spending a good part of the day trying code, looking it up on QuirksMode, and trying again, I have somewhat of a solution; however, I still greatly dislike how it works in IE6.

On the MasterPage, I have a single UpdateProgress that isn’t associated to a specific UpdatePanel.  Therefore, it’ll catch all Async postbacks (and I only have ONE UpdateProgress control).

<asp:UpdateProgress

runat=”server” DisplayAfter=”100″ ID=”UpdateProgress”>

<ProgressTemplate>

<div class=”UpdateProgressModalBackground”></div>

<div class=”UpdateProgressPanel”>

<h3>Please wait…</h3>

<img src=”Images/ajaxbar.gif”
alt=”Please wait…”

style=”text-align: center; width: 100%; height: 10px; />

</div>

</ProgressTemplate>

</asp:UpdateProgress>

This, again, references our UpdateProgressModalBackground and UpdateProgressPanel styles.  These two styles are unchanged from the post yesterday.  Here they are again for reference:

/* UpdateProgressPanel is above EVERYTHING ELSE,

even other modal popups */

.UpdateProgressPanel

{

       z-index: 99999999;

       background-color:#fff;

       color:#fff;

       width: 200px;

       text-align: center;

       vertical-align: middle;

       position: fixed;

       bottom: 50%;

       left: 45%;

       padding: 10px;

       border: solid 2px #5D7B9D;

}

 

.UpdateProgressModalBackground

{

    z-index: 99999998;

    background-color: #6D7B8D;

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    min-height: 100%;

    min-width: 100%;

    filter: alpha(opacity=50);

    opacity: 0.5;

    -moz-opacity: 0.5;

}

The UpdateProgress and these two classes work just fine in IE7+, FF2+.  So, now to fix IE6..

So, what’s the difference in IE6?  Well, we can’t use the positioning attributes in the above classes–-they won’t work properly. 

Issue #1 – Fitting the Popup and Background Without Positioning Attributes

Searching the web, I found an article by Damien White discussing his his same pains with this.  His solution involved using the IE-specific CSS “expressions” to calculate the height and width of the window.

height:

expression(

        document.documentElement.scrollTop +

        document.documentElement.clientHeight + “px”);

 

width: expression(document.body.clientWidth + “px”);

However, at least for me, Damien’s expressions wouldn’t handle scrolling down the page.

Damien explains:

The thinking behind this was to take the window height (which document.documentElement.clientHeight gives us) and then add the scroll top position, which will give us the upper portion if the user scrolls up.  The problem shows itself when the user scrolls down; that area is not covered.  The good thing about this is that I didn’t need to mess with the body height, but the solution isn’t optimal in the long haul.

That’s a bad deal because that’s the whole point!  Reading a bit more, there was a comment from Kunal Mukherjee on Damien’s post that solved the problem.

Kunal’s expressions looked at the scrollHeight of the window as compared to the offsetHeight and returned the larger.

height: expression(

document.body.scrollHeight > document.body.offsetHeight
? document.body.scrollHeight
: document.body.offsetHeight + ‘px’ )
;

Actually, that works really well. Cool.

Finally, I’d recommend, as Damien did, breaking out your CSS into two files—one for “IE6” and one for everyone else.  This is easily done using the IE-specific conditional statements.

<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”App_Themes/ie6/ie6.css” />
<![endif]–>

I also included !important flags on each of the properties in the ie6.css file—just to be safe.

Issue #2 – IE6 Pushes <SELECT> tags above everything else…

This is where the solution gets dicey; however, I’m relying on Kunal’s solution again.  In his comment, he pointed out a way to hide <SELECT> tags in IE6 without causing the disappearing act that the ModalPopupExtender causes—cover them with an IFRAME.

To me, this hack seems… sketchy at best, but it works.

In the ProgressTemplate of the UpdateProgress control, add in the IFRAME.

<iframe id=”UpdateProgressHideSelect”></iframe>

In the default.css (or the non-ie6.css, whatever you’ve called it), I recommend setting the iframe’s style to {display: none}—it isn’t needed outside IE6, don’t render it. ๐Ÿ™‚

On the ie6.css, add the UpdateProgressHideSelect in—along with another expression to place the iframe over the entire page (like the standard BackgroundCssClass of a ModalPopupExtender):

#UpdateProgressHideSelect

{

    z-index: 15000;

    position: fixed;

    top: 0;

    left: 0;

    background-color: #fff;

    border: none;

    filter: alpha(opacity=0);

    -moz-opacity: 0;

    opacity: 0;

    height: 100%;

    width: 100%;

    display: inline !important;

}

 

* html #UpdateProgressHideSelect

{

    position: absolute;

    height: expression(

document.body.scrollHeight > document.body.offsetHeight

? document.body.scrollHeight

: document.body.offsetHeight + ‘px’);

}

The z-index of 15000 for the iframe ensures that it appears above the normal 10000 of a ModalPopupExtender panel; however, under our crazy high UpdateProgress control.

Problem solved—for now.

Here’s how they look, side by side.

FireFox 3:

FireFox 3 Output

Nice and clean, properly centered given the size of the box and window size.  Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.

IE 7:

IE7 Output

Output as expected and where expected.  Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.

IE 6:

IE6 Output

Output as expected—basically where expected.  Drop down lists are hidden behind the IFRAME to prevent input.  Other controls are visible, including the MPE, but behind the background.

What fun!

AnkhSVN 2.0 Released – How’s it look?

When I first started using Subversion full time for all of my personal projects, I stuck with the VisualSVN server and AnkhSVN as a Visual Studio client.  Both were free, easy to install, and easy to use.

However, after a few weeks, the AnkhSVN client could almost be called “annoying.”  It trampled over the existing SCC plugins for SourceSafe (for work) and made a mess out of several of my project uploads.  I ended up going back to using TortioiseSVN and doing everything through Explorer.

When AnkhSVN 2.0 was released, I figured I’d give it another shot.

The site claims quite a bit—including several unique additions:

  • Pending changes window; subversion status and commands available in one place
  • Full support for Visual Studio 2005 and 2008; AnkhSVN is now a SCC package instead of just an addin
  • Better log viewer
  • Merge support
  • Property editor
  • AnkhSVN now supports most project types previously unsupported via the SCC api
  • All solution explorer actions (rename, copy&paste, drag&drop) keep subversion history now
  • Enhanced build process and setup
  • Automatic check for updates
  • And last but certainly not least end user documentation

All of those look great—especially the SCC package and changes window.  But how does it compare once installed?

After installation and starting up VS2008, everything looks normal.

Brief Look

Pending Changes Window

The new pending changes window is FANTASTIC—much improved over the old 1.x versions.  I did run into a snafu when trying to resize the window where the scrollbars didn’t update on the screen; however, I’m not sure if it’s a VSS or AnkhSVN issue.

SCC Package

Under Options > Source Control, AnkhSVN shows up just like it should.

What does boggle me is that all of the Subversion commands and menus are available no matter what—even when the VSS SCC is enabled.  It still has the stink of VSS and SVN trying to step on one another (“pick me! control your project with me! no, I’m better! pick me!”).

Log/History Viewer

I really like the new history viewer.  It’s clean and easy to read; however, if you change the options at the top—there doesn’t appear to be a way to “change it back” and see the history again, close the view and review.

Annoyances

  • Opening a project from Subversion (File > Subversion > Open from Subversion) will open a project just fine, copy it down, but never opens it.  You have to go back and open the solution after it’s created the local structure.  Not huge, but annoying.
  • When viewing history; you cannot view the history of a single file (that I’ve found) in the Repository Explorer. 

I’m still planning to give it a whirl for the next couple of weeks and see what happens.  Hopefully over a couple weeks I’ll have more time to code—it’s been a busy July so far!

ReSharper 4.0 Beta Released!

The EAP from Monday (19 May) was elevated from Beta candidate to Beta status later this week—a tremendous step for the tool.  The JetBrains team has been cranking out build after build and the latest few have been great!

If you have been putting off checking out the new ReSharper—don’t wait!  The builds are extremely solid and if you do happen across an issue, submit it up and help the community!

Bubbling up Methods in Composite Controls

A while back, I wrote a couple of articles (here and here) regarding encapsulating the ModalPopupExtender into a spiffy little template control that you could toss onto a page.  It’s worked GREAT over the past few months, however, I hit a snag today.

I needed to call the base ModalPopupExtender’s .Show() method from code behind; however, I hadn’t bubbled that up to the Composite Control.

At first, I expected to simply add a private instance of the MPE (which is assigned to when the control is built) and then add a method to my composite control that calls the .Show() method.

private ModalPopupExtender _control;

public void Show()

{

       _control.Show();

}

That sounds good, but it never fired and the _control field was always null (even though I could step through and it was assigned).

What it needed was a little reminder—a reminder to EnsureChildControls existed before trying to call Show().  Now, a quick update to the code:

public void Show()

{

       this.EnsureChildControls();

       _control.Show();

}

Now I can call the Show() method of the Composite Control and it works like a charm!  Here’s an example (for what I’m working with at the moment) of dynamically iterating through an IDictionary and returning the values in a Modal Popup.

ASPX:

<tiredstudent:ModalPopupTemplate HeaderText=”ERC” runat=”server”

        ID=”PopupDialogBox” DefaultStyle=”YUI” TargetControlId=”fakeButton” />

<asp:Button ID=”fakeButton” runat=”server” style=”display: none” />

Code-behind:

foreach (var entry in results)

{

       sb.AppendLine(string.Format(“<p>{0} – {1}</p>”,

                     entry.Key, entry.Value));

}

 

PopupDialogBox.BodyText = sb.ToString();

 

PopupDialogBox.Show();

 

Basic Benchmarking in ASP.Net

April 10, 2008 1 comment

I’m not sure why I’ve always rewrote this “simple” code—over and over again, project after project.  I should know better, but perhaps time has gotten the best of me (though I’m betting on lazy).

What code might this be?  The basic “stopwatch” for evaluating page performance and outputing the results to Page.Trace. You can do page speed analysis using Visual Studio 2008, but for quick Trace output, I prefer this method.

The class is almost totally private, but could be expanded later on to log to console, log to files, whatever.

public class BenchmarkToTrace

{

private TimeSpan ElapsedTime { get; set; }

       private DateTime StartTime { get; set; }

       private DateTime EndTime { get; set; }

       private Page PageToTrace { get; set; }

       private string TraceCategory { get; set; }

 

       public BenchmarkToTrace(Page pageToTrace, string category)

       {

              PageToTrace = pageToTrace;

TraceCategory = category;

PageToTrace.Trace.IsEnabled = true;

}

 

       public void Start()

       {

              StartTime = DateTime.Now;

}

 

       public void Stop()

       { 

EndTime = DateTime.Now;

ElapsedTime = EndTime – StartTime;

PageToTrace.Trace.Write(

TraceCategory,

string.Format(

“Start: {0} “ + Environment.NewLine +

“Stop: {1} “ + Environment.NewLine +

“Elapsed: {2}”,

StartTime, EndTime, ElapsedTime));

}

}

As far as usage, here’s how I am using the benchmarker to evaluate different data retrieval methods (in this example, measuring Oracle performance):

BenchmarkToTrace bench =

new BenchmarkToTrace(this.Page, “Reports-GetAllBy”);

 

bench.Start();

Reports.GetAllBy(123465789, 3, “2007-2008”);

bench.Stop();

           

bench.Start();

Reports.GetAllBy(123456789, 4, “2007-2008”);

bench.Stop();

When I load up the page, I see the trace log:

BenchmarkToTest Results

Cool, and I won’t rewrite this NEXT time.

Verifying Extensions and MIME Types of FileUpload

April 7, 2008 Comments off

The FileUpload control is REALLY handy to upload files from a client, through the web, into a database table or the web server.  The control wraps up the HttpPostedFile object (into .PostedFile); however, there isn’t a way to “filter” on the fly.  This was a recent discussion in the Microsoft newsgroups today, so I figured I’d work out what it’d take to implement a “better” file upload control.

The control, inheriting the FileUpload class as a base class, implements quite quickly.  I’m sure you could go farther, but this works out nicely.

NOTE: In my experience, filtering by MIME type (aka content type) is much more reliable than parsing out the uploaded file’s file name and trying to grok the extension.  Extensions are far too easily changed. ๐Ÿ˜‰

public partial class BetterFileUpload : FileUpload

{

public BetterFileUpload()

       {

              ValidContentTypes = new List<string>();

}

 

public IList<string> ValidContentTypes { get; private set; }

 

public void AddValidContentType(string contentType)

{

              ValidContentTypes.Add(contentType);

}

 

public void AddValidContentType(string[] contentTypes)

{

              foreach (var contentType in contentTypes)

{

ValidContentTypes.Add(contentType);

}

}

 

public bool HasValidContentType()

{

return

ValidContentTypes.Contains(PostedFile.ContentType);

}

}

This partial class simply adds a few methods and a single property to the FileUpload class—ValidContentTypes.

HasValidContentType looks through the ValidContentTypes and tries to match it to the PostedFile’s content type—then returns a boolean.

Using this code is simple.

To setup a few valid content types, you can either pass them one-by-one or as an array (you could also pass in a collection of some sort and use the ToArray() method to convert it back into an array).  You could also store these in the web.config file or another reusable source to keep the code clean.

protected void Page_Load(object sender, EventArgs e)

{

betterFileUpload.AddValidContentType(“text/plain”);

 

betterFileUpload.AddValidContentType(

              new[] {“application/msword”, “application/pdf”});

}

After the valid content types have been added and we’re ready to fetch the stream from the FileUpload object, we now have a tidy boolean method to check.

protected void ReadFileButton_Click(object sender, EventArgs e)

{

if (betterFileUpload.HasValidContentType())

       {

              InfoLabel.Text = “Valid ContentType: “ +

                     betterFileUpload.PostedFile.ContentType;

}

else

       {

              InfoLabel.Text = “Invalid ContentType: “ +

                     betterFileUpload.PostedFile.ContentType;

}

}

Works well and is reusable!

SVNing in Visual Studio 2008

March 26, 2008 1 comment

At work, we’re still a Visual SourceSafe shop.  It works, don’t knock it.

However, at home, I’ve become VERY happy with SVN.  TortoiseSVN is great to drop and pick up repositories, update, and all that jazz, but I really missed the convenience of having those functionalities in Visual Studio.

I remember Will mentioning that having the VS plugins “dirtied” up the environment with junk.  Maybe, but damn it… a hot key to sync to SVN, apply patches, see differences, etc., to me, is a productivity boost.  Maybe I’m not as hardcore as Will—or I’m just more lazy.

So, after looking around, I found two rather attractive plugins for SVN.

VisualSVN

VisualSVN is pretty darn slick.  The Server itself works very well, adds a beautiful MMC console for managing repositories, and just makes sense.  The VS integration plugin works great and it works hand-in-hand with TortoiseSVN.

I liked the interface for logging messages, checking in, and looking at differences the best.

The downfall—it costs a bit of money, but just a bit.

A personal license (well, and a corporate too, haha) is 49$US per individual.  If you are part of an active open source project, you’re in luck because it’s free (I’m assuming they appreciate the free advertising).

The advantage—while the connector for Visual Studio costs 49$US, the VisualSVN SERVER license is FREE.  That keeps us out of the command prompt for creating and managing the basics.  Good deal.

AnkhSVN

AnkhSVN is a free, open source solution for using SVN with Visual Studio.  Rather than relying on Tortoise, AnkhSVN actually fully integrates into Visual Studio—for Diffs, logging, snap-ins for the repositories, additional Solution explorer windows, and more.

It has the snazzy icons as well.

Unlike VisualSVN, it feels a bit rough. 

The menus are all over the place (the AnkhSVN menu is actually hidden in Tools and then adding the repositories is under File).  It also doesn’t register as a Source Control plug-in with Visual Studio (I’m assuming it’s working AROUND Visual Studio, not through it), so the File > Source Control menu never appears and cannot be used.

So what am I using?

Both.  The VisualSVN server is great and saves me some headaches for setting up repositories—I also love the web interface.  AnkhSVN, while a bit rough, works very well.  I’m using the 1.0.3 Preview release for VS2008, so I’m assuming it’ll continue to improve and I look forward to contributing where I can to that process.  The Server is running on Windows Server 2003 R2 and AnkhSVN works like a champ under both Windows Vista SP1 and Windows Server 2003 R2.