MVC Bundling not working on Azure deploy

working locally, but not on deploy

When using your bundler, everything may work fine, but quirks often pop up on Azure deployment, these are some of them I came across:

Styles/Javascript not rendering at all

This my be because your names resemble your directory structure, which apparently it does not like. For example, if this is your Bundle:
bundles.Add(new StyleBundle("~/Styles/Metro").Include(
            "~/Styles/Metro/metro-bootstrap.css",
            "~/Styles/Metro/metro-ui-icons.css"));

And you use the render:
@Styles.Render("~/Styles/Metro")

It will not render on Azure! Simply change it so your render string does not resemble your actual directory structure, and it will work:
bundles.Add(new StyleBundle("~/Styles/MetroCss").Include(
            "~/Styles/Metro/metro-bootstrap.css",
            "~/Styles/Metro/metro-ui-icons.css"));

And you use the render:
@Styles.Render("~/Styles/MetroCss")

Notice that the directory is ~/Styles/Metro but the render string is ~/Styles/MetroCss.

If that is not it, be sure you are using
@Styles.Render("~/Styles...")

for css, and:
@Scripts.Render("~/Scripts...")

for Javascript.

Images or Fonts not rendering

This is because you assume things will behave the same when they are up in Azure, which is not always the case. If you have this stuff outside of the ~/Content/ folder, your program will not, by default, know how to handle it. You will get a Controller error if you try to navigate to it manually.

The answer? Simply move everything somewhere within the ~/Content/ folder which MVC makes public by default. Don't forget to update your css and JavaScript accordingly!

Otherwise you can make a controller to handle these requests, but that involves more work.

Creating Nice '|' Divided Menus with CSS

it is common for websites (this one included) to have the ubiquitous '|' as a link divider, here is a neat way to do it with pure css

To get this menu:

You dont need to actually put in the '|' character, you can do it with just the following advanced css selectors:
<style type="text/css">
	ul#nav li{
		float:left; 
		margin-right:20px;
	}
	
	ul#nav li:after{
		content:'|';
		margin-left:20px;
	}
	
	ul#nav > li:last-child:after{
		content:'';	
		margin-left:0;
	}
</style>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Other Crap</a></li>
</ul>

I realize it's not exactly space-saving, but it is a cool trick that could be adapted to all sorts of possible situations.

Forganizer - unobtrusive network file organizer - new open source project

An unobtrusive intranet ASP.NET MVC application for logically tagging, organizing and searching network files in one centralized location with a fast and simple interface

Me and some friends have a network set up where we share movies and music. This is a Windows domain network and we all simply share our folders as 'shares' across the network. The problem is that there are so many different files and they are all spread out, there was no way to browse them all at once in any sort of convenient way. That is where the idea for forganizer came up, it is simply a tagging and search interface for multiple shared drives (or just your local ones if you want). Since I hadn't really made any MVC projects yet, I decided to do this one in ASP.NET MVC, a great new technology. Also, this was my first attempt at many new programming techniques I hadn't really used in the past such as Unit Testing, Inversion of Control (Dependency Injection) and Mocking, all very useful!

I want to say right up front, this is for a Windows network, and will work best with... err... IE7+, because it works best with your file explorer - some features like folder opening and downloads may not work with other browsers.

You can always check out my source code if you want to see how something was done, here I am just going to explain what the program does from a user point of view.

clean install

Once forganizer is installed (just run Content/setup.sql and publish the rest to a website, making sure you have MVC installed and all that good stuff) you will see this:

Now you need to add some files to the system, here is the directory we are going to add for the demo. Notice that there are some files in the top folder, and also some folders that go down (quite a few nested folders actually).

adding some files

To add new files in, simply click on the 'manage' tab on the upper right. The default page for manage is 'add files' so you simply enter the network path in the 'from folder' field and click 'run it'.
Notice that it only uploaded 8 files, those are the files in the root. If you check the 'recursive' checkbox, if will go ahead and run through all of the files regardless of depth:
The system will never add a file more than once, so feel free to run the same folders over and over, in fact, that is how you enter new files that have been put on the shares - I think later I will implement and auto-updater. Now if we were to will in more of the textboxes the system would be more selective. Say I wanted to exclude all of the .txt files I have, I would just fill '.txt' in the 'exclude extensions' blank. Similarly, if I am only interested in video files, I would just put '.avi .mpg .mpeg' in the 'include only these extensions' field - it's really pretty self-explanatory.

now you are up and running

