Blog

BlockUI Blocking More Than UI

June 21, 2013 by Damien White

Today I encountered a problem with jQuery.BlockUI and I’m hoping to alleviate someone else from having to deal with the grief that I experienced. With a demo coming up in a few days, we were attempting to publish an ASP.NET MVC app to our test environment for the first time. Having done such a thing many times before, it should have been easy, but of course, if you’ve been in this business for some time, you know that never happens.

CoffeeScript Problem?

To start with, I tried publishing to my local IIS server, just to flush out any problems. Then, bingo, right out of the gate, I noticed that a couple of my JavaScript files weren’t included in the bundle. Hmph. Ok, perhaps something was up with my BundleConfig, so I took a look at the file. Nothing seemed out of place. I included my scripts properly in the bundle. What threw me off a bit was that I actually use CoffeeScript instead of plain vanilla JavaScript. I use Mindscape’s Web Workbench within Visual Studio. This allows me to create a .coffee file and it will generate the .js and .min.js alongside the CoffeeScript file whenever you save. I figured that MVC was having an issue loading the JavaScript because there is that extra .coffee file. That got me to add the following line to my BundleConfig:

bundles.IgnoreList.Ignore("*.coffee");

ASIDE: This is in addition to clearing the default bundle ignore list. By default, in Debug mode, the bundler won’t include the minified (*.min.js or *.min.css) files. To get around that, you can clear the bundles IgnoreList and just add in what you want to ignore, e.g. *.intellisense.js. You can find more information in this forum post

Now that I ignored the CoffeeScript file, I changed my bundle includes from:

.Include("~/Scripts/myscript.js")

to

.Include("~/Scripts/myscript.*")

I actually tried the .* trick prior to ignoring *.coffee. Oddly enough, the CoffeeScript file ended up getting rendered, but not the Javascript. Odd. Anyway, as I’m sure you guessed, that wasn’t my problem…

IMPORTANT: Using the wildcard here for my situation is incorrect. I just used it for testing. Since we just have a .js and .min.js, what ends up happening is that the bundle, when rendered will include BOTH the .js and .min.js scripts, causing duplication if you have event handlers being attached. In other words, use the wildcard correctly! I ended up reverting back to just .Include("~/Scripts/myscript.js"), which is correct.

The Culprit: BlockUI

My next step was to break off my script from the rest of the bundle. I created a new bundle with just my scripts in it, and referenced it in my Layout. Success, my scripts rendered. Ok, I’m on to something now. My scripts appeared at the bottom of three other scripts. Two of them were Kendo UI scripts, and then BlockUI. Given the small number, I started messing around with two bundles. After some time, I found out the problem, it was with BlockUI. I had installed the NuGet package in my project (version 2.60), and for some reason, the minified version of BlockUI caused anything after it to not load. Odd. I didn’t dive too deeply into why this was happening, but what fixed the problem was updating to v2.60.1 of BlockUI. With v2.60.1, all seems to be working as expected.

Wrap Up

Like many of the posts on the Visoft, Inc. Blogs, my aim to help others solve their problems as quickly and painlessly as possible. It turned out that BlockUI, for whatever reason, broke my MVC bundle. It’s something to be aware of, as I’m sure there could be other scripts out there that cause a similar issue.

Watt Time Is It?

May 30, 2013 by Damien White

Available on the App Store Watt time is it?

No, that’s not a typo!

I’m happy to announce that Visoft, Inc. has released our first iOS application, WattTimeIsIt.

WattTimeIsIt is a simple application that allows you to figure out the time needed to cook something in the microwave based on the wattage. Take a microwavable dinner package that states “Microwave on HIGH for 4-5 minutes,” but in little print you see: “Microwave oven time based on an 1100W microwave.” That’s fine, but if you have a 1300W microwave, you will overcook your food based on those directions. If you have a 700W microwave, you will undercook your food. Overcooked food is miserable to eat, if you even have the opportunity. Lots of times things will boil over and spill out of the container when they are cooked too long. Of course, I suppose that’s better than undercooked food, which can be extremely dangerous.

