tag:blogger.com,1999:blog-11794735294095808532024-03-05T10:05:07.186+01:00Erratic software developmentLiving in the coded world where bugs are inevitable and success is only optional. By Robert KoritnikRoberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.comBlogger32125tag:blogger.com,1999:blog-1179473529409580853.post-47379390042449981192018-11-14T18:59:00.002+01:002021-09-20T14:41:36.814+02:00Any CSS class selector can have ID specificity<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
This will be a very short blog post. It's actually a life-saving <em>hack</em> that allows you to define a CSS class selector that has an ID specificity. You will know where it comes handy when you'll face such problem.
</p>
<p><img src="https://media.makeameme.org/created/i-dont-always-5bec5d.jpg"></p>
<p>
We were having a situation of our Angular app running inside a container and outer styles were interfering with our app styles. We already prefix all of our selectors by the container's CSS class name, but sometimes that's just not enough. And since scoped CSS isn't a thing any more, and we didn't want to refactor our app to have an ID container as there may be multiple instances of the same app in different containers (ID must be unique even though browsers are very loose when it comes to this), we wanted to raise our selectors' specificity anyway.
</p>
<a href="https://erraticdev.blogspot.com/2018/11/css-class-selector-with-id-specificity.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com1tag:blogger.com,1999:blog-1179473529409580853.post-25157680901420499642016-01-22T18:26:00.001+01:002022-01-14T20:28:23.940+01:00Autogrow textarea Angular directive with vertically centered text<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<blockquote>
This post is about emulating <code>input[text]</code> with a <code>textarea</code> element to create a text wrapping input that adjusts its height to the amount of content it holds. A working example can be found on <a href="https://embed.plnkr.co/gCkYts/preview" target="_blank">Plunker</a>.
</blockquote>
<p>
When was the last time you asked yourself about <code>input[text]</code> element's user experience and usability? Well in normal situation (that is likely 90% of the time) this element works great but in the remaining cases it may not be ideal. Whenever you need your users to enter long(er) one-liners <code>input[text]</code> may not be your best option as it can't wrap text so part of it outside element's boundaries is being hidden. If nothing else, it's distracting to users.
</p>
<p>
You mainly have two options here each with its ups and downs:
<ul>
<li><code>textarea</code> element - very similar to <code>input[text]</code> as it allows entering unformatted text that can wrap as many lines as its length requires; it has some styling problems though (I'll explain that in a bit) and also allows entering multiple lines of text which may be undesirable but easy to handle/prevent</li>
<li><em>content editable</em> <code>div</code> element - it can easily be styled to look exactly like <code>input[text]</code> and it also wraps long lines of text (normally) just like <code>textarea</code>; the main problem is controlling its behaviour to prevent text formatting in a cross browser way</li>
</ul>
</p>
<p>
Of the two options the first one seems simpler so let's implement it.
</p>
<a href="https://erraticdev.blogspot.com/2016/01/autogrow-textarea-angular-directive.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com2tag:blogger.com,1999:blog-1179473529409580853.post-6469554005740727702015-10-09T18:11:00.003+02:002015-10-09T18:38:14.068+02:00Angular ngRoute routing authorization with asychronous promises<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
AngularJS <a href="http://docs.angularjs.org/api/ngRoute">routing</a> doesn't support <i>route authorization</i> out of the box and nor does its popular cousin <a href="http://github.com/angular-ui/ui-router">ui-router</a> even though the latter supports state change cancellation with later <i>continuation</i> (using <code>$urlRouter.sync()</code>; check <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouter">documentation</a>). But in non-trivial Angular SPAs this feature is regularly needed. So I went off implementing it.</p>
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uA0lB-h-mGjZtdYA7Wa5fKL_FtuZOB7iNRkmC5NmO67KisYVCqCVutbSfjzWJzvDZikpD407KLQXx2nimEzH-Uj3NMN403HIpiCbwIPjBdIZBFOIG8V3DykLNYAJHSxeMwkttwhrn3Y/s1600/confused.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uA0lB-h-mGjZtdYA7Wa5fKL_FtuZOB7iNRkmC5NmO67KisYVCqCVutbSfjzWJzvDZikpD407KLQXx2nimEzH-Uj3NMN403HIpiCbwIPjBdIZBFOIG8V3DykLNYAJHSxeMwkttwhrn3Y/s640/confused.jpg" style="width: 100%"></a></div>
<a href="https://erraticdev.blogspot.com/2015/10/angular-ngroute-routing-authorization.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com12tag:blogger.com,1999:blog-1179473529409580853.post-88430794130809219792015-01-30T17:25:00.000+01:002015-04-29T09:40:53.831+02:00Data binding a single shared view to different controllers using "ControllerType as instanceName" syntax<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
If you haven't already I strongly suggest you first read <a href="http://github.com/johnpapa/angularjs-styleguide">John Papa's AngularJS styleguide</a>. It's a magnificent document of an evolving set of AngularJS development best practices. Among them there's also one that says to abolish <code>$scope</code> use and rather provide view model data as part of controller instance because view bindings become more <em>contextual</em> amid <a href="http://github.com/johnpapa/angularjs-styleguide#controllers">other reasons</a>. To accomplish this you need to use the <code>ControllerType as instanceName</code> syntax. This is usually a blessing but sometimes it <em>may seem</em> to be a curse especially when you give controllers contextual instance names (i.e. <code>UserController as user</code>) instead of some common name (i.e. <code>UserController as vm</code>). This is especially useful if you're nesting controllers and don't want to access parent controllers using scope's <code>$parent</code> property.
</p>
<p>
Contextual instance naming plays along nicely until you introduce shared views. Now when you want to bind your shared view to a controller instance you don't really know its name. It can be any controller instance name that will be using this shared view. <strong>Now what?</strong>
</p>
<a href="https://erraticdev.blogspot.com/2015/01/data-binding-single-shared-view-to.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com1tag:blogger.com,1999:blog-1179473529409580853.post-41311906198258266222014-08-27T16:00:00.000+02:002014-09-09T15:10:15.389+02:00Simplifying method parameter checking<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<blockquote>
Next version of C# that will be coming with Visual Studio (supposedly version 2014) will have a new operator called the <em>null-propagating operator</em> (<code>?.</code>) allowing us to write <em>null conditional</em> statement expressions. This will help us simplify our code tremendously by collapsing several lines of conditional blocks to a single statement. Combining it with <em>null-coalescing operator</em> makes it even more powerful as seen in this example:
<code class="ln">
string username = GetUser()?.name ?? "anonymous";
</code>
Object will be <em>null checked</em> before trying to access its members so we'll avoid the infamous <em>null reference exception</em>. It will therefore automatically continue to null coalescing part of the statement. You can read more about it <a href="https://roslyn.codeplex.com/discussions/540883">on this link</a>.
</blockquote>
<p>
Parameter <code>null</code> value checking code is something we frequently write at the beginning of method body to avoid <em>null reference</em> runtime exceptions. You know these <code>if</code> statements right at the beginning of your methods:
<!-- code formatted by http://manoli.net/csharpformat/ -->
<div class="csharpcode">
<pre class="alt"><span class="lnum"> 1: </span><span class="kwrd">public</span> <span class="kwrd">string</span> DoSomething(Model data)</pre>
<pre><span class="lnum"> 2: </span>{</pre>
<pre class="alt"><span class="lnum"> 3: </span> <span class="kwrd">if</span> (data == <span class="kwrd">null</span>)</pre>
<pre><span class="lnum"> 4: </span> {</pre>
<pre class="alt"><span class="lnum"> 5: </span> <span class="kwrd">throw</span> <span class="kwrd">new</span> ArgumentNullException(<span class="str">"data"</span>);</pre>
<pre><span class="lnum"> 6: </span> }</pre>
<pre class="alt"><span class="lnum"> 7: </span> </pre>
<pre><span class="lnum"> 8: </span> <span class="rem">// actual processing</span></pre>
<pre class="alt"><span class="lnum"> 9: </span>}</pre>
</div>
</p>
<p>
Even static code analysis tools complain if you don't do these checks and to be honest this is a very good practice to avoid many future bugs in your code. The problem isn't this code per se, but rather that we're writing these seemingly same lines over and over again. Many developers tried simplifying this process using different techniques but the one I'm going to show here is a bit different.
</p>
<a href="https://erraticdev.blogspot.com/2014/08/simplifying-method-parameter-checking.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com0tag:blogger.com,1999:blog-1179473529409580853.post-87764907591058991092014-04-23T09:45:00.000+02:002016-08-24T11:49:07.693+02:00Mapping SQL stored procedures to C# class methods with matching strong type parameters using T4 template<blockquote>
Blog post provides T4 template that generated strong typed C# code which maps to SQL stored procedures. It doesn't actually call those SPs, but rather prepares SQL queries to call stored procedures with various parameters. These provided T4 template queries are NPoco/PetaPoco compatible, so if you use a different DAL lib (maybe even simple .net Sql client), you'll have to adjust methods to generate and return different results (with .net Sql client it will likely be <code>SqlCommand</code> instance).
</blockquote>
<p>
<a href="https://github.com/schotime/NPoco">NPoco</a>/<a href="https://github.com/schotime/PetaPoco">PetaPoco</a> DAL libraries use strings to provide database optimised queries and these are prone to typing errors which we aren't able to catch during compile time but rather during runtime, when effects can be much more devastating. That's why it would be great if we could somehow avoid these magic string values and just used C# code with string types and not make a mistake. We can't really avoid magic strings when writing direct TSQL but if we write stored procedures, we can do something about it.
</p>
<p>
We could self-write those C# calls that use stored procedures internally but that would just mean we moved typing errors to those methods, so this is not really a solution. Enter code generation with <a href="http://msdn.microsoft.com/en-us/library/bb126445.aspx">T4 Visual Studio templates</a>. A t4 template will help us automate the process of writing C# methods while also making sure we get compile time errors when we change particular stored procedure's signature (sp name, parameter count or their types). So let's do just that.
</p>
<a href="https://erraticdev.blogspot.com/2014/04/npocopetapoco-stored-procedures-with.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com0tag:blogger.com,1999:blog-1179473529409580853.post-25328505536281515372014-04-03T09:37:00.001+02:002014-05-22T18:39:07.611+02:00How I mitigated the impossible SELECT INTO on Windows Azure<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
I'm the kind of developer that likes things under control by writing some stuff myself and keeping it as optimized as possible. This is especially true for database scripts. Sure we have these ORM tools these days (<a href="http://msdn.microsoft.com/en-US/data/ee712907#getstarted">Entity Framework</a>, <a href="http://nhforge.org/">NHibernate</a> and such) but the calls that end up on the database side are many times unoptimized. Why? They have to work for all cases so sacrifices are made and performance usually suffers. That's why I like micro ORMs that make it super simple to translate database data to code (via object mapers) but still let you write optimized queries suited completely to your database.
</p>
<p>
The way that I upgrade my database requires me to backup existing data, drop the whole model, recreate it and restore data back to appropriate tables. Especially the backup strategy is problematic as it uses <code>select into</code> statements. Windows Azure requires all tables to have <a href="http://msdn.microsoft.com/en-us/library/ee336245.aspx#cir">clustered indices</a> prior to inserting data which makes it impossible to use <code>select into</code> statement as it has no control over clustered indices. How can we then automate backup scripts without creating those backup tables manually? With a bit of work, everything can be done.
</p>
<a href="https://erraticdev.blogspot.com/2014/04/how-i-mitigated-impossible-select-into-on-azure.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com0tag:blogger.com,1999:blog-1179473529409580853.post-86053441663506007092014-01-07T19:00:00.000+01:002014-01-07T22:47:22.860+01:00Web Essentials markdown preview default style for Visual Studio<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
The other day I wanted to write a markdown file that's part of my Visual Studio 2013 project. As majority of you have done I've also installed <a href="http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361">Web Essentials addon</a> for Visual Studio 2013. Beside the several syntaxes it supports one of them is also <a href="http://en.wikipedia.org/wiki/Markdown">markdown</a>. The problem I was facing was that its preview window had a really basic browser style. I wanted to change that.
</p>
<a href="https://erraticdev.blogspot.com/2014/01/web-essentials-markdown-preview-default.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com2tag:blogger.com,1999:blog-1179473529409580853.post-84901068110211249312013-10-18T16:36:00.000+02:002013-10-18T16:36:11.664+02:00Parametrized code testing and code exploration<!-- --------------------------------------------------------
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
Few days ago I had the pleasure of presenting parametrized unit testing among other things to a group of developers as part of my consulting side of work. I'm sure everyone got something useful out of those few hours we spent together.
</p>
<p>
So I thought of writing an introduction blog post to parametrized unit tests using <a href="http://nunit.org/">NUnit library</a>. But to give it some edge let me do this along with code exploration that makes our tests (and consequently our production code) better. I'll be using <a href="http://research.microsoft.com/en-us/projects/codedigger/">Code Digger</a> Visual Studio 2012 <a href="http://visualstudiogallery.msdn.microsoft.com/fb5badda-4ea3-4314-a723-a1975cbdabb4">extension</a>. Hopefully you'll learn something new as well.
</p>
<a href="https://erraticdev.blogspot.com/2013/10/parametrized-code-testing-and-code.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com0tag:blogger.com,1999:blog-1179473529409580853.post-91476298380930844042013-03-30T20:54:00.000+01:002013-03-30T21:01:55.231+01:00LESS gradient mixin with fallback for IE<!-- --------------------------------------------------------
* use [h4] for headers
* use [code] for inline code
* use [code class="ln"] for full line code
* use [blockquote] for red important text
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
<!-- -------------------------------------------------------- -->
<p>
As you could read in my <a href="http://erraticdev.blogspot.com/2012/01/css3-cross-browser-sass-no-scss-mixins.html">last post</a> (long time ago) I've rather used SCSS over LESS but when I upgraded my Visual Studio to version 2012 I decided not to install Mindscape's addin as VS already comes with support for LESS, CoffeeScript and TypeScript via Web Essentials addin. So I started writing my usual set of mixins in LESS. It seemed simple and straight forward at first until I started writing <code>.gradient</code> mixin that should somewhat also support older non-CSS3 browsers like outdated IE8.
</p>
<h4>Gradient mixin requirements</h4>
<p>
CSS3 gradient support is great but when creating a public facing webapp I usually want to support old(er) browsers so they'd display <em>something</em> in place of those nifty looking gradients. I opt for a flat background colour that is a mix between first and last gradient colour. But that's not all. Here are my gradient mixin requirements:
<ol>
<li>support CSS3 gradients using <code>background-image</code> style property</li>
<li>support prefixed variations i.e. <code>-webkit</code></li>
<li>graceful degradation for older non-CSS3 browsers by providing a flat colour calculated from first and last gradient definition colour as vast majority of gradients are two coloured</li>
<li>provide mixin parameters in the same way as we provide them for actual CSS so without resorting to escaped <code>~"..."</code> LESS notation</li>
<li>all fallbacks for flat colours have to be automatically calculated by the mixin instead of providing it manually</li>
</ol>
</p>
<a href="https://erraticdev.blogspot.com/2013/03/less-gradient-mixin-with-fallback-for-ie.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com0tag:blogger.com,1999:blog-1179473529409580853.post-44800149500172240362012-01-29T16:25:00.000+01:002013-03-27T11:42:37.315+01:00CSS3 cross browser SASS... no, SCSS mixins<p>
I like automation that eliminates human factor of forgetting of doing something. Happens to me just like it most likely happens to you. Especially when we do repetitive things. That's why I've written a few posts that are direct result of me striving for automation. May it be the post about <a href="http://erraticdev.blogspot.com/2012/01/running-or-debugging-nunit-tests-from.html">NUnit test project settings in Visual Studio</a> that starts NUnit test runner by simply pressing <strong>F5</strong> button or the <a href="http://erraticdev.blogspot.com/2010/11/running-batch-files-bat-from-within.html">additional <em>file editor</em> that automatically executes batch (*.bat) files from within Visual Studio</a>. Never mind. This one's related to simplicity, versatility and automation. And CSS3 stylesheets of course.
</p>
<p>
Actually it's about the extended CSS syntax that we get by writing SCSS stylesheets (similar to LESS, but more on it later on). SCSS used to be called SASS with its own syntax but now uses CSS syntax hence changed its name. I will be using SCSS acronym from now on because that's what my following code example uses. If you've ever used any of these two you'll know the benefits of simplified, easier to handle and more powerful style sheets. I have been flirting with this couple for some time now, but on this last project of mine, my flirting became a serious relationship. I started using SCSS. What I will share with you here are a few common mixins that are usable to any web developer.
</p>
<a href="https://erraticdev.blogspot.com/2012/01/css3-cross-browser-sass-no-scss-mixins.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com2tag:blogger.com,1999:blog-1179473529409580853.post-86458285152826554362012-01-11T01:58:00.001+01:002012-01-12T23:19:53.661+01:00Running or debugging NUnit tests from Visual Studio without any extensions<p>
If you write unit tests and use <a href="http://www.nunit.org/">NUnit test framework</a> this may be helpful. I decided to write this simple step by step project configuration because I tend to set it up on every new project but keep forgetting all its details of how to do this. Setting it up is simple and a one-time only process for each test project.
</p>
<a href="https://erraticdev.blogspot.com/2012/01/running-or-debugging-nunit-tests-from.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com38tag:blogger.com,1999:blog-1179473529409580853.post-90388852504295018412011-10-25T16:57:00.002+02:002011-10-26T08:52:40.772+02:00Application model entity localisation in Asp.net MVC<p>
If you are an Asp.net MVC developer and live in non English speaking country, then you've faced the challenge of application localisation. Although frameworks these days support localisation it's usually not a straightforward process. Especially when it comes to web applications. There's always a dilemma how to implement localisation and how to choose request locale. Should it follow browser language settings or user preference? Either way there's an underlying base foundation that can be used to implement each.
</p>
<p>
This post is not about localisation in general but rather just about application model classes and their property names localisation when presented in Asp.net MVC views by means of <code>Html.LabelFor()</code> extension methods. There already is a class <code>DisplayNameAttribute</code> but it lacks capabilities we need.
</p>
<blockquote>
This blog post is related to .net framework 3.5 and older because there's a new attribute provided by the .net framework 4 and newer. It's called <code>DisplayAttribute</code> which has even more capabilities than those implemented below.
</blockquote>
<a href="https://erraticdev.blogspot.com/2011/10/application-model-entity-localisation.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com5tag:blogger.com,1999:blog-1179473529409580853.post-28891161773735307092011-08-12T18:38:00.002+02:002011-10-26T08:51:50.318+02:00jQuery UI slider extension that enhances range capabilities<p>
I'm going to provide you with the code that makes it possible to set bounds to range slider handles (minimum and maximum) and some more sugar along with it.
</p>
<p>
I needed to create a range slider that is a bit smarter than the one provided by jQuery UI library that only allows to set minimum and maximum values for the whole slider, but I needed to set a few things more. I had to provide a range slider that would allow users to select time range between midnight and midday the next day (36 hours all together). These were my requirements:
<ul>
<li>Lower handle can only move to midnight the next day (so it can move between 00:00 and 1d 00:00) - this simply means that time range <strong>must</strong> start today</li>
<li>Selected range must be at least 1 hour wide</li>
<li>Selected range can't be wider than 24 hours all together</li>
</ul>
These were my requirements and although I like jQuery UI plugins/widgets and even though it comes with a <strong>slider</strong> it doesn't work as expected. I could of course put it all in my <code>slide</code> handler, but tha wouldn't be reusable and it would also not allow me to do some additional things I implemented along. Want to know which ones?
</p>
<a href="https://erraticdev.blogspot.com/2011/08/advanced-jquery-ui-range-slider.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com24tag:blogger.com,1999:blog-1179473529409580853.post-55077084771482291302011-08-05T20:34:00.004+02:002011-10-25T11:09:15.728+02:00BLToolkit MapResultSet builder<h4><em>or</em> How I refactored my seemingly identical methods with generic type parameters</h4>
<p>
As I've <a href="http://erraticdev.blogspot.com/2010/11/t4-template-to-generate-bltoolkit.html">written in the past</a> I'm using <a href="http://bltoolkit.net/">BLToolkit</a> lightweight ORM on one of my projects. But some parts of it seem very silly actually and I can't really see why did they decide to do certain parts the way that they did. One of them being the configuration for multiple result sets. You know those where you write TSQL query that returns more than one result. BLToolkit has this nice <code>DbManager</code> mapping method called <code>ExecuteResultSet()</code> that takes an array of <code>MapResultSet</code> objects. And <em>these</em> you have to prepare yourself first so mapper will actually populate your object lists. Their example looks like this (just the relevant code):
<!-- code formatted by http://manoli.net/csharpformat/ -->
<div class="csharpcode">
<pre class="alt"><span class="lnum"> 1: </span>List<Parent> parents = <span class="kwrd">new</span> List<Parent>();</pre>
<pre><span class="lnum"> 2: </span>MapResultSet[] sets = <span class="kwrd">new</span> MapResultSet[3];</pre>
<pre class="alt"><span class="lnum"> 3: </span> </pre>
<pre><span class="lnum"> 4: </span>sets[0] = <span class="kwrd">new</span> MapResultSet(<span class="kwrd">typeof</span>(Parent), parents);</pre>
<pre class="alt"><span class="lnum"> 5: </span>sets[1] = <span class="kwrd">new</span> MapResultSet(<span class="kwrd">typeof</span>(Child));</pre>
<pre><span class="lnum"> 6: </span>sets[2] = <span class="kwrd">new</span> MapResultSet(<span class="kwrd">typeof</span>(Grandchild));</pre>
<pre class="alt"><span class="lnum"> 7: </span><span class="rem">// and so on and so forth for each result set</span></pre>
<pre><span class="lnum"> 8: </span> </pre>
<pre class="alt"><span class="lnum"> 9: </span><span class="kwrd">using</span> (DbManager db = <span class="kwrd">new</span> DbManager())</pre>
<pre><span class="lnum"> 10: </span>{</pre>
<pre class="alt"><span class="lnum"> 11: </span> db</pre>
<pre><span class="lnum"> 12: </span> .SetCommand(TestQuery)</pre>
<pre class="alt"><span class="lnum"> 13: </span> .ExecuteResultSet(sets);</pre>
<pre><span class="lnum"> 14: </span>}</pre>
</div>
</p>
<p>
As you can see you have to create an array of <code>MapResultSet</code> objects of the correct size (using a magic value - and you know <a href="http://erraticdev.blogspot.com/2011/01/generate-enum-of-database-lookup-table.html">I don't like them</a>) and then set an instance to each (again using magic values). Seems tedious? I thought so as well. Hence I've done it differently.
</p>
<a href="https://erraticdev.blogspot.com/2011/08/bltoolkit-mapresultset-builder.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com0tag:blogger.com,1999:blog-1179473529409580853.post-48113894392757842042011-08-02T18:02:00.004+02:002011-10-21T21:57:35.241+02:00Cross browser headers with vertical rotated text<p>
You've probably come across the problem of displaying these kind of tables:
<ul>
<li>many columns</li>
<li>header column at the top</li>
<li>content cells display narrow data - flags (yes/no, true/false, y/n, on/off, finite states like yes/no/maybe etc.) or just icons that denote some sort of state as in feature list tables where each cell displays either a check-mark or nothing or green and empty cirles or similar...</li>
<li>header cells contain much wider data than content cells - more words that take much valuable horizontal space</li>
</ul>
If you had to display these kind of tables you've probably been thinking how could you make header cells narrower but not clip their content so headers still make sense... The idea is to display header cells as tall cells with vertically displayed text so columns can stay narrow as their content cells need. This way our tables get horizontally usable and don't take much space. It's true that header row becomes higher (depending on the amount fo text that you'd like to display, but hey there's just one header row in the whole table.
</p>
<p>
Anyway. So if you did struggle with this and also wanted it to display approximately the same on all three major nowadays browsers than you did spend some time solving it. If you didn't but you think you may in the future, then just use the code I'll provide here and off you go.
</p>
<a href="https://erraticdev.blogspot.com/2011/08/cross-browser-vertical-text.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com25tag:blogger.com,1999:blog-1179473529409580853.post-3562515653675494852011-07-30T02:29:00.003+02:002011-10-21T21:57:57.842+02:00Use CSS floats to flow data in columns rather than rows with jQuery .transpose() plugin<p>
I know we have <a href="http://www.w3.org/TR/css3-multicol/">CSS3 multi-column layout</a> that makes HTML content flow in columns dead simple but the problem is that only the most modern browsers (as of July 2011) support this CSS3 capability. As you might have guessed this means <em>tough luck</em> for Internet Explorer users. Microsoft decided that CSS3 column layout is not something developers or better web designers would need so IE still doesn't support it. <strong>Not even in version 9</strong> that is.
</p>
<p>
Even though CSS3 multi-column support got supported recently we have been displaying data in <em>pseudo columns</em> for some time. We either displayed tables when we had tabular data or used <a href="http://www.w3.org/TR/CSS2/visuren.html#propdef-float">CSS floats</a> or <a href="http://www.w3.org/TR/CSS2/visuren.html#display-prop">CSS inline-blocks</a> when displaying lists and we didn't want the list to be long and narrow which makes it hard to use. The nice thing about floating is that elements take as much horizontal space as they can inside container and when individual items are set a fixed width this means that they will display in column-like layout. <strong>The problem</strong> is though that floated items run in rows meaning that when you have alphabetic text (or numbers) list items they won't flow in columns as we're used to ie. in phonebooks. No. Items flow in rows. This makes these kind of lists hard to read and search through. But I have a solution for you. <strong>jQuery plugin that re-arranges your items into columns</strong> to improve their usability.
</p>
<a href="https://erraticdev.blogspot.com/2011/07/use-css-floats-to-flow-data-in-columns.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com10tag:blogger.com,1999:blog-1179473529409580853.post-72170876106347720322011-03-17T15:19:00.004+01:002011-10-21T21:58:19.054+02:00Removing route values from links/URLs in Asp.net MVC<!--
* use <h4> for headers
* use <code> for inline code
* use <code class="ln"> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
I didn't really know how to properly title this post to make it easily searchable by those who bump into routing-related issue. Words like <strong>arbitrary</strong>, <strong>ambient</strong>, <strong>unwanted</strong>, <strong>unneeded</strong>, <strong>extra</strong>, <strong>unrelated</strong> etc route values popped into my mind, but I decided to title it as it is now.
</p>
<p>
One of the main pillars of Asp.net MVC is routing. Many applications can just use default route definition to cover all their scenarios but some applications require it to be a bit more complex. Look at this example:
<!-- code formatted by http://manoli.net/csharpformat/ -->
<div class="csharpcode">
<pre class="alt"><span class="lnum"> 1: </span>routes.MapRoute(</pre>
<pre><span class="lnum"> 2: </span> <span class="str">"CustomerSpecific"</span>,</pre>
<pre class="alt"><span class="lnum"> 3: </span> <span class="str">"Customers/{customerId}/{controller}/{action}/{id}"</span></pre>
<pre><span class="lnum"> 4: </span> <span class="kwrd">new</span> { controller = <span class="str">"Customers"</span>, action = <span class="str">"Index"</span>, id = UrlParameter.Optional },</pre>
<pre class="alt"><span class="lnum"> 5: </span> <span class="kwrd">new</span> { customerId = <span class="str">@"\d+"</span> }</pre>
<pre><span class="lnum"> 6: </span>);</pre>
<pre class="alt"><span class="lnum"> 7: </span> </pre>
<pre><span class="lnum"> 8: </span>routes.MapRoute(</pre>
<pre class="alt"><span class="lnum"> 9: </span> <span class="str">"Default"</span>,</pre>
<pre><span class="lnum"> 10: </span> <span class="str">"{controller}/{action}/{id}"</span>,</pre>
<pre class="alt"><span class="lnum"> 11: </span> <span class="kwrd">new</span> { controller = <span class="str">"Home"</span>, action = <span class="str">"Index"</span>, id = UrlParameter.Optional }</pre>
<pre><span class="lnum"> 12: </span>);</pre>
</div>
Seems fine? Well it does and it works, but you will have problems when you'll be anywhere in
<code class="ln">http://www.domain.com/Customers/<em>n</em>/...</code>
and would like to also generate links to parts of your application that are covered by default route definition (second route). Let me show you why.
</p>
<a href="https://erraticdev.blogspot.com/2011/03/removing-route-values-from-linksurls-in.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com12tag:blogger.com,1999:blog-1179473529409580853.post-3169948359130435272011-02-28T20:27:00.007+01:002011-10-21T21:59:04.951+02:00Improving Asp.net MVC maintainability and RESTful conformance<style>
table.rest {font-size:8pt;text-align:left;border-collapse:collapse;border-bottom:1px solid #ccc;}
table.rest th {background-color:#eee;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
table.rest td,
table.rest th {padding:2px 5px;vertical-align: top;}
table.rest .alert {color: #c00;}
table.rest em {color: #999;}
</style>
<!--
* use <h4> for headers
* use <code> for inline code
* use <code class="ln"> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
I've used Asp.net MVC for a few years now but this <em>issue</em> I've stumbled upon just a few days ago seems something everyday<em>ish</em> and I wonder how come I've never bumped into it. It has to do with Asp.net MVC routing and action method selection. First of all think of default route definition that looks like this:
<!-- code formatted by http://manoli.net/csharpformat/ -->
<div class="csharpcode">
<pre class="alt"><span class="lnum"> 1: </span><span class="rem">// default application route</span></pre>
<pre><span class="lnum"> 2: </span>routes.MapRoute(</pre>
<pre class="alt"><span class="lnum"> 3: </span> <span class="str">"Default"</span>,</pre>
<pre><span class="lnum"> 4: </span> <span class="str">"{controller}/{action}/{id}"</span>,</pre>
<pre class="alt"><span class="lnum"> 5: </span> <span class="kwrd">new</span> { controller = <span class="str">"Home"</span>, action = <span class="str">"Index"</span>, id = UrlParameter.Optional }</pre>
<pre><span class="lnum"> 6: </span>);</pre>
</div>
Mind that <code>id</code> route value is <strong>optional</strong>? Yes optional. So it should be perfectly feasible to have two action methods: one with the <code>id</code> parameter and one without it:
<code class="ln">public ActionResult Index() { ... }</code>
and
<code class="ln">public ActionResult Index(int id) { ... }</code>
But you've probably guessed it? This doesn't work out of the box. You'll get a runtime error stating that there are two matching action methods for the current request. A bit strange? I thought so as well. So let's try and accomplish just that!
</p>
<a href="https://erraticdev.blogspot.com/2011/02/improving-aspnet-mvc-maintainability.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com14tag:blogger.com,1999:blog-1179473529409580853.post-33727241471290802692011-02-02T03:19:00.035+01:002011-10-21T21:53:42.798+02:00jQuery animated "scroll into view" plugin (with additional ":scrollable" selector filter)<p>
Sometimes our pages have to deal with long(er) unpaged lists of data. Long enough to fall off the viewable browser window estate. Actually you don't even have to deal with lists at all. <b>Let me re-define the problem</b>: when you have a scrollable element on your page (may be the very <code>body</code> of it) and you need to programmatically scroll to its out-scrolled child element, <b>then this jQuery plugin is just for you</b>. Now let's see when we have to do this and what could go wrong.
</p>
<a href="https://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com75tag:blogger.com,1999:blog-1179473529409580853.post-76224513764845285062011-01-23T16:53:00.011+01:002012-01-23T15:33:31.555+01:00How to correctly use IHttpModule to handle Application_OnStart event<!--
* use <h4> for headers
* use <code> for inline code
* use <code class="ln"> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
In one of my previous blog posts (<a href="http://erraticdev.blogspot.com/2010/08/writing-ihttpmodule-thats-able-to.html">Writing a custom IHttpModule that handles Application_OnStart event</a>) I've been talking about using <code>IHttpModule</code> to also handle <strong>application start</strong> event which is a non-documented feature. Sure it works, but you may see some strange behaviour of duplicated (or even multiplicated) functionality being executed. You probably won't see this with your applications in development, because your local IIS isn't really heavy duty workhorse, but in production environment you may see this strange behaviour. Investigating it is even a bit more complicated because of the running application serving live traffic. Let me help you. So I will point you in the right direction and more importantly <strong>show you a solution</strong> that makes things work reliably even on a heavy load IIS.
</p>
<a href="https://erraticdev.blogspot.com/2011/01/how-to-correctly-use-ihttpmodule-to.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com41tag:blogger.com,1999:blog-1179473529409580853.post-38943317825900466672011-01-12T12:11:00.010+01:002011-10-21T22:00:18.773+02:00Custom Asp.net MVC route class with catch-all segment anywhere in the URL<!--
* use <h4> for headers
* use <code></code> for inline code
* use <code class="ln"></code> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
<a href="http://www.asp.net/mvc/tutorials/asp-net-mvc-routing-overview-cs">Asp.net MVC routing</a> does a fine job with routes that have a finite number of segments. We define them with route URL pattern string. The default provided by the Asp.net MVC project template being <code>{controller}/{action}/{id}</code>. Most web applications can do everything using only this single route definition and many developers don't even think beyond this <em>standard</em>. But sometimes this single route just isn't enough or it's just not acceptable.
</p>
<h4>A real world example</h4>
<p>
Think of a web site you're building that has hierarchically organised categories. Like <a href="http://www.amazon.com/gp/site-directory">Amazon</a>. We have books, music, electronics, etc. And every top category has sub categories. And so on and so forth. Using default route definition we would access a particular (sub)category simply by:
<code class="ln">www.domain.com/categories/index/647</code>
That's fine, but it's definitely not human friendly. If we'd change our route URL definition to <code>{controller}/{action}/{id}/{name}</code> this would already be much friendlier:
<code class="ln">www.domain.com/categories/index/647/web-development</code>
That's something similar (not the same, because we're still using action names here) to what <a href="http://www.stackoverflow.com">Stackoverflow</a> does with it's questions.
</p>
<p>
But now think of this super human readable web address:
<code class="ln">www.domain.com/books/computer-internet/web-development/latest</code>
This one would display latest web development books. As we can see it defines categories in hierarchical order similar to <a href="http://en.wikipedia.org/wiki/Breadcrumb_%28navigation%29">breadcrumbs</a>. All in human readable format. Doing this kind of routing isn't supported out of the box (because we have an action at the end), but I think we could do better. Let's try and create a route that supports this.
</p>
<a href="https://erraticdev.blogspot.com/2011/01/custom-aspnet-mvc-route-class-with.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com34tag:blogger.com,1999:blog-1179473529409580853.post-23539415594803171262011-01-08T16:32:00.008+01:002011-10-25T11:09:15.711+02:00Generate enum from a database lookup table using T4<!--
* use <h4> for headers
* use <code> for inline code
* use <code class="ln"> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
This is something rather common. You're building an application that uses database storage in the background. If your database isn't completely trivial and you're not fatally in love with <a href="http://en.wikipedia.org/wiki/Magic_number_%28programming%29">magic values/numbers</a>, then you probably also use <em>lookup tables</em> to gain <a href="http://en.wikipedia.org/wiki/Referential_integrity">referential integrity</a> when it comes to certain types, codes and similar data. But to follow the <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY software development principle</a> we want to use these values defined in database on upper layers as well without manually writing any additional code. Because as mentioned <strong>magic values are evil</strong> regardless of where they're used.
</p>
<a href="https://erraticdev.blogspot.com/2011/01/generate-enum-of-database-lookup-table.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com26tag:blogger.com,1999:blog-1179473529409580853.post-13607614951628216132010-12-27T14:48:00.007+01:002012-01-04T08:29:53.097+01:00jQuery parseJSON automatic date conversion for Asp.net and ISO date strings<!--
* use <h4> for headers
* use <code> for inline code
* use <code class="ln"> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
This one's quite common. You asynchronously communicate (a.k.a. Ajax) with your server and get JSON data in return. You most probably use <code>$.parseJSON()</code> on the client side which actually parses JSON string and returns an object. We've all used that. <strong>But</strong> (yes, there's always a but) there's a catch. There's no defined standard for date serialization, so jQuery will not parse your dates back to dates. What the heck even native JSON parser (these days supported in all major browsers) won't do that. So you have to do it yourself. Manually. Or, modify default jQuery functionality a bit and get it done automatically.
</p>
<a href="https://erraticdev.blogspot.com/2010/12/converting-dates-in-json-strings-using.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com44tag:blogger.com,1999:blog-1179473529409580853.post-63515593078739179852010-12-14T15:27:00.003+01:002011-10-21T22:01:34.292+02:00Custom action method selector attributes in Asp.net MVC<!--
* use <h4> for headers
* use <code> for inline code
* use <code class="ln"> for full line code
* code blocks should be formatted using:
http://www.manoli.net/csharpformat/format.aspx
-->
<p>
Some of the least customized but very useful extension points in Asp.net MVC are action method selector attributes. We use them all the time without actually knowing, but we may write our own as well and make seemingly complex things trivial.
</p>
<h4>A real world example</h4>
<p>
Take for instance <a href="http://www.twitter.com">Twitter</a> website. When you first visit their site, you are presented with the anonymous visitor home page that provides search capabilities, trends etc.
</p>
<p>
But when you're logged in you see a completely different page. Web address is still the same, but content is completely different. You see <strong>your</strong> home twitter page where you can send tweets and read your stream.
</p>
<p>
Using custom action method selector attributes, you can easily differentiate between such requests without using multifaceted controller actions.
</p>
<a href="https://erraticdev.blogspot.com/2010/12/using-custom-action-method-selector.html#more">Continue reading...</a>Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.com3