PopupForm

Has the same features as the Popup, except this helper is used to render an action that has a form in it's view. By default has 2 buttons OK which posts the forms via ajax and Cancel.

Basic usage

It can be used by initialising it first and opening it after using js like this:

 @(Html.Awe().InitPopupForm()
    .Name("pf1")
    .Url(Url.Action("Edit","Meal"))
    .Title("create meal"))

<button type="button" class="awe-btn" onclick="awe.open('pf1', { params: { id: 123 } })">Edit</button>

The PopupForm 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 that function will be executed and the json object will be passed to that function. Note: When there is more Popup helpers declared that have the same

.Name(string)

, they will share the same popup window, so opening one will close the other. example of get and post actions used with popupform:

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

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

    Db.Insert(new Meal { Name = input.Name, ... });

    return Json(new { });// return a json obj on success (even an empty one)
}

Opening the popup

You can open an initialised popup using the

awe.open(name [, cfg, event])

js function, something like this:

awe.open('popup1');

and if you need to send additional parameters (like for an edit grid row button), you can do it like this:

awe.open('popup1', { params: { id: 73 });

Properties

Name	popup id, used with awe.open(name) , when using 2 popups with same name opening one will close the other
Url	the url to the action that returns the content
Success	a js function to be executed on success
Button	add a button to the popup
RemoveOnClose	whether to remove the content of the popup and the popup itself after close, by default is true
Fullscreen	if true the popup will fill the browser window
Height	popup height
Width	popup width; desired width in case of the default awesome popup
Title	popup title
PopupClass	set a css class to the main popup div