Click on the 'search' tab or on 'forganizer' and you will see that you now have a tidy list of files. Also, you will notice that on the right side, all of the file extensions that were in your folders are now represented in the extensions cloud, sized by the relation of file count - in my example, there are many more .cs files than anything else:
Each file has download, open folder and delete links next to it. They all do what you think they would, except delete does not actually delete a file, just the reference in forganizer. If you delete a reference, then later restore it, it will still hold all the tags you previously assigned to it.

tag some stuff

As of right now, this doesn't do us much good, they are searchable by file extension (just click on the file extension on the right), but you could do that in Explorer. We want to add some tags, so click on 'manage' again, and then on 'mass tag adding' on the right side menu.
In this example, I am adding the tag 'Testing' to all the files in the directory \\network_drive\share\folder\forganizer\Forganizer.Tests. Now go back to the search, and you can see that many of the files have been tagged:
The 'mass tag delete' and 'mass tag edit' work just the same as above (actually runs the same exact code). Notice that I also manually added the 'wallpaper' tags to a couple .jpg files - that was done simply by typing 'wallpaper' in the small textbox by each file and clicking '+tags' or pressing enter. You will also see that now there is a cloud tag on the right showing the tags that are in the present search.

create categories

Now you can make some categories to make searching easier. Categories are just groups of file extensions, I am going to make a 'programming' category that includes .js and .cs files:

the manual tagging interface

Now going back to the main search, you will see that a 'programming' category is now in the sidebar. In the following picture, you can see that I have clicked on the 'WebUI' tag and the '.js' file extension. Now all I see is the .js files that are tagged with 'WebUI', it's just that simple! Also take note of the intuitive urls achieved with MVC.
I also typed MS in some of the .js file blanks as I am going to tag those as MS javascript files by pressing enter:
Those MS tags are now inserted.

Now if you want to delete a tag, simply hover over it and a [delete] link will show up:
Click it and the tag is removed:
Pretty basic stuff and simple to figure out and use. This same add/delete interface is used for categories as well.

file cleanup

Now what if someone went and deleted some files, since forganizer does not actually constantly monitor the files, it will be out of date. That is why I built a cleanup feature - say I delete these files:

I can just go to manage -> file cleanup and click the big button:
And you are all cleaned up. One great feature on this is if any file is deleted, either manually or by the cleanup tool, its tags will be preserved; if that file is ever re-added, or restored, it will still have all the meta-data that it always had.

some more stuff

I went ahead and added the 'WebUI' tag to all the files in the \\network_drive\share\folder\forganizer\forganizer.WebUI folder, and 'DomainModel' to all files in the \\network_drive\share\folder\forganizer\forganizer.Tests folder, and finally 'forganizer' to all the files in the \\\network_drive\share\folder\forganizer\forganizer folder, so I can easily discern all of those files. I also added a 'visual_studio' category that include .csproj, .sln and .suo extensions, as well as a documents and images category.

So now I want to find all the Visual Studio related files in forganizer; all I need to do is click on 'visual_studio' in the categories, and 'forganizer' in the tags section and I get the files I am interested in:
Think of it now as "showing all the .csproj, .sln and .suo files with the forganizer tag" Notice that in the upper right, 'and' has a box around it, you can also choose 'or' and it will be a broader search. Say I clicked the 'or' link and then clicked the 'wallpaper' tag and 'images' as well, now forganizer would be showing "showing all the .csproj, .sln, .suo, .png, .jpg and .jpeg files with the forganizer tag OR the wallpaper tag"
You will also see that each cloud (tags/extensions/categories) will be broken into 2 parts, the active (green) links and the inactive (grey) links. The active links are files that are showing in the search right now, the inactive ones are things you can add to the search that will broaden it; if you have 'and' picked in the tag section, you will not see and inactive tags, as that wouldn't make sense.

remember, this is all unobtrusive

This never actually does anything with the files, deleting only deleted the reference, the files will still be there! This is just a layer on top to help sort/search.

I hope this is interesting to someone out there, if not, it was great to help learn MVC and some other great technologies.

<i> is for image, sprite image

a slightly modified, very simple approach to css sprites

Css Sprites are nothing new, it is a way to take one image and use it for everything for faster page loads; pretty simple. On my latest project, I came across a simple way to to employ these sprites in a logical manner; this method even makes for intellisense images in Visual Studio.

prepare your sprites

