November Happy Hour will be moved to Thursday December 5th.

Form submit and blocks

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
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:

<form action="MyAction" method="Post">

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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.