Form submit and blocks

Dejan Caric

Vote:

Hi,

I have to allow the editor to drag & drop forms to an XHTML field.

These are custom forms, not xforms.

I can create a block for each form, and then use:

Unobtrusive validation for client side validation (validation before postback)
Jquery to send ajax requests to WebAPI, and then based on response I can display an error message, redirect the user, etc.

This works fine… but there’s a catch :)

The site should work when javascript is disabled.

Some of the challenges I have:

I cannot use MVC form helpers because I don’t know how many forms will be displayed on the page. Each property has to have a different name, because Html.LabelFor() helper won’t work as expected.
How to handle routing / form submit? Do I have to create a controller action in each page controller? Or do I create controller actions in block controllers?

Is there any sample with custom forms inside page blocks with some basic validation?

Thanks!

#117039

Feb 10, 2015 14:22

Vote:

On my blog I have an example of modelbinding a form model:
http://krompaco.nu/2015/01/working-with-your-own-forms-in-episerver-and-mvc/

You have the option to use any controller among Page, Block or DefaultPage I guess.

If you need to keep track of which Block was posting you could construct some kind of identifier, such as CurrentPage.PageLink.ID + "-" + CurrentBlock.ContentLink.ID. If you want to support same block on same page twice you need to add something more (ItemIndex or something). Use the identifier in a hidden element in your block's <form>, for example <input type="hidden" name="formidentifier" value="@FormIdentifier" />. Make sure your FormModels contain a prop named "FormIdentifier".

Off the top of my head... :-)

EDIT: You should use x-@FormIdentifier in your ID's and <label for="x-@FormIdentifier"> I forgot to mention.

#117048

Edited, Feb 10, 2015 16:59

Dejan Caric

Vote:

Hi Johan and thanks for help!

I was also thinking to use some kind of block / form identifier in order to solve the "label for" issue.

But in that case, how can I make model binders to work with form identifiers?

I’d like to use ModelState.AddModelError to highlight invalid fields and display validation summary.

I guess I have to write controller actions in page controller, not in block controllers, because on each post-back I have to render the entire page + info from ModelState, right?

Is there something else I need to include in the route / hidden fields?

For example, if I use the following code:

This works fine if I:
- go to start page
- Click on the link that takes me to domain.com/my-page
- submit the form and use return View("Index", myModel); in controller action
- asp.net will redirect me to domain.com/my-page/MyAction, which is fine

But if I open a new instance of browser, navigate directly to domain.com/my-page and submit the form, this time asp.net will redirect me to domain.com/MyAction (notice that my-page part is missing), which returns 404.

I found this article: http://epiwiki.se/developing/mvc/sample-how-to-use-post-backs-in-episerver-mvc

Haven’t tested it yet :)

#117079

Edited, Feb 11, 2015 10:33

Jannes Kruger - Apr 21, 2020 13:45

Hi Dejan Caric, just for your information, the article link posted above links through to a strange website and probably not to the intended article