The first thing to do, is to get your sprites together in a zip file. Basically gather up all the pictures and icons you will be using and put them into a single folder, then zip them up. Here is the zip I am using for the demo demo_sprite.zip (14.12 kb). Then simply go to Project Fondue set up your settings and process. For the purposes of this method, set the 'Css Prefix' to 'i' and clear the other 'Class Output option' fields. Now you have your css, and you can download the image that Fondue produced, which is the image directly to the left in this post. The tough work is alreaday done, now you are ready to implement it.

the <i> tag

As stated in the title, I chose to use the <i> tag. This tag was originally used for italics, but that practice is not always followed, and most people use CSS reset anyway, so it is up to us to choose what we want it to mean... and I chose 'image' (the img tag wont work as it rendered the ugly 'image not found' image in most browsers). So for this to work, you are going to have to first reset the <i> tag to nothing in css, then set it's background to the sprite image; I will assume you are using your own css reset, and my sprite to the right is called sprites.png.:
i {background:url(Images/sprites.png) no-repeat; 
   display:inline-block; width:24px; height:24px; }

/* code produced by Fondue */
i.danger { background-position: 0 0; } 
i.download { background-position: 0 -74px; } 
i.error { background-position: 0 -148px; } 
i.folder { background-position: 0 -222px; } 
i.reload { background-position: 0 -296px; } 
i.success { background-position: 0 -370px; } 
i.trash { background-position: 0 -444px; } 
i.warning { background-position: 0 -518px; } 

I am setting the default height/width to 24px because that is the size of my icons, if all of your are not the same, you can either set a default size here, or size every one indivually; I recommend using the most common size as the default for the smallest css.

*If you do have images of different sizes, be sure to set their height/width in their corresponding css classes.

use it

Now you are all set, the html:

<i class="danger"></i>


Produces and:

<i class="download"></i>


Produces and so on. Plus, if you are using visual studio, you will notice since these are css classes, they pop up in your intellisense, so it is easy to push out images on the fly in code.

Simple Dynamic Sorting Headers for GridView using indication arrows

A simple centralized way to make a nice flipping indicator (arrow) of which way you are sorting on a GridView