What are you to do? Now there’s a simple solution. Simply ask “WattTimeIsIt?” and you’re all set!

Below is a screenshot of WattTimeIsIt in action.

WattTimeIsIt Microwave Converter

Did you get the hidden “homage” in that screenshot?

Read More »

Hooking Into Entity Framework With EFHooks

May 27, 2013 by Damien White

Hooking InComing from working with Rails, there are things that I miss when using .NET (as exhibited by my last post). Today I’m going to tell you about a way to bring a bit of Active Record to Entity Framework.

When using Active Record, you can hook into the process at various points to perform actions. Let’s say you want to do something before a model is created, like set a date for audit purposes.

ASIDE: Audit columns of created_at and updated_at are automatically handled by Active Record (by default). I wish this sort of functionality existed in Entity Framework, but we’ll be able to do just that if you keep reading!

Here’s a simple Rails example of hooking into the before_create callback (This example is from the Rails docs)

class Subscription < ActiveRecord::Base
  before_create :record_signup

  private
    def record_signup
      self.signed_up_on = Date.today
    end
end

Now, if there was only a way to do the same thing with Entity Framework… ;) Read More »

Bring Rails to ASP.NET MVC With Restful Routing

April 26, 2013 by Damien White

Restful Routing - Url

When I’m working with ASP.NET MVC, I find myself wanting to do things “the Rails way.” There are a lot of excellent conceptions/conventions in Rails where I think ASP.NET MVC could really learn something.

One thing I really dislike about ASP.NET MVC is the way it handles routing. I find the default route in ASP.NET MVC ({controller}/{action}/{id}) to be very ugly, antiquated, and super greedy. When I’m writing an application I like the URLs to be “hackable.” This isn’t possible with the default ASP.NET MVC routes. Take, for example, something like a book website. Using the default route, you would have something like /books/edit/1. Now what happens if we remove that one (the id)? Boom 404! What about the default route for a single book? You would have /books/details/1. You know what happens if we remove that id. The URLs just do not flow nicely.

Routing Approaches

Why do I prefer Rails routing? Their approach makes so much sense to me, not to mention that you get nice restful routes. The approach that Rails takes is called resource-based routing.

ASIDE: What is a resource you ask? You can think of a resource as a model, and with a model, you would typically want CRUD operations. That’s where the “routing” comes into play. Instead of using a greedy route, it sets up specific routes to handle the CRUD operations for a given resource. We’ll be taking a closer look at this as we continue, but if you’re eager to learn more, head over to the Rails Guides on Resource Routing.

With this resource approach, the URLs follow RESTful conventions and embrace HTTP. Isn’t that one of the key concepts behind the MVC pattern, embracing HTTP?

Let me show you an example of the difference in approaches.

We’ll base the comparison on the basic seven actions that are required to perform CRUD operations (assuming you have a New and Edit action to handle an HTML form, otherwise you would only need five).

The ASP.NET MVC Approach

Action HTTP Method URL
Index GET /books
Create GET /books/create
Create POST /books/create
Details GET /books/details/1
Edit GET /books/edit/1
Edit POST /books/edit/1
Delete POST /books/delete/1

Notice how only HTTP GET and POST are being used? HTTP has more verbs than just those two. Why not use some of these to clean up our URLs and be RESTful? Read More »

We Love Books!

March 27, 2013 by Damien White

We Love Books And We Know You Do As Well…

DevBookcase Logo

As you may or may not know, Visoft has quietly released websites for book lovers. Back in 2010, I fell in love with Ruby on Rails. The first Rails application that I worked on was one to help me keep track of my ever growing book collection. Thus the first book related website was launched, Developer’s Bookcase or DevBookcase for short. As you may guess, my book collection is mainly programming related, so I started the site for me and other geeks to keep track of our programming books. I have hundreds, how about you?

Why So Quiet?

