May2009
22

ASP.NET – Converting C# String to JSON String

by nmgomes

Most web applications display messages to users. Displaying messages is the most effective way to inform user about errors and warnings or to simply display info or success status.

I also believe that most of those web applications renders user messages using HTML elements such as Div, Span or Label.

The others, mainly because their complex layout or business rules, have to render those messages using a different approach: they render each display message as a Javascript function call where the message itself is a function parameter.  Such call could be simply like this:

string.Format("top.addMessage(\"{0}\");", message)

Those of you that already faced this problem won’t learn nothing new but I hope to alert the others and avoid them to face a problem that usually is only detected in advanced develop stage or even production environment.

Problem

The problem turns visible when the display message contains some special characters that prevent the function call to execute and trigger javascript errors.

Typically the characters are “ and ‘ but there are more.

Well, that is not completely correct, only the character “ is problematic, since he is the JSON string delimiter character, but, javascript engines also accept the character ‘ as a delimiter. The best way to avoid problems with ‘ is to ensure that the correct delimiter is used.

By now, you should be thinking that your applications are immune to this problem. Tell me, do you use string Resources? Most of us use, it’s a best practice and a smart choice. Also tell me, do you manage production string Resources? Most of us don’t. In fact, the application owner or sponsor can change it completely outside of your control scope.

String Resources are one of the major vectors of this problem but you can get this problem simply by trying to display an exception message:

string.Format("top.addMessage(\"{0}\");", exception.ToString())

Solution

What we are needing is an JScript.Encode method or similar that encode a C# string in such a way that it becomes a JSON encoded string.

Such method is not available on NetFX but, fortunately, Rick Strahl made a great post about this problem and made available a method that fits perfectly our needs.

Now that you know about it … use it.

Filed in: ASP.NET

May2009
18

ASP.NET unit testing – ASP.NET Bundle by Typemock

by nmgomes

Unit Testing ASP.NET? ASP.NET unit testing has never been this easy.

Typemock is launching a new product for ASP.NET developers – the ASP.NET Bundle - and for the launch will be giving out FREE licenses to bloggers and their readers.

The ASP.NET Bundle is the ultimate ASP.NET unit testing solution, and offers both Typemock Isolator, a unit test tool and Ivonna, the Isolator add-on for ASP.NET unit testing, for a bargain price.

Typemock Isolator is a leading .NET unit testing tool (C# and VB.NET) for many ‘hard to test’ technologies such as SharePoint, ASP.NET, MVC, WCF, WPF, Silverlight and more. Note that for unit testing Silverlight there is an open source Isolator add-on called SilverUnit.

The first 60 bloggers who will blog this text in their blog and tell us about it, will get a Free Isolator ASP.NET Bundle license (Typemock Isolator + Ivonna). If you post this in an ASP.NET dedicated blog, you'll get a license automatically (even if more than 60 submit) during the first week of this announcement.

Also 8 bloggers will get an additional 2 licenses (each) to give away to their readers / friends.

Go ahead, click the following link for more information on how to get your free license.

Filed in: ASP.NET | Tools

May2009
17

ASP.NET Controls– Applying CSS styles to a Menu control

by nmgomes

This is subject to which I ended up returning from time to time, either for professional purposes, for some pet project or simply to help a friend.

For those of you that already played with Menu control knows that applying CSS styles to the standard ASP.NET Menu control can be a real frustrating task. For all the other I hope that this post avoid or at least reduce this pain.

Problem

The main question regarding styles is how the control renders. The Menu control renders HTML element TABLE, TR and TD and this approach bring us two main problems:

  • Turns CSS style configuration more complex
  • Increases the overall HTML size

I’m not sure why the control renders like this but I believe is related to multi browser CSS compatibility. We must not forget that even today we face several multi browser CSS problems (with IE8 the differences went minimal but we still have to deal with older browsers for many years) and by the time NetFX 2.0 saw the daylight the gap between browsers were larger and rendering HTML elements TABLE, TR and TD was the one that offered less compatibility issues.

Solution

Fortunately, ASP.NET 2.0 added the concept of ControlAdapter. This is a piece that can be associated to a control type and enable us to change the way that control renders.

As you can imagine, this opened a door to adjust controls without changing the control itself. But, there’s always a but, those kind of associations Adapter/Control are (out of the box) an application setting.

The mapping is made with a Browser Definition File Schema that should look similar to:

<browsers>    <browser refID="Default">        <controlAdapters>            <adapter controlType="System.Web.UI.WebControls.Menu"                     adapterType="YourMenuAdapter" />        </controlAdapters>    </browser></browsers>

These files should be deployed to the App_Browsers folder.

Now that we know about the ControlAdapters is clear that we need one to the Menu control. Since I’m a lazy programmer, I won’t create from scratch a MenuAdapter. Instead I will use an existing one.

You can find in CodePlex a project that give us a set of Adapters very useful in most common scenarios: ASP.NET 2.0 CSS Friendly Control Adapters.

Between those adapters there’s a specific one for the Menu control. This adapter renders the Menu control as an unordered list using Div, Ul e Li HTML elements and this way allow us to easily apply CSS styles without loosing multi browser compatibility and with less Html signature. Here is an Html sample:

<div class="AspNet-Menu-Horizontal">    <ul class="AspNet-Menu">        <li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0')"            class="AspNet-Menu-Link  AspNet-Menu-Selected">Test 0</a>            <ul>                <li class="AspNet-Menu-WithChildren  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 1')"                    class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 1</a>                    <ul>                        <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 1\\Test 1a')"                            class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 1a</a> </li>                        <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 1\\Test 1b')"                            class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 1b</a> </li>                        <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 1\\Test 1c')"                            class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 1c</a> </li>                    </ul>                </li>                <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 2')"                    class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 2</a> </li>                <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 3')"                    class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 3</a> </li>                <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="javascript:__doPostBack('ctl00$B$fvMenu','bTest 0\\Test 4')"                    class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Test 4</a> </li>            </ul>        </li>    </ul></div>

A great sample is available here and the source code can be downloaded here.

Filed in: ASP.NET