When sorting with gridviews, it is nice to have an indicator of which direction you are sorting on which field like the use at Yahoo! Autos. To copy this idea, I simply made 3 Css classes 'sort', which is a base class with no backgorund image, 'up' which has an up arrow, and 'down' which has a down arrow in it. I made sure to put the backgorund image in just once, and push the text away so it can show through. Also, since these will be applied to the Header element of the GridView, you have to make sure you declase '.class a':
.up a, .down a, .sort a { display:block; padding:0 4px 0 15px; }
.up a, .down a { color:#8F5F00; }
.sort a:hover { background:#ffcc66; }
.up a { background:url(../images/up.gif) left no-repeat; }
.up a:hover { background:url(../images/up.gif) left no-repeat #ffcc66; }
.down a { background:url(../images/down.gif) left no-repeat }
.down a:hover { background:url(../images/down.gif) left no-repeat #ffcc66; }

Now, I made a function in a helper Class that will take in the same arguments that a GridView Sorting event throws, that way the transition will be easy.
// This is used to flip the sorting arrow up/down
// Base Css class is 'sort', the Ascending Css Class is 'up' and Descending is 'down'
public static void GVSort(object sender, GridViewSortEventArgs e)
{ // call on sort and sets the sorted field to the proper Css Class, while setting all others to the base class
  string BASE = "sort";
  string UP = "up";
  string DOWN = "down";
  GridView g = (GridView)sender;
  for (int i = 0; i < g.Columns.Count; i++)
  {
    var c = g.Columns[i];
    c.HeaderStyle.CssClass = c.HeaderStyle.CssClass.Replace(UP, BASE).Replace(DOWN, BASE);
    if (c.SortExpression.Equals(e.SortExpression))
    {
      c.HeaderStyle.CssClass =
        e.SortDirection.Equals(System.Web.UI.WebControls.SortDirection.Ascending) ?
          c.HeaderStyle.CssClass.Replace(BASE, UP).Replace(DOWN, UP) :
          c.HeaderStyle.CssClass.Replace(BASE, DOWN).Replace(UP, DOWN);
    }
  }
}

Now say I had this in a class utils.cs I would just call it one the GridView Sorting event:
protected void gv_Sorting(object sender, GridViewSortEventArgs e)
{
  sao.GVSort(sender, e);
}

And there you have it! You can call that from every Gridview in your application that you want to look similar - code only once!

CSS image map with rollovers :: map of the United States

A fully interactive image map of the united states using pure CSS; great rollover technique

I had actually written this in 2006, but I saw this technique used recently and apparently it's a 'new' technique. You can see this example here. Really the coding is pretty simple, though a little bit tedious.

First thing is to simply make a list of the items you want in the image map. I use dl->dt/dd here instead of a ul->li which would work just as well. Notice my dt element is just 'us', then I start with the states: 'al', 'ak', etc. Also notice that each dd has an 'img' id and each a holds an id and a span with the state name in it.
<dl id="imap">
   <dt><a id="us" href="#nogo" title="us"><span>United States</span></a></dt>
   <dd id="imgal">
     <a id="al" href="#al" title="Alabama"><span>Alabama </span></a>
   </dd>
   <dd id="imgak">
     <a id="ak" href="#ak" title="Alaska"><span>Alaska </span></a>
   </dd>
  ...
</dl>

Next we move on to the css, which is pretty simple to understand, it is just that getting the values is a pain. One of the most imporatant values is the position of the 'box' for each state. You can see if you look further into the css that all of these are relatively positioned in relation to the whole map - it is the upper-left corner of where the 'box' is. I say box because css only works in squares. It takes some planning, but most any shape can be achieved by overlapping squares, and that overlapping is controlled by z-index. Also you will see that the images are positioned negatively against the position so they sit int he right place. And finally, the height and width are just the height and width of the image.
/*ALABAMA*/
#imap #imgal { left:400px; top:220px; z-index:20; }
#imap a#al:hover { background:url(images/states/al.gif) -400px -220px; }
#imap a#al { width:45px; height:70px; }

Repeat this over and over, and you have a full 'image map' made with CSS only. Not the fastest method, but it works and is better than the old image map methods IMO.


AJAX Control Toolit CalendarExtender : Where did Saturday go?

How to get back the lost day(s) on your AJAX control

More than once I have come across this, and it isn't obvious where the problem lies.  This happens when your table cells inherit strange padding/margins.  The CalendarExtender is a great tool, but it makes a crazy table that is an html nightmare.  I figure at first I could simply assign the CssClass to something else, but that negates what it is normally set to, which apparently does a lot as there are all sorts of divs, trs, tds, etc in that calendar.  Instead, using FireBug I found the css class it was using and simply override it with this.

 

.ajax__calendar_days table tr td { padding:0; margin:0; }

 

And everything will be looking fine... seeing your Saturdays and everything.

 

Update - 19 October 2008

Turns out this didn't alone fix the problem, it only fixed the days... but, if you click on the month name, it brings up a menu of months, and if you click again, you get a menu of years... those are also broken.  So in order to fix them all, you will need this:

 

.ajax__calendar_days table tr td, .ajax__calendar_months table tr td, .ajax__calendar_years table tr td { padding:0; margin:0; }

 

And now... everything is fixed.

 

Rounded Text Box Inputs - Slick looking and customizable

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

 I saw some of these rounded textboxes somewhere (?) and I though they looked pretty good.  Even though they don't really go with any of my sites, I wanted to know how they were done.  I figured the easiest way to get them working without making a ton of images would be to use CSS sliding doors technique I picked up from http://alistapart.com/ a while back (awesome site!). 

 

The finished product looks pretty good, uses strictly html and css (asp controls work great too) and really couldn't get much easier.  It works for single-line textboxes as well as checkboxes.  You could easily take the concept to a multiline textbox if you just added some larger images.  The code is pretty self-explanatory, so I won't get into the details here.  I included the .png files so you can customize the colors if you want - just drop in the code and go.



Iconize Textlinks with CSS

This is a great way to add a little visibility to your users, it adds an icon next to your file links, showing them visually what it is

I take no credit at all for this, all the credit belongs to http://pooliestudios.com/projects/iconize/ 

 

This is a great tool - and very simple when you look at it I got rave reviews when I implemented this on our in-house web-based fileshare system at work.  Hopefully it can help you out too!

 

 

Sticky Footer using only css/html (works in IE)

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

For css, all you need is this:

* { margin: 0;}
html, body { height: 100%;}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push { height: 4em; /* .push must be the same height as .footer */}

And for html, this:

<body>

  <div class="wrapper"> 

    Put your content here

    <div class="push"></div>

  </div>

  <div class="footer">
    Footer Here

  </div>

</body>

All credit goes to http://ryanfait.com/sticky-footer/ - thanks this is great!