SitePoint » Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and More » .NET

Combining LESS with ASP.NET

Malcolm Sheridan — Thu, 29 Mar 2012 16:00:01 +0000

Everyone knows how cool LESS is. If you’re not, then here’s the elevator speech. LESS extends CSS with dynamic behavious such as variables, mixins, namespaces and functions, it makes CSS easy to work with. Now, it’s important to remember it doesn’t code your CSS for you – it isn’t a magic CSS editor. You still need to know how to work with CSS. It allows you to write CSS once and use it in multiple places. This is something I’ve wanted for a long time and now it’s here.

There are other libraries which perform similar functions, such as SASS, but I’ll focus on LESS as that’s what I’m familiar with. I’m going to be concentrating on how to use this with ASP.NET.

I’m going to be using Visual Studio 2010 for this demonstration, as I had a few issues using LESS with Visual Studio 11.

Running LESS On the Client

LESS can be run purely on the client or from the server. To run it on the client is a simple three step process.

Add a reference to the LESS JavaScript file
Update the rel value in the LINK tag to rel=”stylesheet/less”
Add a new .less file to your project and reference that in your LINK tag

Updating the rel value to stylesheet/less is necessary because the LESS library looks for this value. Once it’s found it processes that file. Your page should look like this now.

I’m referencing a file called my.less, so let’s define some LESS code to ensure this is working.


@back-color: #000;
@font-color: #fff;
body {
  background-color: @back-color;
  font-size: .85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: @font-color;
}

I’ll skip over the syntax for now, but if you run the website and look in the developer tools, you’ll see that LESS code is being served as valid CSS.

Running LESS On the Server

There are several ways to install LESS on the server. The easiest approach is via NuGet. There’s a package called dotless. Install it with the following command inside Visual Studio.

Once installed, you can remove the JavaScript reference from your page. Also make sure you update the LINK tag and remove the /less from the rel attribute.

The package has also added some entries to your web.config file. There’s a new configSection defined.

And a new HTTP handler has been added to cater for .less requests.

The nice feature about dotless is that it can automatically minify the CSS for you via the minifyCss attribute. If you update that to true and run the website now, you’ll see the minified CSS.

That’s it. LESS is now running on the server.

When To Use It?

I think LESS is great for development, but when you need your site to run as fast as possible, you don’t want to transform each .less request on the fly. This is why I’d recommend using this only during development. The good news is when you install dotless, it installs the dotless compiler. This can be in the packages\dotless1.3.0.0\Tool folder in your website folder.

You can add this to your pre-build event from the build properties tab.

“$(SolutionDir)packages\dotless.1.3.0.0\tool\dotless.Compiler.exe” “$(ProjectDir)content\my.less” “$(ProjectDir)content\my.css”

This way you get the best of both worlds.

Before moving away from Visual Studio, there are extensions you can install that gives you the familiar syntax highlighting. LessExtension seems like one of the better ones.

LESS Syntax

I haven’t covered any of the syntax in this article. I wanted to focus on LESS with ASP.NET. Ivaylo Gerchev has a good article on the syntax and that can be found here.

I think LESS is a must tool to have during development. It will make your life easier when coding CSS.

ASP.NET 4.5 Bundling and Minification Update

Malcolm Sheridan — Tue, 20 Mar 2012 16:00:51 +0000

Recently I wrote an article on the new bundling and minification features in ASP.NET 4.5. Out of the box, you get bundling and minifincation without really needing to do anything. If you missed it you can find it here.

Since that article, there have been some changes to ASP.NET 4.5. Previously you needed to manually add the following line of code in the Global.asax file:

protected void Application_Start()
{
    BundleTable.Bundles.EnableDefaultBundles();
}

Since the update to ASP.NET 4.5, you no longer need to manually add that line of code. It’s automatically there when you begin a new project.

protected void Application_Start()
{
    BundleTable.Bundles.RegisterTemplateBundles();
}

The code for referencing the bundled and minified CSS and JavaScript files has been updated too. Previously to reference a bundle, you’d add the following code:

