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.

General features

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

Getting data

You can get the data via ajax by specifying the the
Url
. If nothing is specified the control will look for a controller with the same name as it + its type, example:
@Html.Awe().AjaxRadioList("Country1").Url(Url.Action("GetCountries", "Data")) // gets data from Data/GetCountries; url specified by .Url extension
@Html.Awe().AjaxDropdown("Meal") // gets data from MealAjaxDropdown/GetItems by convention
@Html.Awe().AjaxCheckboxList(o => o.Meals1).Controller("BestMealAjaxDropdown") // gets data from BestMealAjaxDropdown/GetItems
The url will get the current value of the control in the
v
parameter, so we can define it if it's needed:
public ActionResult GetCountries(int? v) // v has the current value
you might not need it for the AjaxDropdown and similar controls, but you will need it for the Lookups

Binding to Parents

Some components can be bound to parents, this way when they request data, the values of the parents are also sent to the server, and for some controls (like AjaxDropdown, Grid, etc.), changing the value of a parent will trigger the child to reload, so you get a cascading effect. This is done using the
.Parent(name, alias = "parent", loadOnChange = true)
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)
<input type="text" value="hi" id='foo1' />
@Html.Awe().AjaxCheckboxListFor(o => o.Categories)

@(Html.Awe().AjaxDropdownFor(o => o.Meal)
       .Url(Url.Action("GetMyMeals","Data"))
       .parent("foo1", "foo")
       .Parent(o => o.Categories, "cats")    // parent Categories with alias "cats"
       .Parent(o => o.Name)) // parent Name with default alias "parent"
And now in
GetMyMeals
action we're getting the values of the parent controls using the specified parameter names (alias).
public ActionResult GetMyMeals(string foo, int[] cats, string parent) 

Predefined parameters

Additonal parameters with predefined values can be sent to the server using
.Parameter(name, value)
or
.ParameterFunc(jsfunc)
example:
@(Html.Awe().AjaxRadioList("Meal1")
       .Url(Url.Action("GetMeals","Data"))
       .Parameter("category", 3)
       .Parameter("chefid",  7)
       .ParameterFunc("getData"))
<script>
    function getData(){
        return {x: 100, y: 230 };
    }
</script>
And the
GetMeals
action could look like this:
public ActionResult GetMeals(int category, int chefid, int x, int y){

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
awem.js
(mods), you need to set
awem.clientDict
, if you open
awem.js
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
_Layout.cshtml
like this:
awem.clientDict = @Html.Raw(Json.Encode(ClientSideUtils.GetClientDict()));