Jquery-ui helper

Lately I have been trying to get the jquery-ui theme to work nicely with an asp.net mvc site. The hard part was to figure out how to get the paths correctly in the ui.theme.css and ui.all.css files. I ended up just adding the full path in there, only need to search and replace them once I deploy them to the web server. Not a pretty solution, but it works for now.

A nice feature of the jquery-ui theme is that you can use nice little icons, as you can see on the theme gallery page. The trick is to insert a small span that looks like this :

<p class="ui-state-error">
     <span class="ui-icon ui-icon-alert" style="float:left;margin-right:2em;">  </span>Error message here !
</p>
<p class="ui-state-highlight">Info box ...</p>

As you might understand these span tags start to clutter up the view code quickly ! So right a little helper you can put in a static class.

public static string InsertIcon(string iconName)
{
        return string.Format("<span class=\"ui-icon ui-{0}\" style=\"float: left; margin-right: .2em;\"></span>",iconName);
}

I am also using it in some controllers that return some simple html snippets for jQuery $.ajax methods :

private string createErrorString(string errMsg)
{
      string output = "<p class="ui-state-error">";
      output += jQueryUiHelper.InsertIcon("icon-alert");
      output += errMsg;
      output += "</p>";
      return output;
}

You can use that in a controller when an error has occured:

return Content(createErrorString ("User " + userName + " does not exist !"));

As you can see, plenty of fun things you can do using the jQuery-ui !

About these ads