Converting Web Forms to MVC, Part 1 – The Master Page

ASP.NET MVCFollowing on from Sunday’s post, the first website we’re busy converting to ASP.NET MVC has a Master Page (for a templated layout), two nested Master Pages (one for the home page and main landing pages for each section on the site, and the other for the inner pages), lots of code-behind, a number of User Controls, which we’ll get to later, and the web forms. We’ve started a new ASP.NET MVC Web Project in Visual Studio Community 2013 and will be using C# for coding purposes. Our first aim is to convert the Master Pages and their code-behind files to MVC.
Continue reading “Converting Web Forms to MVC, Part 1 – The Master Page”

Moving on to ASP.NET MVC

ASP.NET MVCWe’ve recently wanted to get hold of the new version of Visual Studio Express 2013 for Web only to discover that there is a new edition called Visual Studio 2013 Community that has all the features of Visual Studio Express and is also free! We grabbed that one instead, installed it and fired up a new ASP.NET Web Forms project. Then we got to thinking about this Models folder in the project and noticed, belatedly I suppose, a greater shift to separation of concerns. We wondered if Web Forms’ days were numbered.
Continue reading “Moving on to ASP.NET MVC”

CSS Preprocessors

SassWe’ve recently discovered the wonderful world of CSS preprocessors and Sass (from sass-lang.com) and Compass (compass-style.org) in particular. It’s made my CSS coding a lot easier to start with and a lot easier to maintain.

Variables

One of the features I really like is variables. It allows you to declare a color for example and use that variable wherever you’d use the color. A variable is simple prefixed with a $ as in $font-color: #999999; and when you need that color just call the variable as in: h1 { color: $text-color }. Now we can simply change the color in the variable and everywhere that that variable is used. Lovely!
Continue reading “CSS Preprocessors”

The :nth-of-type pseudo-class

CSS3 brought quite a few new toys to the web table but one of them I’ve found a little hard to grasp. I’m talking about the :nth-of-type pseudo-class that can be a bit confusing when you don’t understand how it works.

In its simplest sense, the :nth-of-type pseudo-class matches the nth child in the parent container. For example, p:nth-of-type(2) selects the second paragraph (<p>) element, and only the second paragraph <p> element, of its parent. If you want to select every second <p> element you would need to use the even keyword as in p:nth-of-type(even). This is very useful for highlighting every alternative row in a table or a list as it matches the child elements whose index in an even number.
Continue reading “The :nth-of-type pseudo-class”

CSS3 Transitions

CSS transitions is one of the interesting features that arrived with CSS3. It can be used to create sliders and lightboxes or anything you can create with the jQuery Animate() function, which means less JavaScript, which in turn means better site performance. Best of all, it won’t break on older browsers as these will just ignore the transition from one state to another.

The syntax for a CSS transition is:
Continue reading “CSS3 Transitions”

The ternary operator in C#

c-sharpThe ternary or conditional operator might appear a bit complicated to a novice programmer but it is actually a simple operator. It consists of three parts: condition, a true value, and false value. The condition is a boolean expression that is evaluated to either true or false. Then the true value is passed if the condition evaluates to true, else the false value is passed as the boolean expression would evaluate to false if it is not true.

The syntax for the conditional operator might illustrate this better:
Continue reading “The ternary operator in C#”

Manipulating CSS with jQuery

jquery-logoIn our previous posts on jQuery we looked at jQuery selectors and handling events with jQuery. In those posts we touched a bit on the css() function. In this post we want to take a deeper look at how we use jQuery to manipulate CSS styling.

There are two jQuery functions that we use quite often to manipulate CSS styling: the addClass() function and the css() function. We also use the removeClass() and toggleClass() functions fairly often, as well as the height() and width() functions.
Continue reading “Manipulating CSS with jQuery”

Event Handling with jQuery

jquery-logoIn our previous post we looked at jQuery selectors. In this, out second post in a beginner’s series on jQuery, we look at handling events. Events are the cornerstone of developing an interactive website and the jQuery library simplifies handling events by dealing with browser differences in the background.

The ready() and load() event handlers

Two of the most used event handlers are ready() and load(). The ready() event handler is used most often to ensure that the HTML document is loaded before running a script. This is particularly important when you use the jQuery selector ($()) function. You cannot select an element that hasn’t been loaded yet. Therefore the $() function is often wrapped in a ready() event handler as shown below:
Continue reading “Event Handling with jQuery”

Getting to grips with jQuery

jquery-logojQuery, with all its plugins, is one of my favorite implementations of JavaScript and one we use quite often on our websites. This is the first in a series of tutorial on using jQuery and begins with understanding selectors.

Introduction

Not too long ago, when Internet Explorer 6 was the dominant browser, JavaScript fell out of favor as it could be used to exploit browser vulnerabilities in Internet Explorer 6. But with the emergence of newer, more advance browsers, such as Mozilla Firefox and Google Chrome, and the improved Internet Explorer 7 and 8, browser security has been much improved. At the same time, the internet user experience has become more dynamic and more interactive thanks to technologies like Ajax and libraries such as jQuery that are based on JavaScript.
Continue reading “Getting to grips with jQuery”

Some useful HTML escape codes

xhtmlSome useful HTML escape codes aka special characters that we’ve often made use of in our websites. This is not a complete list but I thought we’d put it up here as a quick reference guide.

Char Description Code Number
  Non-breaking space &nbsp; &#160;
& Ampersand &amp; &#038;
' Apostrophe &apos; &#039;
< Less-than sign &lt; &#060;
> Greater-than sign &gt; &#062;
© Copyright mark &copy; &#169;
® Registered trademark &reg; &#174;
Continue reading “Some useful HTML escape codes”