FalafelCon "Building Single Page Apps in ASP.NET MVC" Slides

Posted by: on | Tuesday, June 11, 2013     Comments

Thanks to everyone who came out to my session today on developing single page apps in ASP.NET MVC. I've posted the slides and source code in this blog post. Please feel free to contact us if you have any questions.

Building Single Page Apps in ASP.NET MVC (PDF Slides)
Building Single Page Apps in ASP.NET MVC (GitHub Code)

Control Designers for JavaScript Widgets in Sitefinity

Posted by: on | Friday, May 31, 2013     Comments

We are excited to introduce a new feature in Falafel Tornado: control designers for your HTML5 / JavaScript widgets!! Take a fresh look at the control properties for widget blocks:


There's a lot more going on here than meets the eye. You still select the HTML5 / JavaScript widget to use as before, but what's interesting is that you now get a whole bunch of other selectors. These selectors will feed the property values to your widget block to consume!

For example, say you have an image carousel. It needs an album ID right? That way, it can ...

Multiple desktops for a Windows world

Posted by: on | Tuesday, May 14, 2013     Comments

You will probably agree that having 2+ monitors is one of the most productive enhancements you can do to your PC setup. It is not so easy when traveling or if you are embracing the post-PC era. This is why it is vital to have "multiple desktops" instead. This is not a new concept if you are coming from the Mac or Linux world. Why Windows still has not jumped on this is beyond me. Until this light hits them, let me introduce you to Dexpot.

First thing you will notice is a quick view in the taskbar. This ...

Avoid IE Hacks with Kendo UI's Browser Detection

Posted by: on | Thursday, May 09, 2013     Comments

Cross-browser compatibility can be a major pain. The philosophy for most web developers is to code against a standard-complaint browser (Chrome), then apply CSS hacks later for other browsers that need to play catch up (Internet Explorer). In other words, it is better to make your code forward-compatible and apply backward-compatible hacks instead of the other way around.

One technique for cross-browser compatibility is using conditional comments in the HTML like this:

<!--[if IE]>
<style type="text/css">
  p { margin-left:20px;}
</style>
<![endif]-->


This works great, but it is very awkward and ...

Using Kendo UI template engine with RequireJS

Posted by: on | Thursday, May 02, 2013     Comments

To make your JavaScript more manageable, you should have a template engine of choice. I have been using Mustache.js for quite some time and love it. Instead of doing this:

var content = 'This is a ' + testA + ' test to ' + testB + ' put strings ' + testC;

You really should be doing this:

var template = 'This is a {{testA}} test to {{testB}} put strings {{testC}}';
var data = { testA: 'blog', testB: 'efficiently', testC: 'together' };
var content = Mustache.render(template, data);

Sure it looks like more lines of code, but throw ...

Marketplace Released for Falafel Tornado

Posted by: on | Sunday, April 07, 2013     Comments

Last month, we announced the release of Falafel Tornado, a widget builder allowing you to create HTML5 / JavaScript widgets like image carousels and blog rotators on-the-fly without having to compile or deploy. Today, we are excited to unleash the Falafel Tornado Marketplace to allow you to download and share widgets from your Sitefinity backend!

The Falafel Tornado Marketplace comes as a slide-out from within the Content > Widget blocks area. No more trying to copy code from the community or cracking open your Visual Studio:



Do you have a great idea for a widget that you would like ...

How to avoid loading jQuery twice with RequireJS

Posted by: on | Thursday, February 28, 2013     Comments

When working with existing sites or content management systems, you have little say on where and when jQuery is loaded. To complicate matters, some pages may have jQuery auto-loaded, and others may not (yay for performance boosts, nay for client-side plugins). Do you bite the bullet and write unmanageable scripts? Or do you believe in RequireJS and dodge the bullet matrix-style? Let me show you how.

With RequireJS, you can asynchronously load JavaScript files when needed. For example, you can write a simple JavaScript module that depends on jQuery like this:

