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 awesome library work, you can also download its source code. You can also watch our main video tutorial and build a new app yourself while watching the video. When creating a new solution using the awesome library make sure to have a look at the installation page

General features

The awesome controls 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 controls by calling something like this:
Settings.Lookup.HighlightChange = true;
Settings.Lookup.Title = "please select";
Settings.MultiLookup.Fullscreen = true;
Usually you would call this when the application starts (
Startup.cs
\
Global.asax Application_Start
).

Localising default texts

See our localisation page.

Getting and setting value

To set the initial value you could call for example:
@Html.Awe().Checkbox().Value(true)
without the
Value(val)
being called, the value will be read from the
ViewModel
property with the same name or from
ViewData
. To get or set the value of an awesome editor in js you can call:
var val = $('#compId').val(); // get the value
$('#comp2Id').val(val).change(); // set the value
Triggering change is necessary in order to tell the editor to render itself. In some cases, like for the textbox or the checkbox you can set the value and instead of triggering change you can call
api.render()
:
$('#chk1').val(true).data('api').render()
This will not work for
Html.Awe().TimePicker
, for this component see this post



Comments
By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.