AjaxList CRUD demo


Dinners/Index.cshtml
@Html.InitCrudPopupsForAjaxList("DinnersList1", "Dinners", "Id", "Dinner")

<div class="bar">
<div style="float: right;">
@Html.Awe().TextBox("txtName").Placeholder("search...").CssClass("searchtxt")
</div>

<button type="button" class="awe-btn mbtn" onclick="awe.open('createDinner')">Create</button>
</div>

@(Html.Awe().AjaxList("DinnersList1")
.Url(Url.Action("GetDinners"))
.TableLayout(true)
.Parent("txtName", "search"))
Demos/AjaxList/DinnersController.cs
public class DinnersController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult GetDinners(string search, int page, bool isTheadEmpty, int? pageSize)
{
pageSize = pageSize ?? 10;
search = (search ?? "").ToLower().Trim();

var list = Db.Dinners.Where(o => o.Name.ToLower().Contains(search))
.OrderByDescending(o => o.Id);

var result = new AjaxListResult
{
Content = this.RenderView("ListItems/Dinner", list.Skip((page - 1) * pageSize.Value).Take(pageSize.Value)),
More = list.Count() > page * pageSize
};

if (isTheadEmpty) result.Thead = this.RenderView("ListItems/DinnerThead");
return Json(result);
}

public ActionResult Delete(int id)
{
var dinner = Db.Get<Dinner>(id);

return PartialView(new DeleteConfirmInput
{
Id = id,
Message = string.Format("Are you sure you want to delete dinner <b>{0}</b> ?", dinner.Name)
});
}

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

public ActionResult Create()
{
return PartialView();
}

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

var dinner = Db.Insert(new Dinner
{
Name = input.Name,
Date = input.Date.Value,
Chef = Db.Get<Chef>(input.Chef),
Meals = Db.Meals.Where(o => input.Meals.Contains(o.Id)),
BonusMealId = input.BonusMealId
});

return Json(new { Content = this.RenderView("ListItems/Dinner", new[] { dinner }) });
}

public ActionResult Edit(int id)
{
var dinner = Db.Get<Dinner>(id);

var input = new DinnerInput
{
Id = dinner.Id,
Name = dinner.Name,
Chef = dinner.Chef.Id,
Date = dinner.Date,
Meals = dinner.Meals.Select(o => o.Id),
BonusMealId = dinner.BonusMealId
};

return PartialView("create", input);
}

[HttpPost]
public ActionResult Edit(DinnerInput input)
{
if (!ModelState.IsValid) return View("create", input);
var dinner = Db.Get<Dinner>(input.Id);

dinner.Name = input.Name;
dinner.Date = input.Date.Value;
dinner.Chef = Db.Get<Chef>(input.Chef);
dinner.Meals = Db.Meals.Where(m => input.Meals.Contains(m.Id));
Db.Update(dinner);

return Json(new { Id = dinner.Id, Content = this.RenderView("ListItems/Dinner", new[] { dinner }) });
}
}
Shared/ListItems/Dinner.cshtml
@model IEnumerable<AwesomeMvcDemo.Models.Dinner>
@{
Layout = null;
}
@foreach (var o in Model)
{
<tr class="awe-li" id="dinner@(o.Id)" data-val="@o.Id">
<td>@o.Name </td>
<td>@o.Date.ToShortDateString() </td>
<td>@o.Chef.FirstName @o.Chef.LastName </td>
<td>@(string.Join(", ", o.Meals.Select(z => z.Name)))</td>
<td>
<button type="button" onclick="awe.open('editDinner', {params: {id: @o.Id }})" class="awe-btn">
<span class="ico-edit"></span>
</button>
</td>
<td>
<button type="button" onclick="awe.open('deleteDinner', {params: {id: @o.Id }})" class="awe-btn">
<span class="ico-del"></span>
</button>
</td>
</tr>
}


Helpers/CrudHelpers.cs
public static IHtmlString InitCrudPopupsForAjaxList<T>(
this HtmlHelper<T> html, string ajaxListId, string controller, string key, string popupName)
{
var url = new UrlHelper(html.ViewContext.RequestContext);
var result =
html.Awe()
.InitPopupForm()
.Name("create" + popupName)
.Url(url.Action("Create", controller))
.Height(430)
.Success("utils.itemCreatedAlTbl('" + ajaxListId + "')")
.Group(ajaxListId)
.Title("create item")
.ToString()

+ html.Awe()
.InitPopupForm()
.Name("edit" + popupName)
.Url(url.Action("Edit", controller))
.Height(430)
.Success("utils.itemEditedAl('" + ajaxListId + "', '" + key + "')")
.Group(ajaxListId)
.Title("edit item")

+ html.Awe()
.InitPopupForm()
.Name("delete" + popupName)
.Url(url.Action("Delete", controller))
.Success("utils.itemDeletedAl('" + ajaxListId + "', '" + key + "')")
.Group(ajaxListId)
.OkText("Yes")
.CancelText("No")
.Height(200)
.Title("delete item");

return new MvcHtmlString(result);
}