Back in 2010, I was really just hacking around. I was really venturing into an entirely new world. Ruby, Rails, Linux, OS X, etc. If you know me, you’re probably wondering about the Linux and OS X there. Yes, I’ve really made a big shift in things, but that’s for another post. Anyway, at that point, the site was really just a big test. I kept hacking away adding things here and there, experimenting with this and that. You may have seen posts that indicated that I was playing more and more with Rails, like my gem issue, and my mongrel issue. Those were early on. I was using Rails 2.3.x and I was messing with shared hosting (yuck). Things worked, but I wasn’t confident, mainly because I had to bump my nose a bit to learn the ropes. Anyway, long story short, I got distracted… Read More »

Streaming Large Files Asynchronously using .NET 4.5

March 26, 2013 by Dave Marini

Recently I had a project that required me to be able to transfer large files via a service call to a remote server where the file would be ingested by an always-on application for further processing. When thinking about the requirements for such a service, a few things came to mind:

  1. The transfer had to be streaming, as attempting to buffer requests for files in excess of 100MB would be taxing on the host server.
  2. To maximize throughput, the requests need to be released as fast as possible so that new requests can be processed.
  3. The service should be as simple and quick to build as possible.

After a bit of research on the matter, I struck the jackpot with the HttpTaskAsyncHandler class and the recently introduced GetBufferlessInputStream() method and I soon got to work on mocking up the functionality.

Read More »

Kendo UI Upload Control With Existing Files

February 25, 2013 by Damien White

Kendo UI

If you hadn’t guessed by my last two posts, I’ve been using Telerik’s Kendo UI controls for a project I’m working on. Today we’re going to talk about the Kendo UI Upload control, which I have been using in asynchronous mode. As I’ve stated plenty of times before, I’m not a huge fan of 3rd party controls, but the Upload control is pretty nice. That said, there is a nagging issue with the control.

The Problem

The project I am working on has a form that users use as an editor for a “forum” of sorts. They can enter messages and add attachments. They are also free to edit their entries, and make changes to the attachments (add or remove them). Well, that’s where the Kendo UI Upload control falls short. There isn’t a “built-in” way to add an existing list of files and let users remove them using the default Upload interface. You could always write your own UI for displaying the existing files, but that’s a bunch of extra work. Shouldn’t you just be able to use the existing interface and not have to come up with something different? That was my goal. You can hack things fairly easily so that you get a list of the files, but the built-in “Remove” button doesn’t work. That’s what we will discuss in this post. We’ll get the list generated AND have the “Remove” button work as expected (where it calls your Remove URL and actually removes the item from the list).

ASIDE: Before we go any further: I’m not saying “Go out and buy Kendo UI” with this post; there’s no incentive in endorsing the product. Of course if Telerik wants to provide me with a free license, you know, that would be cool ;) Again, I’m not a huge fan of 3rd party tools. I happen to be using them for a client and I encountered this specific issue, and I’m not the only one. The purpose of this post (like the majority of the posts on this blog) is to help others keep their sanity.

There have been numerous inquiries around the web regarding this nagging issue, at StackOverflow, the Telerik MVC Controls Forum (the precursor to Kendo UI), and the Kendo UI Forums. Despite this, there are no real solutions on the web, though that MVC Controls Forum post gets you close.

In case you aren’t familiar with asynchronous Upload control, it’s a very simple design.

Kendo UI Upload Control

Pretty simple, right? Figuring out how the Upload control works, lies in hacking around in the HTML and JavaScript source code. Read More »

Telerik Kendo UI MVC Extensions and Icky HTML

January 16, 2013 by Damien White

I like clean code. Remember the days of obtrusive JavaScript?

<a href="#" onclick="alert('You clicked!')">Click Me!</a>

Yuck.

Move that click event to a handler attached via JavaScript and that makes for much nicer HTML.

There are other annoyances that I encounter in HTML code beyond obtrusive JavaScript, one that gets to me is <script> tags all over the rendered HTML. Well, that’s exactly what happens when using the Kendo UI MVC Extensions! For example:

