Awesome ASP.net Core and MVC Controls

aweui.js ui components library

You can use the awesome controls without the use of server side html helpers by using the aweui.js library.

Grid remote data


In this demo on the server side we query, order the data and select the items for the current page, while on the client we build the grid model. The count (total items count) is sent from the server so the grid would know how many pages there are in total.
Aweui/Index.cshtml
<div class="bar">
<input type="text" placeholder="search..." id="txtSearchGrid1">
</div>
<div id="grid1"></div>
<script>
$(function () {
aweui.grid({
id: 'grid1',
dataFunc: getGridData,
height: 350,
columns: [
{ bind: 'Id', width: 75, groupable: false },
{ bind: 'Person' },
{ bind: 'Food' },
{ bind: 'CountryName', header: 'Country' },
{ bind: 'Date', width: 120, mod: { nohide: true } },
{ bind: 'Location' },
{ bind: "ChefName", header: "Chef" }
],
parents: [
{ id: 'txtSearchGrid1', name: 'search' }
],
mod: {
pageSize: true,
columnsSelector: true,
pageInfo: true,
loading: true,
columnsAutohide: true
}
});
});

function getGridData(sgp) {
return $.when($.get('@Url.Action("LunchesUi", "Data")', sgp))
.then(function (res) {
var gp = utils.getGridParams(sgp);

// build grid model
return utils.gridModelBuilder(
{
key: "Id",
gp: gp,
pageItems: res.items,
itemsCount: res.count
});
});
}
</script>
Awesome/DataController.cs
public ActionResult LunchesUi(GridParams g, string search)
{
search = (search ?? "").ToLower();

var query = Db.Lunches
.Where(o => o.Food.ToLower().Contains(search) ||
o.Person.ToLower().Contains(search) ||
o.Chef.FirstName.ToLower().Contains(search) ||
o.Chef.LastName.ToLower().Contains(search) ||
o.Location.ToLower().Contains(search) ||
o.Country.Name.ToLower().Contains(search))
.AsQueryable();

var dict = new Dictionary<string, string>
{
{"CountryName", "Country.Name"},
{"ChefName", "Chef.FirstName,Chef.LastName"}
};

// map back the column.bind values, or gmb will throw (Lunch has no CountryName prop)
unmap(g, dict);

var gmb = new GridModelBuilder<Lunch>(g)
{
KeyProp = o => o.Id
};

Func<Lunch, object> map = o => new
{
o.Id,
o.Person,
o.Food,
o.FoodPic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
};

query = gmb.OrderBy(query);

var count = query.Count();
var items = gmb.GetPage(query).Select(map); // mapping to send only the needed data

return Json(new { count, items });
}

Odropdown



Aweui/Index.cshtml
<input type="hidden" id="mealOdd">
<br />
<br />
<script>
$(function () {
aweui.radioList({
id: 'mealOdd',
url: '@Url.Action("GetAllMeals", "Data")',
odropdown: {
autoSelectFirst: true
}
});
});
</script>
Awesome/DataController.cs
public ActionResult GetAllMeals()
{
var items = Db.Meals.Select(o => new KeyContent(o.Id, o.Name));
return Json(items);
}

RadioList, CheckboxList, Multiselect

Aweui/Index.cshtml
<div class="ib arl">
<input type="hidden" id="rdl1" value="@Db.Categories[1].Id">
</div>
<div class="ib arl">
<input type="hidden" id="chkl1">
</div>
<div class="ib arl">
<input type="hidden" id="multi1" value="[@Db.Categories[1].Id, @Db.Categories[2].Id]">
</div>

<script>
$(function() {
aweui.radioList({
id: 'rdl1',
//url: '@Url.Action("GetCategories", "Data")',
dataFunc: getCategories,
ochk: true
});

aweui.checkboxList({
id: 'chkl1',
dataFunc: getCategories,
ochk: true
});

aweui.checkboxList({
id: 'multi1',
dataFunc: getCategories,
multiselect: true
});

var loadedItems = null;

function getCategories() {
if (!loadedItems) {
loadedItems = $.when($.get('@Url.Action("GetCategories", "Data")'))
.then(function(res) {
loadedItems = res;
return res;
});
}

return loadedItems;
}
});
</script>
Awesome/DataController.cs
public ActionResult GetCategories()
{
return Json(Db.Categories.Select(o => new KeyContent(o.Id, o.Name)));
}

Checkbox

Aweui/Index.cshtml
<label>ochk: <input type="hidden" id="chk1" value="true"></label>
<label>otoggl: <input type="hidden" id="toggl1" name="toggl1" value="true"></label>
<script>
$(function () {
aweui.chk({ id: 'chk1', ochk: true });
aweui.chk({ id: 'toggl1', otoggl: true });
});
</script>

Textbox

Aweui/Index.cshtml
<input type="hidden" id="txt1" value="10" />
<script>
$(function() {
aweui.txt({
id: 'txt1',
numeric: {
max: 100
}
});
});
</script>

Popups

Aweui/Index.cshtml
<script>
$(function() {
aweui.initPopupForm({
id: 'popupForm1',
height: 200,
setCont: function(sp, o) {
var str = '<form>' +
'name: <input type="text" name="name" />' +
'</form>';
o.scon.html(str);
},
postFunc: function(sp) {
var prm = utils.getParams(sp);
return { name: prm.name };
},
success: function(res) {
awem.notif('name = ' + res.name);
}
});
});
</script>
<button type="button" class="awe-btn" onclick="aweui.open('popupForm1', {}, event)">open PopupForm</button>
Aweui/Index.cshtml

<button type="button" class="awe-btn" id="btnFrench" onclick="goFrench()">change aweui to French</button>
<script>
function goFrench() {
$.ajax(document.root + '/Scripts/awedict/awedict.fr.js',
{
dataType: "script",
cache: true,
success: function () {
aweui.init();
aweui.rebuildAll();
}
});
}
</script>


For more aweui demos visit aweui.aspnetawesome.com




Comments