Archive for the 'ASP.net Development' Category

Simulate collapsed borders with DIVs

I had a situation where I wanted to have a number of boxes, arranged in rows of up to 3, in a table-like layout, but using floated DIVs instead of a table.  The problem is, when you add borders around the boxes using DIVs, they “double up” where DIVs are next to each other.  Using a table layout instead, you could specify border-collapse:collapse; and that situation goes away.  It does not appear to do so for DIVs.  Here’s an illustration:

floatingboxes_problem

Notice the area in the green rectangle.  The borders where the DIVs adjoin are clearly visually thicker than the outer borders where no other DIV adjoins.

My initial styling looked like:

            div.boxcontainer {
                width: 561px;
                font-size:large;
                text-align:center;
                background-color:#ffffff;
                float:left;
                margin-left: 10px;
            }

            div.campaignbox {
                float: left;
                width: 185px;
                height: 185px;
                background-color: #def;
                margin:0x;
                padding:0px;
                border: 1px solid #aaa;        
            }                
                
            div.oneLine {
                margin-top:80px;
            }
            div.twoLines {
                margin-top:70px;
            }
            div.threeLines {
                margin-top:60px;
            }
            div.fourLines {
                margin-top:50px;
            }
            div.fiveLines {
                margin-top:40px;
            }

And my example markup for the boxes shown in the image above like this:

<div class="boxcontainer">

    <!-- insert new items here, at the top of the list: -->

    <div class="campaignbox">
        <div class="twoLines">
            <a href=".">My top-left<br />bx</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="threeLines">
            <a href=".">Example<br />three<br />liner</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="oneLine">
            <a href=".">Cool Stuff Here</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="threeLines">
            <a href=".">Well<br />hello<br/>there</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="fiveLines">
            <a target="_blank" href=".">This<br />Box<br />Has<br />Much<br />to Say</a>
        </div>
    </div>

</div> <!-- boxcontainer    -->

After some googling and a bit of trial-and-error, I adapted this technique for my own use.

Basically the only thing I needed to change was the campaignbox style.  I replaced the border attribute with the box-shadow as described in the article I linked above:

            div.campaignbox {
                float: left;
                width: 185px;
                height: 185px;
                background-color: #def;
                margin:0x;
                padding:0px;
                  /* And here comes the trick to collapse
                     the borders.  Based on: http://codepen.io/Hawkun/pen/rsIEp */
                  box-shadow: 
                    1px 0 0 0 #AAA, 
                    0 1px 0 0 #AAA, 
                    1px 1px 0 0 #AAA,   /* Just to fix the corner */
                    1px 0 0 0 #AAA inset, 
                    0 1px 0 0 #AAA inset;
            }

Everything else stayed the same, but now my borders are properly collapsed, as shown below:

floatingboxes_fixed

Unbinding events using jQuery

Recently, I was trying to use jQuery’s .Unbind() function to remove an onclick event handler that was was being bound elsewhere, out of my control. (Basically I wanted to suppress a “click to add a new item” link to force something to be read-only in a 3rd party app.) Frustratingly, I could not seem to get the Unbind() to take effect. I knew my selector was okay, because I could change the background-color of the item I was targeting without issue.

Eventually I googled it and found other people with the same problem. Turns out, jQuery only tracks event handlers that have been bound using jQuery. So, if the event handler was bound declaratively in the HTML markup (or output by some other system/framework), Unbind() won’t touch it (doesn’t know about it unless you used Bind() to add it).

The workaround solution is to use .removeAttr(eventname), such as .removeAttr(“onclick”). This worked for me and stopped me from banging my head on the wall any further. Hopefully it helps you, too.

Top 20 Essential Firefox Add-ons for Web Devs

Here’s a handy listing of 20 Essential FF Add-ons for Web Designers (and Developers, IMHO).

Some of these I already know about and use a few (Firebug, Web Developer, IE Tab, YSlow), but I intend to add a few more to toolbox (Window Resizer, Page Diff, CSS Viewer).  The rest seem to either not very useful to me personally, or are duplicates of functionality I already get from Firebug and/or Web Developer, but hey, YMMV!

Be sure to hit up the hyperlink above for the full blog post!

Breaking news, C# 4.0 finally catches up to Classic VB!