<body>
  ...
  <ul class="k-widget k-reset k-header k-menu" id="mainMenu">
    <li class="k-item k-state-highlight k-state-default">
      <a class="k-link" href="/">Home</a>
    </li>
    ...
  </ul>
  <script>
  jQuery(function(){jQuery("#mainMenu").kendoMenu({});});
  </script>
  ... more html ...
</body>

Icky HTML in my opinion. Ok, I’m nitpicking, but here’s one annoyance with this approach. I MUST declare jQuery and the Kendo UI JavaScript at the top of the page. I like my scripts to be nice and tidy at the bottom of the page, like a responsible web designer.

My recommendation for using Kendo UI would be to use it without the MVC helpers. Personally I love JavaScript; I don’t need no stinkin’ helpers :)

UPDATE: It looks like a “DeferredScripts” solution is coming in the Q1 2013 release of the Kendo UI, so this may soon be a moot point.

Making the Kendo UI Editor Work With jQuery Validations

January 14, 2013 by Damien White

Kendo UIAn easy way to make an HTML TextArea more flexible is to use the Kendo UI Editor from Telerik. In addition, you can easily use Kendo UI within your MVC project thanks to their ASP.NET MVC wrappers that they provide for their tools. I’m not a huge fan of 3rd party toolkits, but for a quick solution, they can work pretty well.

Today’s post will discuss an issue that I encountered regarding the Kendo UI Editor coupled with jQuery Validation. Little nagging things like the one I encountered will surely annoy other developers, so I hope this post helps. This issue most likely applies to other types of JavaScript editors (most I would suspect) that work in a similar fashion to the Kendo UI Editor. If you’re having an issue where jQuery Validations aren’t firing with another editor (e.g. TinyMCE, CKEditor, etc.), I would recommend you review this post.

Before we go any further: I’m not saying “Go out and buy Kendo UI” with this post; there’s no incentive in endorsing the product. Of course if Telerik wants to provide me with a free license, you know, that would be cool ;) Anyway, as I mentioned before, I’m not a huge fan of 3rd party tools. I happen to be using them for a specific client and I have encountered various issues, one of which is outlined in this post. If I were using another JavaScript WYSIWYG editor on this project, I’d be specifically discussing that one.

Background

I’m working on an ASP.NET MVC 4 project. With that, I have unobtrusive validation set up using Microsoft.jQuery.Unobtrusive.Validation (which uses jQuery Validation). I’m using Kendo UI using straight JavaScript, but also the ASP.NET MVC Kendo UI Wrappers, where it makes things easier.

Problem

I have an object set up using standard validation attributes on the properties, for example:

public class Email {
    [Required]
    public string Message { get; set; }
}

I needed the Message property to be validated via jQuery Validation (it’s required after all). What in fact happened was that the user could happily submit the form without filling in the editor with a message. So much for the [Required] doing anything, but it does work if you don’t use the Kendo UI Editor (e.g. if you just have a TextArea), so what’s up?

Read More »

What’s That Syntax Highlighting Scheme?

January 07, 2013 by Damien White

Railscasts logo
Back in my last post, I mentioned switching to highlight.js. Today, I wanted to talk to you about the theme I used to highlight the examples (most) on the Visoft, Inc. Blog. I’m a huge fan of Ryan Bates’ RailsCasts. They are an incredible resource for learning and continuing to learn about Rails and various gems and techniques.

Ryan just released episode #400 (What’s New in Rails 4) of RailsCasts! Congratulations Ryan!

If you’ve watched some of his videos, you’ve most likely seen his TextMate syntax highlighting scheme. I have used it for just about everything from vim to Sublime Text 2 to Visual Studio. It only seemed to make sense for me to build a highlight.js version of the theme.

I’m happy to say that my new theme has been merged into the main branch of highlight.js. You should be seeing it in a release soon. Can’t wait? You can pull the current file from GitHub. I would love to hear your feedback on the theme. I expect there to be tweaks along the line, so I would encourage you to fork the highlight.js project and modify the theme if you see something that isn’t right.