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()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("pf1")
.Url(Url.Action("Edit","Meal"))
.Title("create meal"))
<button type="button" class="awe-btn" onclick="awe.open('pf1', { params: { id: 123 } })">Edit</button>
.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 theawe.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 |
Comments