Awesome ASP.net Core and MVC Controls

Client data loading demo

loading controls using .DataFunc extension (js function) instead of .Url
if dataFunc is specified, the js function will be used to get data, however if that function returns -1 the url will be requested

Cascading

Load from server first time only

Load child on first load only


ClientDataLoadingDemo/Index.cshtml
@{
var categories = Db.Categories;
var meals = Db.Meals;
}
@(Html.Awe().AjaxCheckboxList("list1")
.DataFunc("setCategoriesList")
.Value(new[] { categories[0].Id, categories[2].Id }))

@(Html.Awe().AjaxDropdown("list3")
.DataFunc("setCategoriesList")
.Value(categories[3].Id))

<h3>Cascading</h3>
@(Html.Awe().AjaxRadioList("list2")
.DataFunc("setCategoriesList")
.Value(categories[2].Id))

@(Html.Awe().AjaxCheckboxList("childList1")
.Parent("list2")
.DataFunc("setChildMealsList"))


<h3>Load from server first time only</h3>

<script>
var lctg;
var promisectg;
function getCategCached() {
if (lctg) return lctg;
if (!promisectg) {
promisectg = $.get('@Url.Action("GetCategories", "Data")').then(function(result) {
lctg = result;
return result;
});
}
return promisectg;
}
</script>
@Html.Awe().AjaxRadioList("CatCached1").DataFunc("getCategCached")
@Html.Awe().AjaxRadioList("CatCached2").DataFunc("getCategCached")
@Html.Awe().AjaxRadioList("CatCached3").DataFunc("getCategCached")

<h3>Load child on first load only</h3>
@(Html.Awe().AjaxDropdown("listRs")
.DataFunc("setCategoriesList")
.Value(categories[0].Id))

@(Html.Awe().AjaxCheckboxList("childListRs")
.Parent("listRs", "categories")
.DataFunc("setChildListHybrid")
.Url(Url.Action("GetMeals", "Data")))

<script>
var categories = @Html.Raw(DemoUtils.Encode(categories));
var meals = @Html.Raw(DemoUtils.Encode(meals));

function setCategoriesList() {
var result = [];
$.each(categories, function(index, item) {
result.push({c: item.Name, k: item.Id });
});
return result;
}

function setChildMealsList(params) {
var pobj = utils.getParams(params);
var result = [];

$.each(meals, function(i, item) {
if(item.Category.Id == pobj.parent)
result.push({ c: item.Name, k: item.Id });
});
return result;
}

var lmeals;
function setChildListHybrid(params) {
var pobj = utils.getParams(params);

function build() {
var result = [];
$.each(lmeals, function(i, item) {
if (item.Category.Id == pobj.categories)
result.push({ c: item.Name, k: item.Id });
});
return result;
}

if (lmeals) {
return build();
} else {
return $.get('@Url.Action("GetMealsList", "Data")').then(function(items) {
lmeals = items;
return build();
});
}
}
</script>



Comments

We use cookies to improve your online experience. 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.