Form submit and blocks



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?


Feb 10, 2015 14:22

On my blog I have an example of modelbinding a form model:

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.

Edited, Feb 10, 2015 16:59

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
- submit the form and use return View("Index", myModel); in controller action
- will redirect me to, which is fine

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

I found this article:

Haven’t tested it yet :)

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.