This is assuming you have your JavaScript files in a folder called scripts, and your style sheets are in a folder called content. This still works with this new release. The problem with referencing the files this way is when you update the files, the old versions will still be cached either by your browser, or by a web proxy. By default the files are cached for 1 year, this is great if you never update them! Microsoft has addressed this issue by allowing you to reference the bundled and minified files via ResolveBundleUrl.

The benefit of using ResolveBundleUrl is that it appends a magic string at the end of the file name. This magic string only changes when the file changes, meaning the files will be cached for 1 year or until they change. If you inspect the page through the developer tools in Google Chrome, you’ll see the magic string.

You can include a @using keyword to remove the need to fully qualify the System.Web.Optimization assembly.


@using System.Web.Optimization

Be certain to remember the use of this feature when developing with ASP.NET 4.5.

ASP.NET MVC 4 – Web API

Malcolm Sheridan — Tue, 06 Mar 2012 23:50:27 +0000

A beta version has just been released for ASP.NET 4. Among the many new features included in this release is the Web API framework, but what is it? Basically, it allows you to create services that can be exposed over HTTP rather than through a formal service such as WCF or SOAP. If you’ve ever used the Facebook or Twiiter API, you’re already familiar with them. For me, this is one of the most exciting new features!

Web API was originally the WCF Web API project. Developing an API this way meant you followed the rules governed by WCF; starting with an interface, creating classes to derive from the interface, and then decorating the interface with the WCF attributes to form the endpoints. This was not a fluent process. WCF is tough and people like the ease that ASP.NET allows, Microsoft saw this and created Web API. They took the best pieces from WCF Web API and the ease of development that ASP.NET MVC allows.

Installation

Right now you can install MVC 4 beta for Visual Studio 2010 via the We Platform Installer. This requires ASP.NET 4 if you haven’t previously installed it, and can be downloaded from here.

Visual Studio 2011 Developer Preview has also just been released to the public. As an ASPInsider, we’ve had access to the release for quite some time, and I’m very happy with the new metro look and feel. If you’d like to install it, it can be downloaded here. All of the code and screen shots are from the new version.

Getting Started

To get started writing your first Web API, open Studio 2011 and choose ASP.NET MVC 4 Web Application. The Project Template dialog will pop up next. There’s a couple of new choices, such as Mobile Application and Single Page Application (SPA), but for now choose Web API.

Before looking at any code, open the global.asax file and take a look at the default route.

public static void RegisterApis(HttpConfiguration config) {
 config.Routes.MapHttpRoute(
  "Default", // Route name
  "{controller}/{id}", // URL with parameters
  new { id = RouteParameter.Optional } // Parameter defaults
 );
}
protected void Application_Start() {
 RegisterApis(GlobalConfiguration.Configuration);
}

The main difference bewteen MVC routes and Web API routes is there’s no route defined for an action. That’s because Web API uses the HTTP method, not the URI path, to select the action.

I’ve created a simple Product class to represent the model and added that to the Models folder.

public class Product {
 public int ID { get; set; }
 public double Price { get; set; }
 public string Name { get; set; }
}

Now I’m going to add a new controller called ProductController. There’s some new additions you can choose in this dialog for scaffolding options, but for now I’m going to generate an empty controller.

The controller looks the same, but Web API controllers derive from ApiController.

public class ProductController : ApiController {
 // GET: /Product/
 public ActionResult Index() {
  return View();
 }
}

Remember Web API uses HTTP methods, so we can map out the following HTTP methods:

Action	HTTP method	Relative URI
Get a list of all products	GET	/products
Get a product by id	GET	/products/id
Create a new product	POST	/products
Update a product	PUT	/products/id
Delete a product	DELETE	/products/id

The naming conventions in Web API follow the names of the HTTP methods, GET/POST/PUT/DELETE. You’ll see how these are mapped to the code in the following sections.

GET Actions

public List Get() { 
 return _productsRepository.ToList(); 
} 
public Product Get(int id) { 
 return _productsRepository.First(p => p.ID == id); 
}

Notice how I’ve defined two Get actions? This is because when the user invokes the API, they’ll pass in the HTTP method. If an incoming request is a GET request, and it doesn’t have an ID, it will call the Get action to return a list of products. If an ID is there, it invokes the Get action for a specific product. Nice and simple. And how can you test this code? I’m going to use Fiddler for this. If you’ve never used it, you should get it now.

