Popup:
Theme:

Quick overview of the awesome helpers:


Cascading using binding to Parent:
Home/Index.aspx
Cascading using binding to Parent:<br />
<%:Html.Awe().AjaxDropdown("Category")
.Url(Url.Action("GetCategories","Home")) %>

<%:Html.Awe().AjaxDropdown("ChildMeal")
.Url(Url.Action("GetMeals","Home"))
.Parent("Category") %>
HomeController.cs
public ActionResult GetCategories(int? v)
{
var items = Db.Categories
.Select(o => new SelectableItem(o.Id, o.Name, v == o.Id));// value, text, selected
return Json(items);
}

public ActionResult GetMeals(int? v, int? parent)
{
var items = Db.Meals.Where(o => o.Category.Id == parent)
.Select(o => new SelectableItem(o.Id, o.Name, v == o.Id));// key, text, selected
return Json(items);
}


Single and multiple items selection:
Lookup:
Multilookup:
    DatePicker:

        Awesome Grid bound to 2 textboxes for search:
        Home/Index.aspx
        <div>
        <div class="efield awe-il"><%:Html.Awe().TextBox("txtperson").Placeholder("search for person ...").CssClass("searchtxt") %></div>
        <div class="efield awe-il"><%:Html.Awe().TextBox("txtfood").Placeholder("search for food ...").CssClass("searchtxt") %></div>
        </div>
        <%:Html.Awe().Grid("Grid1")
        .Columns(
        new Column{Name = "Id", Width = 55, Groupable = false, Resizable = false},
        new Column{Name = "Person"},
        new Column{Name = "Food"},
        new Column{Name = "Location"},
        new Column{Name = "Date", Width = 120},
        new Column{Name = "Country.Name", ClientFormat = ".CountryName", Header = "Country"},
        new Column{Name = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header="Chef"})
        .Url(Url.Action("GetItems", "LunchGrid"))
        .Persistence(Persistence.View) // save collapsed groups and nodes when switching between grid pages
        .ColumnsPersistence(Persistence.Session) // save columns (width, grouping, etc..) for browser session lifetime
        .Resizable(true)
        .Height(300)
        .PageSize(10)
        .Parent("txtperson","person")
        .Parent("txtfood","food")
        %>
        LunchGridController.cs
        public class LunchGridController : Controller
        {
        public ActionResult GetItems(GridParams g, string person, string food)
        {
        food = (food ?? "").ToLower();
        person = (person ?? "").ToLower();

        var list = Db.Lunches
        .Where(o => o.Food.ToLower().Contains(food) && o.Person.ToLower().Contains(person))
        .AsQueryable();

        return Json(new GridModelBuilder<Lunch>(list, g)
        {
        Key = "Id", // needed for Entity Framework | nesting | tree
        Map = o => new
        {
        o.Id,
        o.Person,
        o.Food,
        o.Location,
        o.Price,
        o.Date,
        CountryName = o.Country.Name,
        ChefName = o.Chef.FirstName + " " + o.Chef.LastName
        }
        }.Build());
        }
        }


        Grid and PopupForm used for CRUD operations:

        Home/Index.aspx
        <%:Html.Awe().InitPopupForm()
        .Name("createPurchase")
        .Group("purchase")
        .Url(Url.Action("Create","GridCrudDemo"))
        .Success("itemCreated('PurchasesGrid')")%>

        <%:Html.Awe().InitPopupForm()
        .Name("editPurchase")
        .Group("purchase")
        .Url(Url.Action("Edit", "GridCrudDemo"))
        .Success("itemUpdated('PurchasesGrid')")%>

        <%:Html.Awe().InitPopupForm()
        .Name("deletePurchase")
        .Url(Url.Action("Delete", "GridCrudDemo"))
        .Success("itemDeleted('PurchasesGrid')")
        .Parameter("gridId", "PurchasesGrid") // the confirm dialog uses it to emphasize the row
        .Height(200)
        .Modal(true)%>

        <%--you can put these js functions in your Site.js--%>
        <script type="text/javascript">
        function itemDeleted(gridId) {
        return function (res) {
        var $grid = $("#" + gridId);
        $grid.data('api').select(res.Id)[0].fadeOut(500, function () {
        $(this).remove();
        if (!$grid.find('.awe-row').length) $grid.data('api').load();
        });
        };
        }

        function itemUpdated(gridId) {
        return function (item) {
        var api = $('#' + gridId).data('api');
        var xhr = api.update(item.Id);
        $.when(xhr).done(function () {
        var $row = api.select(item.Id)[0];
        var altcl = $row.hasClass("awe-alt") ? "awe-alt" : "";
        $row.switchClass(altcl, "awe-changing", 1).switchClass("awe-changing", altcl, 1000);
        });
        };
        }

        function itemCreated(gridId) {
        return function (item) {
        var $grid = $("#" + gridId);
        var $row = $grid.data('api').renderRow(item);
        $grid.find(".awe-tbody").prepend($row);
        $row.addClass("awe-changing").removeClass("awe-changing", 1000);
        };
        }
        </script>
        <div class="bar">
        <div style="float: right;">
        <%:Html.Awe().TextBox("txtSearch").Placeholder("search...").CssClass("searchtxt") %>
        </div>
        <button type="button" onclick="awe.open('createPurchase')" class="awe-btn">Create</button>
        </div>
        <%:Html.Awe().Grid("PurchasesGrid")
        .Url(Url.Action("GridGetItems","GridCrudDemo"))
        .Parent("txtSearch","search")
        .Height(350)
        .Columns(
        new Column{Name = "Id", Width = 55, Groupable = false},
        new Column{Name="Customer"},
        new Column{Name="Product"},
        new Column{Name="Quantity", Width = 100},
        new Column{Name="Date", Width = 100},
        new Column{ClientFormat = Utils.EditFormat("editPurchase"), Width = 50},
        new Column{ClientFormat = Utils.DeleteFormat("deletePurchase"), Width = 50 })%>
        GridCrudDemoController.cs
        public class GridCrudDemoController : Controller
        {
        public ActionResult Index()
        {
        return View();
        }

        public ActionResult GridGetItems(GridParams g, string search)
        {
        search = (search ?? "").ToLower();
        var list = Db.Purchases.Where(o => o.Customer.ToLower().Contains(search) || o.Product.ToLower().Contains(search));

        return Json(new GridModelBuilder<Purchase>(list.OrderByDescending(o => o.Id).AsQueryable(), g)
        {
        Key = "Id", // will set a data-k attribute for each row, the delete dialog uses it to emphasize the row
        GetItem = () => Db.Get<Purchase>(Convert.ToInt32(g.Key))
        }.Build());
        }

        public ActionResult Delete(int id, string gridId)
        {
        var purchase = Db.Get<Purchase>(id);

        return View(new DeleteConfirmInput
        {
        Id = id,
        GridId = gridId,
        Message = string.Format("Are you sure you want to delete purchase {0} of customer {1}", purchase.Id, purchase.Customer)
        });
        }

        [HttpPost]
        public ActionResult Delete(DeleteConfirmInput input)
        {
        Db.Delete<Purchase>(input.Id);
        return Json(new { input.Id });
        }

        public ActionResult Edit(int id)
        {
        var o = Db.Get<Purchase>(id);
        var input = new PurchaseInput
        {
        Customer = o.Customer,
        Product = o.Product,
        Date = o.Date,
        Quantity = o.Quantity
        };

        return View(input);
        }

        [HttpPost]
        public ActionResult Edit(PurchaseInput input)
        {
        if (!ModelState.IsValid) return View(input);

        var o = Db.Get<Purchase>(input.Id);
        o.Customer = input.Customer;
        o.Date = input.Date.Value;
        o.Product = input.Product;
        o.Quantity = input.Quantity;
        Db.Update(o);
        return Json(o);
        }

        public ActionResult Create()
        {
        return View("Edit");
        }

        [HttpPost]
        public ActionResult Create(PurchaseInput input)
        {
        if (!ModelState.IsValid) return View("Edit", input);
        var o = new Purchase
        {
        Customer = input.Customer,
        Date = input.Date.Value,
        Quantity = input.Quantity,
        Product = input.Product
        };
        Db.Insert(o);
        return Json(o);
        }
        }