Getting Started

To get started we recommend to have a look at our demo app, there is source code provided with each example so you can get an idea of how the helpers work, you can also download its source code. When creating a new solution using the awesome helpers make sure to have a look at the installation page Use web debugging tools: We highly recommend to use web debugging tools in your development, most modern browsers have them by default and you can activate it by hitting F12 or Ctrl+Shift+I , this way when a javascript error will happen you'll see it in your web debugger's console, you'll also be able to see all the ajax requests and results, if they were successful, data that was received etc. On firefox you can also install the firebug plugin, in our video tutorials you'll see examples of using firebug.

General features

The awesome helpers have some common functionality/features, you can see this functionality explained below

Getting data

Most of the Awesome components get their data via ajax, and they need a controller or an url to be specified. If nothing is specified they will look for a controller with the same name as them + their type, example:
@Html.Awe().AjaxDropdown("Meal") // gets data from MealAjaxDropdown/GetItems by convention    
@Html.Awe().AjaxDropdown("Country").Url(Url.Action("GetItems", "Country")) // gets data from Country/GetItems; url specified by .Url extension
@Html.Awe().AjaxDropdownFor(o => o.BestMeal)
           .Controller<BestMealAjaxDropdownController>() // gets data from BestMealAjaxDropdown/GetItems

Binding to Parents

Some components can be bound to parents, this way when they search/get data, the values of the parents are also sent to the server, and for AjaxDropdown, AjaxRadioList and AjaxCheckboxList changing the value of a parent will trigger the child to refill it's data (cascade). This is done using the .Parent(name, alias) extension. By default the value of the parent will be sent using the "parent" name of the parameter, but different names can be specified using the alias example:
@Html.TextBoxFor(o => o.Name)
@Html.Awe().AjaxCheckboxListFor(o => o.Categories)
@Html.Awe().AjaxDropdownFor(o => o.Meal)
       .Parent(o => o.Categories) // parent Categories with default alias "parent"
       .Parent(o => o.Name, "chef") // parent Name with alias "chef"

Predefined parameters

Additonal parameters with predefined values can be sent to the server using the .Parameter(name, value) extension, example:
@Html.Awe().AjaxDropdownFor(o => o.Meal)
       .Parameter("category", 3)
       .Parameter("chef",  7)

Changing default settings

you can change the default values for the helpers by calling something like this:
Settings.Lookup.HighlightChange = true;
Settings.Lookup.Title = "please select";
Settings.MultiLookup.Fullscreen = true;
(usually you would call this in Global.asax Application_Start)

Localizing default texts

Can be done by assigning a function to Settings.GetText, this function will receive 2 parameters (name of the helper and name of the property) and must return a string, example:
   Settings.GetText = GetTranslate;   
private static string GetTranslate(string type, string key)
    if (type == "Confirm" && key == "Message") return Mui.confirm_delete;
    switch (key)
        case "CancelText": return Mui.Cancel;
        case "YesText": return Mui.Yes;
        case "NoText": return Mui.No;
        case "MoreText": return Mui.more;
        case "SearchText": return Mui.Search;
    return null;
you can see this approach used in the prodinner demo to localize texts from
(mods), you need to set
, if you open
you can see the default values:
var clientDict = {
    GridInfo: "of {0} items",
    Select: 'please select',
    SearchForRes: 'search for more results',
    Searchp: 'search...',
    NoRecFound: 'no records found'
in prodinner it is set in
like this:
awem.clientDict = @Html.Raw(Json.Encode(ClientSideUtils.GetClientDict()));