Using Fiddler I can create a GET request in the Composer builder. Calling http://localhost:1717/Product will return the list of products.

If I want only one product, I can pass in an ID; http://localhost:1717/Product/1. By default JSON is returned from all action methods. If you want a different format, like XML, just add in the Accept request head application/xml:

Without changing any code, it returns the result in XML.

POST Actions

public void Post(Product product) { 
 _productsRepository.Add(product)
}

Following on from the GET requests are POST requests. This is where data will be created. Again I’ve named the action the same as the HTTP verb, so all I need to change is to add the Content-Type to application/json, and send up the JSON object. I can add the following request headers in Fiddler to post the new product.

If you check the HTTP response code, you’ll see it returns 200, which is OK, but for a POST it should ideally return a 201 status code. This will indicate to the user that the product was successful. Also 201′s are supposed to have a Location value, so we’ll add that also.

public HttpResponseMessage Post(Product product) {    
 _productsRepository.Add(product);    
 var response = new HttpResponseMessage(product, HttpStatusCode.Created);    
 string uri = Url.Route("http://localhost:1717/", new { id = contact.Id });    
 response.Headers.Location = new Uri(Request.RequestUri, uri);    
 return response;
}

Instead of returning void, we’re returning a new type HttpResponseMessage. This gives you the flexibility of changing the returned status code as well as the response headers. Now if you run this through Fiddler, you’ll see a 201 returned plus the Location header.

PUT Actions

public void Put(Product product) { 
 _productsRepository.Update(product)
}

Put actions update resources, so returning a 200 or 204 is fine. By default, 200 is returned, so for this reason we don’t have to do anything to the action.

It’s worth noting that for the post and put actions I’m sending JSON. If I change the content-type to XML, I could easily send XML instead of JSON without having to change any code in the API. Web API automatically breaks the incoming request to strongly typed objects and maps the name properties.

DELETE Actions

public void Delete(Product product) { 
 _productsRepository.Delete(product)
}

Delete actions delete resources, so depending if the resource is deleted immediately or at a later stage can determine the status code. If the resource is deleted immediately, the status code should be 200. If the deletion is for a later stage, then a 202 status code should be returned.

public HttpResponseMessage Delete(Product product) { 
 _productsRepository.Delete(product);
 var response = new HttpResponseMessage(product, HttpStatusCode.Deleted);
 return response;
}

I’ve only scratched the surface of Web API, over the coming weeks I’ll explore different ways to use it.

ASP.NET 4.5 Strongly Typed Data Controls & Model Binding

Malcolm Sheridan — Mon, 13 Feb 2012 00:25:57 +0000

I’m continuing on these series of articles about what’s new in ASP.NET 4.5.

One pain point that’s dogged WebForm developers for some time is the fact that there haven’t been any strongly typed data controls. Some of the data controls I’m speaking of include the Repeater, FormView and GridView controls. They all used templates, which could allow you to specify a view for different operations, such as when you’re editing data compared to adding new data.

When you use these templates today, they’re using late bound expressions to bind the data. If you’re using the GridView control, or any of the other data controls, you’ll be familiar with the Bind or Eval syntax:

One of the problems with late-bound data controls is you’re using a string to represent a property name. If you make a mistake typing the name, you won’t see the exception until runtime. It’s much better to catch these errors at compile time. Thankfully Microsoft has addressed this in ASP.NET 4.5 by implementing strongly typed data controls.

Installation

Before starting any development, you’ll need to install ASP.NET 4.5. The simplest way to do this is via the Web Platform Installer. All of the ASP.NET 4.5 articles I’m authoring are developed in Visual Studio 2011 Developer Preview. Here’s the link to get started.

ASP.NET MVC 4 for Visual Studio 2011 Developer Preview

Strongly Typed Data Controls

ASP.NET 4.5 introduces strongly typed data controls in the templates. A new ModelType property has been added to the data controls, and this allows you to specify the type of object that is bound to the control.

Setting this property will add that type to the data controls Intellisense (an autocomplete function), which means no more typing mistakes! This removes the need to run the website to see if you’ve made any typing mistakes during development.

