I want a simpler way to assign icons to my jquery ui buttons

JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.

Here is the sample from the jquery ui website :

<!doctype html>

<html lang="en">
 <meta charset="utf-8" />
 <title>jQuery UI Button - Icons</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 $(function() {
 $( "button:first" ).button({
 icons: {
 primary: "ui-icon-locked"
 text: false
 icons: {
 primary: "ui-icon-locked"
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 text: false

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>



It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.

So my solution is to use the data attribute of the element on which we want the button widget to be applied

<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>

and in the document ready of the page

 $(document).ready(function () {

 create: function (event, ui) {
 var icon = $(this).data("icon");
 if (HasValue(icon)) {
 $(this).button("option", "icons", { primary: icon });

Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.


I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.

But where are the icons defined ?

The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the themeroller page).

If I want to define a custom icon, I do it this way

in the CSS:

 background: transparent url('images/xlsx.png') no-repeat;

and in the html:

<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>


Incoming search terms:

  • ASP NET jquery ui button
  • assign ui
  • button(option icons
  • button(option icons not working
  • jquery icons
  • jquery mobile icon from custom css
  • jquery ui button text after custom icon

MVC and Entity Framework : Unable to retrieve the metadata for the model

Let’s say you are developing an MVC application and you want to add a generated controller with the associated views.

You do this:

  1. Setting the controller’s name
  2. Choosing the template: mvc controller with read/write actions and views, using Entity Framework
  3. Choosing the model class
  4. Choosing the data context
  5. Clicking “Add”


It’s possible that you get this error:


The solution is quite simple:

Just go in the web.config file and comment the connection string


Then try again


It works!

Don’t forget to uncomment your connection string and you are done.

Incoming search terms:

  • unable to retrieve metadata for model class
  • MVCandEntityFramework:Unabletoretrievethemetadataforthemodel
  • unable to retrieve metadata for
  • unable to retrieve metadata for model
  • unable to retrieve metadata for mvc
  • unable to retrieve metadata
  • entity framework unable to retrieve metadata
  • asp net mvc unable to retrieve metadata
  • mvc unable to retrieve metadata
  • yhs-fullyhosted_003