require([
   'jquery'
], function ($) {
   $('body').append(...

A Widget Builder for Sitefinity (Preview)

Posted by: on | Tuesday, February 26, 2013     Comments

In a previous post, I showed how to create JavaScript widgets in Sitefinity using shared content blocks. This enabled you to create widgets like image carousels and blog rotators on-the-fly without having to compile or deploy. It was so useful in production and we received a lot of good feedback from the community. This is why we felt it deserved to evolve more and began creating a full-fledged Widget Builder for Sitefinity!

The idea is simple… when writing a web-based widget or control for a website, you need a mixture of HTML, CSS, and JavaScript. A portion sometimes goes ...

Enable SSL in Development with IIS Express

Posted by: on | Friday, February 22, 2013     Comments

While developing web applications, it is common that you must test the site in SSL mode. Normally, this would be a pain and would require you to set up the site in IIS manually. From then on, you must attach the debugger in Visual Studio to the application pool process. There's an easier way!

IIS Express has been given a lot of attention with the Microsoft 2012 tools and it is certainly a better alternative to Cassini. And yes, IIS Express really is the full-fledged IIS except the config files are located in "C:\Users\%USERNAME%\Documents\IISExpress\config" rather than in the machine-wide location. ...

Taming Sitefinity's Navigation Control

Posted by: on | Tuesday, February 12, 2013     Comments

Navigation is one of the most important functions in any CMS. It is the doors you scatter throughout your site so your visitors can get around. It is no wonder there is an entire eco-system of menus... drop downs, horizontals, verticals, responsive design, tabs, panelbar, tree-view, content slide-outs, and the list keeps growing. This is one the most common requests for any web designer or developer. Just search the Sitefinity forums and you will see :)

The problem with using the Sitefinity navigation widget is that you have little control over the HTML that is rendered for the menu. ...

Generic Repository Pattern with Entity Framework and Web API

Posted by: on | Tuesday, February 05, 2013     Comments

If you are like any other coder, cutting and pasting snippets should put up a red flag in your mind. You will quickly hit this threshold when creating CRUD-services for MVC 4 applications over and over again. This lead me to create a repository pattern using generic types and base controller classes that I would like to share with you. In the end, below is how my Web API classes look like, which automatically give me create, retrieve, update, and delete functionality:

using MvcWebApp.Helpers;
using MvcWebApp.Models.Data;
  
namespace MvcWebApp.Api
{
    public class SpeakersController : BaseApiController<Speaker>
    {
        //THIS ...

Building Single Page Applications with CanJS and RequireJS

Posted by: on | Monday, January 07, 2013     Comments

The web users of today expect a modern experience that only a single page application can deliver. Page refreshes are a thing of the past. Waiting for anything longer than 2 seconds without a "cool effect" is not acceptable. Responsive design for tablets and smartphones should just work.

These demands of the new era have spawned new ways to develop JavaScript applications. For modern, scalable, and extensible JavaScript applications, two techniques are on the forefront: MVC patterns and AMD design. For this demo, we will be using RequireJS for AMD modular design and CanJS for MVC.

By the way, I ...

Creating JavaScript/HTML5 Sitefinity Widgets

Posted by: on | Wednesday, January 02, 2013     Comments

Today I am going to introduce to you a new way of building Sitefinity widgets. A couple of them are actually live on our new home page. The image carousel and blog rotator are JavaScript widgets stored in shared content blocks. It's only a few lines of script and very elegant. See for yourself:

<div id="myCarousel" class="carousel slide hidden-phone"> <div class="carousel-inner"> <div class="loading-page"></div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</...

Sending Request Headers via jQuery AJAX

Posted by: on | Tuesday, December 18, 2012     Comments

Ever wanted to send request headers from jQuery instead of the "code-behind"? You can easily tweak the ajaxSetup object like this:

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Parse-Application-Id', 'QIDkel*****SR2c3');
        xhr.setRequestHeader('X-Parse-REST-API-Key', 'mbm311*****d0X2N');
    }
});
  
    console.log(data);
});