In this example, I’ve connected to a Northwind web service. Using ASP.NET 4.5, I can set the ModelType to Northwind. If the requirement is for one-way data binding, you can use the Item expression. Bind("Name") becomes Item.Name. The same goes for the City property. Replace Bind("Address.City") with Item.Address.City.

For two-way data binding, use Binditem. So using the example above, data binding to a text box would be like this:

Intellisense is available, so there’ll be no more mistyped properties you only find out about at runtime.

Model Binding

Model binding focuses on coded data access logic. Previously if you wanted to display data in the GridView control, you either had to explicitly set the DataSource property and call its DataBind method from the code behind. Like this example:

protected void Page_Load(object sender, EventArgs e)
{
     var products = GetProducts();
     GridView1.DataSource = products;
     GridView1.DataBind();
}

Alternatively you could use one of the many data source controls to bind the data to the GridView. Now that model binding is part of ASP.NET, you can explicitly tell the GridView which method to call to retrieve its data by using the SelectMethod property. Here’s the updated GridView.

And in the code behind, here’s the GetProducts method:

public IQueryable GetProducts()
{
    var service = new NorthwindService.DemoService(new Uri(@"http://services.odata.org/OData/OData.svc/"));
    var suppliers = (from p in service.Suppliers
                             select p);
    return suppliers;
}

This method doesn’t need to be in the code behind. It could live in another class or assembly. The benefit of returning IQueryable is that it enables deferred execution on the query, and allows a data-bound control to further modify the query before executing it. This is useful when you need to implement sorting and paging methods.

I’m excited by the model binding and strongly bound data controls in ASP.NET 4.5. It has certainly borrowed these ideas and concepts from MVC, so fingers crossed more of them are implemented in upcoming versions.

The code for this article can be downloaded from here.

PHPMaster: How I Chose My Programming Editor

J Armando Jeronymo — Fri, 13 Jan 2012 23:32:42 +0000

For many years I used a code editor that is now discontinued by its developers, and the introduction of HTML5 and CSS3 led me to look for an editor that supports the new tags and properties. In this article I’ll share the criteria and process I used to find an editor suitable for making quick fixes and a development environment for large-scale projects. My initial candidate list contained over 30 popular Linux, Java, Windows and XUL software packages which had at least one stable release after January 1, 2010: Arachnophilia, Bluefish, Bluegriffon, CoffeeCup HTML Editor, Dreamweaver, Eclipse PDT, Emacs, Expression Web, Geany, gedit, HTML-Kit, jEdit, Kate, KDevelop, Komodo Edit, KWrite, Netbeans, Notepad++, Notepad2, OpenBEXI, PHPEdit, PHPEd Pro, PHPStorm, Programmer’s Notepad, PSPad, RadPHP, Scite, SeaMonkey, Vim, WebDev, WebMatrix, and Zend Studio. You can google each program for their specific details

RubySource: Smelly Cucumbers

Dave Kennedy — Fri, 13 Jan 2012 21:31:16 +0000

It was such a cliche of a title, I just had to use it. I’m sure you have heard of the great BDD tool Cucumber , but what you may not know about is how smelly cukes can be. I have recently been revising and refactoring my cucumber features in absolute disgust. In my defense, I started writing cucumber in earnest 6-7 months ago

See more here:
RubySource: Smelly Cucumbers

ASP.NET 4.5 Bundling and Minification Support

Malcolm Sheridan — Fri, 13 Jan 2012 14:07:31 +0000

If you’re serious about web development, you strive for a fast website. Nothing beats the feeling of sitting back and viewing a great website that’s fast. Speed matters. Your customers expect it. If you don’t think they do, you’re living in a different world to mine. With a growing trend of consumers buying online in 2011, developers have to cope with the extra devices customers will use to browse your website.

There are many ways to increase the performance of a website, but the way with the biggest impact by far is to decrease the number of HTTP requests. Every time you reference an image, CSS file, JavaScript file, video, audio or a flash file, that adds an extra HTTP request. That is time that could be used elsewhere, such as taking customer orders!

