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 or Html.Awe().OpenPopup helper. 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, also in the Wizard Demo. In most Crud demos the call to Html.Awe().InitPopupForm is being wrapped in a custom helper Page.InitCrudPopupsForGrid which calls this helper multiple times (for Create, Edit, Delete).

PopupForm with Success function assigned

PopupFormDemo.aspx
<% InitPopupForm1.InitPopupForm()
.Name("createDinner")
.Height(400)
.Url(Page.Url().Action("Create", "DinnersGridCrud"))
.Success("created"); %>
<awe:Ocon runat="server" ID="InitPopupForm1" />

<% Button1.Button().Text("Create").OnClick(Page.Awe().OpenPopup("createDinner")); %>
<awe:Ocon runat="server" ID="Button1" />

<script type="text/javascript">
function created(result, popup) {
alert('dinner created');
}
</script>
Demos/Grid/DinnersGridCrudController.cs
using System;
using System.Linq;
using AwesomeWebFormsDemo.Data;
using AwesomeWebFormsDemo.Models;
using AwesomeWebFormsDemo.ViewModels.Input;
using System.Web.Mvc;


using Omu.AwesomeWebForms;

namespace AwesomeWebFormsDemo.Controllers.Demos.Grid
{
/// <summary>
/// parameters for Edit, Delete controller Actions need to remain called "id", that's how they are set in GridUtils.cs ( "params:{{ id:" );
/// </summary>
public class DinnersGridCrudController : Controller
{
public ActionResult GridGetItems(GridParams g, string search)
{
var gmb = new GridModelBuilder<Dinner>(Db.Dinners.AsQueryable(), g)
{
KeyProp = o => o.Id, // needed for api select, update, tree, nesting, EF
};

gmb.FilterContainsStr(o => o.Name, search);

return this.AweJson(gmb.Build());
}

public ActionResult Create()
{
// make sure to use "return PartialView" for PopupForm/Popup views
// this will ignore _viewstart.cshtml so that you don't use the _Layout.cshtml and reload all the scripts
return PartialView();
}

[HttpPost]
public ActionResult Create(DinnerInput input)
{
return Save(input);
}

public ActionResult Edit(int id)
{
var dinner = Db.Dinners
.Single(o => o.Id == id);

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

return PartialView("Create", input);
}

[HttpPost]
public ActionResult Edit(DinnerInput input)
{
return Save(input);
}

private ActionResult Save(DinnerInput input)
{
if (!ModelState.IsValid) return PartialView("Create", input);

var isCreate = !input.Id.HasValue;

var ent = isCreate ? new Dinner() :
Db.Dinners
.First(o => o.Id == input.Id);

ent.Name = input.Name;
ent.Date = input.Date.Value;
ent.Chef = Db.Find<Chef>(input.ChefId);

// ToList req when using EF
ent.Meals = Db.Meals
.Where(o => input.MealsIds.Contains(o.Id)).ToList();

ent.BonusMeal = Db.Find<Meal>(input.BonusMealId);
ent.Organic = input.Organic ?? false;

if (isCreate)
{
Db.Add(ent);
}

// json obj = success for the popupform, id is used to flash the row
return this.AweJson(new { Id = ent.Id });
}

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

return PartialView(new DeleteConfirmInput
{
Id = id,
Type = nameof(Dinner).ToLower(),
Name = dinner.Name
});
}

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

// delete PopupForm's success function will use the Id to animate the row
return this.AweJson(new { Id = input.Id });
}
}
}
\Views\DinnersGridCrud/Create.cshtml
@model AwesomeWebFormsDemo.ViewModels.Input.DinnerInput
@using (Html.BeginForm())
{
using (Html.Awe().BeginContext())
{
<div class="eform">
<div class="earea">
@Html.EditorFor(o => o.Name)
@Html.EditorFor(o => o.Date)
@Html.EditorFor(o => o.ChefId)
</div>
<div class="earea">
@Html.EditorFor(o => o.BonusMealId)
@Html.EditorFor(o => o.MealsIds)
</div>
</div>
}
}

Sending client side parameters to server on content load

Value sent to the server action that returns the popup's content:
PopupFormDemo.aspx

<% InitPopupForm2.InitPopupForm()
.Name("PopupFormParams")
.Url(Page.Url().Action("PopupWithParameters", "PopupFormDemo"))
.Button("Help", "helpClick")
.Parent("txtParam1")
.Parameter("p1", 15)
.ParameterFunc("setParams"); %>
<awe:Ocon runat="server" ID="InitPopupForm2" />

<% Button2.Button().Text("Open Popup")
.OnClick(Page.Awe().OpenPopup("PopupFormParams").Params(new { Id = 123 })); %>
<awe:Ocon runat="server" ID="Button2" />

<script>
function setParams() {
return { a: "hi", b: "how are you" };
}

function helpClick() {
awe.flash($(this).find('.msg1').html('help clicked'));
}
</script>
Demos/Helpers/PopupFormDemoController.cs
public ActionResult PopupWithParameters(int? id, string parent, int p1, string a, string b)
{
ViewData["parent"] = parent;
ViewData["p1"] = p1;
ViewData["a"] = a;
ViewData["b"] = b;
ViewData["id"] = id;
return PartialView();
}

[HttpPost]
public ActionResult PopupWithParameters()
{
return Json(new { });
}
\Views\PopupFormDemo/PopupWithParameters.cshtml
parameter set in the OpenPopup call: id = @ViewData["id"]
<br />
value of the parent: @ViewData["parent"] <br />
<br />
value of the p1 parameter: @ViewData["p1"] <br />
<br />
parameters sent by js function set using ParameterFunc:<br />
a = @ViewData["a"] <br />
b = @ViewData["b"] <br />

@using (Html.BeginForm())
{
}

<div class="msg1"></div>

Submit confirmation using OnLoad func

PopupFormDemo.aspx
<% InitPopupForm3.InitPopupForm()
.Name("confirmedPopup")
.Height(200)
.Url(Page.Url().Action("PopupConfirm", "PopupFormDemo"))
.UseDefaultButtons(true)
.OnLoad("regConfirm"); %>
<awe:Ocon runat="server" ID="InitPopupForm3" />

<% Button3.Button().Text("Open popup").OnClick(Page.Awe().OpenPopup("confirmedPopup")); %>
<awe:Ocon runat="server" ID="Button3" />

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



Comments