This is especially important when you need to be authenticated to use a service or API. Think of assigning server-signed auth tokens (that you generate on your own servers) to client-side apps. Now with every jQuery AJAX call, tokens get sent back to the server ...

Modular JavaScript Design with Sitefinity and RequireJS

Posted by: on | Wednesday, October 03, 2012     Comments

What if I were to tell you that you can build modular client-side applications in Sitefinity and also not worry about JavaScript dependencies or conflicts? This should be music to your ears if you do any JavaScript development in Sitefinity.

First thing is you need to have solid understanding of what the Asynchronous Module Definition (AMD) is. Essentially, it is a standard for defining self-contained modules that loads dependencies asynchronously on demand. I suggest you take 10 minutes to read my blog post about this with examples. This will permanently change the way you think about JavaScript development. Once ...

Integrating ASP.NET MVC 4 into Existing Web Forms Applications

Posted by: on | Wednesday, September 26, 2012     Comments

So you have seen the light and ready to make the jump into ASP.NET MVC. But wait! You are not ready to migrate a million lines of code from your legacy Web Forms application? No problem. You can easily integrate MVC 4 into your existing Web Forms application and gradually phase out the legacy stuff over time.

There are many articles and blog posts about this topic. However, most are outdated or take the loooong way. I have a simple, clean solution for you! Here it goes:

  1. Upgrade your Web Forms application to .NET 4 (and Visual Studio 2012 if ...

Building JavaScript Apps using Modular and MVC Patterns

Posted by: on | Tuesday, September 18, 2012     Comments

In this post, I would like to open your eyes to a new way of developing JavaScript applications. We will be building modular JavaScript code on an MVC architecture while also handling dependencies. With these techniques, you can join a new era of web development and stop coding like it's 1999!

Prince - 1999

Asynchronous Module Definition (AMD)

First, let us get some terminology out the way. The Asynchronous Module Definition, or AMD, is a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. In other words, JavaScript files and units of code can be loaded via ...

Relative paths in MVC Razor

Posted by: on | Thursday, September 13, 2012     Comments

Did you know in Razor markup you can do this:


<img src="~/Images/downarrow.gif" />
<a href="~/somehwere">Link</a>

And it will get auto-resolved on render, such as:


<img src="/MyApp/Images/downarrow.gif" />
<a href="/MyApp/somehwere">Link</a>

Another welcomed gem in MVC 4 :)

MVC Comes to Sitefinity 5.1!

Posted by: on | Tuesday, July 17, 2012     Comments

Update: To learn more, we're now offering an instructor-led Foundations of Sitefinity 5.1 class, where you'll learn how to use ASP.NET MVC + Razor, JavaScript and Kendo UI in Sitefinity 5.1. 

Sitefinity joins the MVC ranks with its 5.1 release and boy is it impressive. What makes it so unique is that Web Forms is still offered in the platform for developers to use as an alternative or hybrid approach. You heard that right, mix Web Form and MVC controls on the same page! Furthermore, with the MVC-only implementation, page templates are rendered as pure, unpolluted HTML pages. This is ...

Using ASP.NET Web API for Sitefinity REST Services

Posted by: on | Tuesday, June 19, 2012     Comments

Sitefinity leaves a lot to be desired with the REST services. For example, take a look at the returned data from Sitefinity's news service out-of-the-box:

{
   "Context":[
      {
         "Key":"String content",
         "Value":"String content"
      }
   ],
   "IsGeneric":true,
   "Items":[
      {
         "Author":"String content",
         "AvailableLanguages":[
            "String content"
         ],
         "CommentsCount":2147483647,
         "DateCreated":"/Date(928164000000-0400)/",
         "DateModified":"/Date(928164000000-0400)/",
         "DefaultPageId":"1627aea5-8e0a-4371-9022-9b504344e724",
         "ExpirationDate":"/Date(928164000000-0400)/",
         "Id":"1627aea5-8e0a-4371-9022-9b504344e724",
         "IsDeletable":...