One way of reducing the number of HTTP requests is to combine the files. If you have three style sheets sitting in your web page, that’s three separate HTTP requests. Combining them into one file means there’s only one HTTP request.

You can take this one step further and add minification to this process. Minification is the process of stripping out all of the white-space and comments from your CSS and JavaScript files.

If you’re familiar with ASP.NET, bundling and minification was always a job for your build process. With the advent of Visual Studio 2011 and ASP.NET 4.5, Microsoft has added bundling and minification out of the box, which in my opinion has been long overdue. This process happens at run-time and is available to ASP.NET WinForms, MVC and Web Pages.

Installation

Why Do This?

The answer is simple; to reduce the number of HTTP requests that go between the client and server. The result is a faster website. By default when you create a new MVC 4 website, the following JavaScript files are loaded into the page.

Looking at this through Chrome you can see the 4 separate HTTP requests.

We can do better that that! After you bundle it, you’ll see one request.

Where’s the Magic?

The magic happens at runtime in ASP.NET 4.5. Instead of referencing each JavaScript file separately, you can replace them all with this:

And you can also bundle and minify your CSS files too by adding this line of code:

This is assuming you have your JavaScript files in a folder called scripts, and your style sheets are in a folder called content. This is configurable, of course – as you’ll soon see.

Before this will work, you need to add one line of code to the global.asax file in the Application Start event.

Bundle.Bundles.EnableDefaultBundles();

The need for this line of code will be removed when ASP.NET 4.5 is released. When the website is running, if ASP.NET encounters either of these tags, it will automatically bundle and minify each file in the given folder and send back a single HTTP response for the JavaScript file and a single response for the CSS. Out of the box you don’t need to do anything else. This is a welcome feature.

By default, when the files are bundled by ASP.NET they are in alphabetical order. If there are known libraries such as jQuery, jQuery UI and Dojo, they are loaded first. For the CSS files, they are also bundled in alphabetical order. The results can be seen in the image below.

Custom Rules

If the default bundling rules don’t give you the control that you need, you can always create your own bundling rules. A common reason for doing this is to group common libraries. There aren’t too many occasions when you need to bundle your entire JavaScript or CSS files into the one file. To create a custom rule you create a new Bundle object. Then you add files individually or an entire directory.

var jSBundle = new Bundle("~/CustomJs", typeof(JsMinify));
jSBundle.AddFile("~/Scripts/CustomFunction.js");
jSBundle.AddFile("~/Scripts/jquery-1.4.1-vsdoc.js");
jSBundle.AddFile("~/Scripts/jquery-1.4.1.js");
jSBundle.AddFile("~/Scripts/JSONCreate.js");

Notice the type JsMinify above? That’s the default object that bundles and minifies the JavaScript files. For CSS, you use CssMinify like the example below.

var cssBundle = new Bundle("~/CustomCss", typeof(CssMinify));
cssBundle.AddFile("~/Content/Collection.css");
cssBundle.AddFile("~/Content/GlobalSupport.css");
cssBundle.AddFile("~/Content/MasterStyle.css");
cssBundle.AddFile("~/Styles/MenuStyle.css");

To reference these custom rules, you put the name of each bundle in your HTML.

or

Custom Processing

If you want total control, you can override the default CSS and JavaScript bundling support and replace it with a custom process. An easy way to do this is to create a class that implements the IBundleTransform interface. The following example is trivial but it demonstrates how to do this. The example inserts a company copyright into each JavaScript files and sets the default cache for the file.

public class AddCopyrightToFiles : IBundleTransform
{
    public void Process(BundleResponse bundle)
    {
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("// Copyright your company");
        sb.AppendLine(bundle.Content);
        bundle.Content = sb.ToString();
        bundle.Cacheability = HttpCacheability.ServerAndNoCache;
    }
}

And to use this custom process, create a new Bundle and reference the custom class.

BundleTable.Bundles.EnableDefaultBundles();
Bundle customBundle = new Bundle("~/CustomBundle", typeof(AddCopyrightToFiles));
customBundle.AddFile("~/Scripts/CustomTypes.js");
BundleTable.Bundles.Add(customBundle);

And in the HTML, just reference the bundle by its name.