This bit of nostalgic humour will be lost on n00b developers, or anyone lucky enough to have missed out on developing in VB6 (or older–I think these features were introduced in VB4 or 5, but can’t recall for sure).

C# has finally decided to embrace optional parameters and named arguments!

That’s right.  It only took 4 versions to catch up to what you were doing well before the .NET days.  Oh well, better late than never!

Of course, you could at least partially work around this in C# 3.0 and older by putting the method implementation in the most verbose signature version of your method and creating any number of overloads needed.

Using the example from the blog posting linked above (please read it before continuing), you’d create:

//main method with all the parameters and full implementation
public void SomeMethod(int a, int b, int c)
{
/* put the actual implementation here */
}

//overload to omit the c parameter and default to 100
public void SomeMethod(int a, int b)
{
SomeMethod(a, b, 100);
}

//overload to omit the b and c parameters and use the defaults 50 and 100, respectively
public void SomeMethod(int a)
{
SomeMethod(a, 50, 100);
}

However, if we then want an overload that omits the b parameter only, we run into trouble.  If we try this:

public void SomeMethod(int a, int c)
{
SomeMethod(a, 50, 100);
}

We would end up with a compile error, since the signature of this overload would be the same as the first overload I declared above, namely:

public void SomeMethod(int, int)

If a, b, and c were of different datatypes, we could declare any combination of parameters, but this example of all int’s does demonstrate the weakness of this approach, and why the new optional parameters and named arguments is so exciting!

Patterns and Practices Application Architecture Book v2.0

From Scott Gutherie: Patterns and Practices Application Architecture Book is now available online (for free) and in print: http://bit.ly/dzpvJ

 

Some ASP.NET 4.0 Compatibility and Enhancement info

Scott Gutherie posted some interesting tidbits about the upcoming ASP.NET 4.0 this afternoon:

  • ASP.NET 4.0 is additive over 3.5, nothing dropped. There are nice API/behavior improvements, but existing code all still works
  • NET 4 is a full release with a new CLR version # (unlike 3.5). Here is a blog post about that http://tinyurl.com/4multi
  • Despite being side by side and a new version number, the features in 4.0 it are still compatible so it is easy to upgrade
  • Controls in ASP.NET 4 have updated markup/rendering for easier CSS. eg: <asp:menu> now uses <ul><li> elements
  • New 4.0 projects by default use CSS rendering/output of controls. Upgaded projects can still use old rendering, avoiding breaking changes
  • ASP.NET 4.0 control output (css vs. tables) & ID generation modes can be configured for any project w/ <pages> section in web.config
  • The goal is no more need for CSS control adapters. ASP.NET controls in 4.0 now output clean markup by default
  • ASP.NET 4.0 controls have a ClientIDMode property (which is inherited from parent, so you can set once and/or override)   [I previously blogged about this]
  • ClientIDMode can be “static” – which means id you set is what is output to client. No more ID concatination. Ideal for CSS/JS
  • If ClientIDMode is “predictable”, id values are concatinated but clean (no more ctrl_). Better for nested list controls
  • Yes – ASP.NET 4.0 and .NET 4.0 Beta 2 will support a “go live” license. Really, really soon now… stay tuned 🙂 [my emphasis, not Gutherie’s]
  • 10 Features why ASP.NET 4 is better for public websites” – http://tinyurl.com/asp4improvements

[Bonus item not tweeted this afternoon:] URL Routing with ASP.NET 4 Web Forms

Sounds like some great improvements coming!

Printing, then refreshing the form

On one of my pages, I have some data inside an ASP.net Repeater, that I have done custom data-paging in to break up a report view into chunks.  However, when I print it, I want to print the whole thing at once.  Here’s what I came up with.

First the C# code for the Print button: (Code)

printingcs

In a nutshell, it’s forcing the report section of the page to render with paging disabled (show the whole report), and then calling a javascript function defined in the page itself which prints the page and then re-submits the form to re-render the paged version of the report.  Here’s the javascript portion:  (Code)

printingjs

This is pretty straightforward, other than the delay part.  When I initially tested this in FireFox without the delay, it worked great. Then I switched over to IE7 and noticed that the submit was occurring before IE could bring up the Print Page dialog and so it never printed (basically it did nothing other than flicker the page a bit due to the two postbacks).  So I did a quick google search on how to delay in javascript and used this as a guide.


Scott’s recent tweets…