PopupForm - used to load and post a form in a popup

It can be initialized using Html.Awe().InitPopupForm and opened using awe.open js function. It loads the content from the .Url(string) provided and when the user clicks ok, the form will be posted, if the result of the post is view/string (usually when ModelState not valid) the content of the popup will be replaced with the post result, when the result is a json object the popup will close, if the PopupForm has a success function defined the json object will be passed that function.

You can see the PopupForm being used in all of the Crud demos (Grid, AjaxList), also in the Wizard Demo. In most Crud demos the call to Html.Awe().InitPopupForm is being wrapped in a custom helper Html.InitCrudPopupsForGrid which calls this helper multiple times (for Create, Edit, Delete).

PopupForm with Success function assigned

PopupFormDemo/Index.cshtml
@(Html.Awe().InitPopupForm()
.Name("createDinner")
.Height(400)
.Url(Url.Action("Create", "DinnersGridCrud"))
.Success("created"))

@Html.Awe().Button().Text("Create").OnClick(Html.Awe().OpenPopup("createDinner"))

<script type="text/javascript">
function created(result, popup) {
alert('dinner created');
}
</script>
Demos/Grid/DinnersGridCrudController.cs
/// <summary>
/// Note: If your Key Property is not "Id" (but "MyId"), you need to change the Key = "MyId" in GridGetItems and it in the view
/// change the Bind = "MyId" (if you're showing the id column),
/// and for the action columns you can either specify the MyId property (e.g. GridUtils.EditFormatForGrid("DinnersGrid", "MyId"));
/// or in MapToGridModel additionally to o.MyId add another property Id = o.MyId
/// parameters for Edit, Delete controller Actions need to remain called "id", that's how they are set in GridUtils.cs (params:{{ id: );
/// Edit and Delete post actions must return an object with property "Id" - in utils.js itemEdited and itemDeleted funcs expect it this way;
/// </summary>
public class DinnersGridCrudController : Controller
{
private static object MapToGridModel(Dinner o)
{
return
new
{
o.Id,
o.Name,
Date = o.Date.ToShortDateString(),
ChefName = o.Chef.FirstName + " " + o.Chef.LastName,
Meals = string.Join(", ", o.Meals.Select(m => m.Name))
};
}

public ActionResult GridGetItems(GridParams g, string search)
{
search = (search ?? "").ToLower();
var items = Db.Dinners.Where(o => o.Name.ToLower().Contains(search)).AsQueryable();

return Json(new GridModelBuilder<Dinner>(items, g)
{
Key = "Id", // needed for api select, update, tree, nesting, EF
GetItem = () => Db.Get<Dinner>(Convert.ToInt32(g.Key)), // called by the grid.api.update ( edit popupform success js func )
Map = MapToGridModel
}.Build());
}

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

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

var dinner = Db.Insert(new Dinner
{
Name = input.Name,
Date = input.Date.Value,
Chef = Db.Get<Chef>(input.Chef),
Meals = input.Meals.Select(mid => Db.Get<Meal>(mid)),
BonusMeal = Db.Get<Meal>(input.BonusMealId)
});

return Json(MapToGridModel(dinner)); // returning grid model, used in grid.api.renderRow
}

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.BonusMeal.Id
};

return PartialView("Create", input);
}

[HttpPost]
public ActionResult Edit(DinnerInput input)
{
if (!ModelState.IsValid) return PartialView("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 = input.Meals.Select(mid => Db.Get<Meal>(mid));
dinner.BonusMeal = Db.Get<Meal>(input.BonusMealId);
Db.Update(dinner);

// returning the key to call grid.api.update
return Json(new { Id = dinner.Id });
}

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 { Id = input.Id });
}
}
DinnersGridCrud/Create.cshtml
@model AwesomeMvcDemo.ViewModels.Input.DinnerInput
@using (Html.BeginForm())
{
using (Html.Awe().BeginContext())
{
@Html.EditorFor(o => o.Name)
@Html.EditorFor(o => o.Date)
@Html.EditorFor(o => o.Chef)
@Html.EditorFor(o => o.Meals)
@Html.EditorFor(o => o.BonusMealId)
}
}

Sending client side paramters to server on content load

Value sent to the server action that returns the popup's content:
PopupFormDemo/Index.cshtml
@(Html.Awe().InitPopupForm()
.Name("PopupFormParams")
.Url(Url.Action("PopupWithParameters"))
.Button("Help", "sayhi")
.Parent("txtParam1")
.Parameter("p1", 15)
.ParameterFunc("giveParams"))

@Html.Awe().Button().Text("Open Popup").OnClick(Html.Awe().OpenPopup("PopupFormParams"))
<script>
function giveParams() {
return { a: "hi", b: "how are you" };
}

function sayhi() {
alert('hi');
}
</script>
Demos/Helpers/PopupFormDemoController.cs
public ActionResult PopupWithParameters(string parent, int p1, string a, string b)
{
ViewData["parent"] = parent;
ViewData["p1"] = p1;
ViewData["a"] = a;
ViewData["b"] = b;
return PartialView();
}

[HttpPost]
public ActionResult PopupWithParameters()
{
return Json(new { });
}
PopupFormDemo/PopupWithParameters.cshtml
value of the parent: @ViewData["parent"]
<br />
value of the p1 parameter: @ViewData["p1"]
<br />
values sent from the js func set using ParameterFunc:
<br />
a: @ViewData["a"]
<br />
b: @ViewData["b"]

@using (Html.BeginForm())
{
}

Submit confirmation using OnLoad func

PopupFormDemo/Index.cshtml
@(Html.Awe().InitPopupForm()
.Name("confirmedPopup")
.Height(200)
.Url(Url.Action("PopupConfirm"))
.UseDefaultButtons(true)
.OnLoad("regConfirm"))

@Html.Awe().Button().Text("Open popup").OnClick(Html.Awe().OpenPopup("confirmedPopup"))

<script>
function regConfirm() {
var $popup = this.p.d;
var $form = $popup.find('form');
$form.on('submit', function(e) {
if (!$form.valid() || !confirm("Are you sure ?")) {
return false;
}
});
}
</script>