Unbundle JavaScript Files

It’s worth noting that there are services that will unbundle your files, or beautify them. The one I love to use is jsbeautifier. This flattens the file. One of the biggest drawbacks of bundling and minification is readability.

PHPMaster: Zend Job Queue

Alex Stetsenko — Wed, 11 Jan 2012 23:48:32 +0000

Web applications usually follow a synchronous communication model. However, non-interactive and long-running tasks (such as report generation) are better suited for asynchronous execution. One way to off-load tasks to run at a later time, or even on a different server, is use the Job Queue module available as a part of Zend Server 5 (though not as part of the Community Edition). Job Queue allows job scheduling based on time, priority, and even dependencies.

See the article here:
PHPMaster: Zend Job Queue

PHPMaster: Introduction to PhpDoc

Moshe Teutsch — Mon, 09 Jan 2012 22:00:30 +0000

If you’ve ever tried to read code written by someone other than yourself (who hasn’t?), you know it can be a daunting task. A jumble of “spaghetti code” mixed with numerous oddly named variables makes your head spin. Does this function expect a string or an array? Does this variable store an integer or an object?

Taken from:
PHPMaster: Introduction to PhpDoc

PHPMaster: ClamAV as a Validation Filter in Zend Framework

Matthew Setter — Sat, 07 Jan 2012 05:56:26 +0000

Ok, so you’re pretty comfortable with using the Zend Framework, specifically the use of Forms. Along with that, you have a good working knowledge of how to combine a host of standard validators such as CreditCard , EmailAddress , Db_RecordExists , and Hex , and standard filters such as Compress/Decompress , BaseName , Encrypt , and RealPath . But what do you do when a situation arises that’s outside the scope of the pre-packaged validators and filters? Let’s say you want to guard against users uploading files that contain viruses, for example.

More here:
PHPMaster: ClamAV as a Validation Filter in Zend Framework

Hadoop 1.0 Release – Big Data for everyone

Toby Tremayne — Thu, 05 Jan 2012 22:24:47 +0000

CloudSpring: Apparently 90% of the data in the world was produced in the last two years – which should give you some idea of just exactly how much data is being accumulated the world around, especially by large companies like Google. The data field is so enormous that traditional methods of linking, searching and retrieving data don’t work any more. This is Big Data. Big Data The term “Big Data” was popularized by Roger Magoulas from O’Reilly in 2005, although avid net trawlers have found evidence of the term being used occasionally as far back as 2001

Continued here:
Hadoop 1.0 Release – Big Data for everyone

RubySource: Cooking with Chef Solo

Dave Kennedy — Tue, 03 Jan 2012 21:50:28 +0000

Chef is billed as “A systems integration framework, built to bring the benefits of configuration management to your entire infrastructure”. It doesn’t matter how many times I read that, I still hear a ‘whoosh’ over my head. Put simply, we can manage server configurations through good old familiar Ruby. The gist of Chef is we create cookbooks, these cookbooks use the Chef DSL to install and configure packages we require for our servers

Read the article:
RubySource: Cooking with Chef Solo

PHPMaster: Watermarking Images

Timothy Boronczyk — Sat, 31 Dec 2011 05:48:09 +0000

Imagine a friend of yours approaches you one day and would like you to build her a website so she can showcase her photography. She wants to be able to easily upload her photographs and have them watermarked so that people can’t easily steal them. “Don’t worry!” you tell her, because you know there are functions provided by the Imagick extension that makes watermarking images a breeze in PHP. This article shares a few pointers on what makes an effective watermark, and then shows you how to use the Imagick functions to add a watermark to your image.

See the article here:
PHPMaster: Watermarking Images

RubySource: Rubylutions for 2012

Glenn Goodrich — Fri, 30 Dec 2011 22:53:59 +0000

Sometimes the idea for an article strikes me out-of-the-blue, like a lightning bolt or an airborne toxin. The quality of these sudden onset ideas varies greatly, and it usually directly proportional with the number of beers I’ve had pre-idea strike. My most recent attack hit me in bed as I was drifting off. It said: “Write a post about Ruby resolutions for the new year.

More here:
RubySource: Rubylutions for 2012