Extending #Episerver.forms with URL QueryString/post Value Element

How to extend Episerver Forms with a hidden QueryString/HttpPost Value Element.

Published 22nd of May 2017
For Episerver Version 10 and Forms > 4.4

Security warning! Be aware of how you use url parameters. This may be a security risk. Use at own risk or not at all.

Had a case where I needed to save a PageId into a form, similar to an order functionality.

You need an Element model:

And the view (which is a copy of built in PredefinedHiddenElementBlock.ascx)

Save your view under views/shared/elementblocks/

When using the element, just fill in the “Predefined value” with the key used by Querystring or form post.

It pops up in the form elements pane:

And in onpage edit:

In email placeholder you’ll find #OrderId#:

Use it wizely with httpGet or HttpPost

More reading

SEO terms:

  • Hidden post value in element of Episerver Form
  • How to extend episerver forms with querystring value

Get page property from submitting page in #Episerver.Forms

How to read a querystring value from the referrer/hosted form page. Also how to read a page property from the submitting page.

Published 16th May 2017
For Episerver Version 10 and Forms > 4.4

By implementing IPlaceHolderProvider in the Episerver.Form.UI  Namespace > 4.4 you can use it to add your own implementation of the Placeholder tags in email, eg #yourelement#

You’ll need to add an ExtraPlaceHolder called eg #SomePageProperty# and then implement it under ProcessPlaceHolders.

Important to remember! All placeholders in ProcessPlaceHolders will be triggered on every submit, even if it is not used in that form.

In the submissionData object, you have a SYSTEMCOLUMN_HostedPage item, where the id of the page submitting is saved, this is what we’ll use.

In some scenarios you may want to read the referrer page querystring, this may be used with HttpUtility.ParseQueryString(requestBase.UrlReferrer.Query)[“key”]

!Security warning! Be aware of how you use url parameters. This may be a security risk. Use wisely or not at all.

In my next upcoming blog post I will show how you can save http posted values into hidden formelements, but also querystring values.

Gist: https://gist.github.com/LucGosso/08ebb442e42cbb7fe239afe63ea95df5

More reading:

SEO terms

  • Extending Episerver forms
  • Customize email

Customize Summary in emails from #Episerver Forms

Episerver Forms is getting stronger. Here is a example of the how to customize the summary text with PlaceHolderProvider that is available in version 4.4.

Published 10th February 2017
For Episerver Version 10 and Forms 4.4

PlaceholderProvider in the Episerver.Form.UI  Namespace >4.4 can be used to override the processing of the Placeholder tags #yourelement#

Placeholders are handled with PlaceHolderService. You can replace PlaceHolderService with your own implementation with Dependency Injection.

But in this example i will extend the DefaultPlaceHolderProvider
because i want to reuse the code and override some methods.

DefaultPlaceHolderProvider is the default implementation of IPlaceHolderProvider, which replaces FormElementPlaceHolders with an actual value and provides an extra #SUMMARY# placeholder.

I will add an ExtraPlaceHolder called #FriendlySummary#, that takes away all hidden fields.

Why Changing the summary:

Editors may use summary in every email when confirming the submission to the user. When they used hidden element, they also where showed in summary, and we don’t want that.

Solution:

A form element that is implementing IExcludeInSubmission is automaticly not displayed in Summary, like the captcha element, but IExcludeInSubmission not applicable in this case.

My condition: All form elements with name starting with “Hidden… “ like “Hidden IP” or “Hidden VisitorGroup is returning user” or “Hidden anything” will not be displayed in my #FriendlySummary#

The form with hidden fields:

 

 

The email message:

The emailed result:

The idea in this example is to replace the value shouldNotShowInSummary with a real code, could be done in this provider code.

The Code example

Summary:

Episerver Forms is getting better and better, PlaceholderProvider is great news. Even better would be to add a new property on BaseElement called “HideInSummary” by default.

Gist:

Source:

SEO Terms:

  • SendEmailAfterSubmissionActor
  • Replacing input fields with custom data after submit
  • Changing field output in email
  • Customize Summary placeholder

Automatically migrate Webforms templates to MVC views in #Episerver

In this post I´ll describe how to do it the hard core way by replacing the webforms template (aspx) to MVC view (cshtml).

Published 5th January 2017
For Episerver Version 7.5 and later

In my previous post (How to convert from Webforms to MVC in an #Episerver site) I describe one way of doing it (let´s call it the chicken way, eg making/letting editors use both webforms and MVC models in a Hybrid and use “Convert Pages” to manage convertion). In this post I´ll describe how to do it (the hard core way) by replacing the webforms template (aspx) to MVC view (cshtml).

All this can be done quite easy even on big sites without involving editors and without redoing their content. Do it agile, step by step, the result will be running Webform and MVC beside each other, just by migrating one template at a time.

We’ve done it, with great success.

This method enables you to switch a Content Types Model from using Webforms to MVC.

Migrating to MVC enables you to work with Episerver Forms (which is MVC only)

6 steps summarized (explained later down)

  1. Set up the MVC configuration
  2. Start with the most used page template, normally an article page (I assume you have a webforms block enabled page)
  3. Build the _masterlayout.cshtml with partials, (yes it takes some while to make the _masterlayout.cshtml look like the masterpage.master, but it’s worth it)
  4. Then make a Controller, ViewModel and View to the designated Content Type Model.
    1. TIP 1: Put your logic in the ViewModel Constructor instead of the controller, and reuse the ViewModel on your .aspx.cs, so you only have the logic on one place.
  5. Then make the same procedure with your block models!! This is explained in my post “Using blocks in both MVC and Webforms context
  6. Now to “the switch”
    • Make it in code with TemplateDescriptor
    • Or by switching template in runtime in Admin Mode/Content Types/YourModel/Settings

Set up the MVC configuration

I won’t go in to details here so check a clean install of Episerver, and copy the files from Business-folder, you’ll need minimum to make and register a siteViewEngine with all your custom routing paths. Then normally create the Model View Controller pattern with the same name as the model. You should know this part.

Build your _layout.cshtml and partials

Follow my guide “Using blocks in both MVC and Webforms context

Further more you don’t want some logical code being on two places, in the .ascx and controller, therefore I suggest you put it in the constructor of the ViewModel, for example like this:

Put the logic in the view model constructor:

use it in Webforms ascx:

MVC:

“THE SWITCH”

Your have two ways:

  1. Do it manually in admin UI, go to Admin Mode/Content Types/YourModel/Settings Normally your content type has webforms checked, check instead MVC, choose your Assosiated Controller, SAVE! DONE.

    Prerequisits: TemplateDescription is NOT used in your code or default is false.

    Content Type:

    Webform Template:

    MVC Controller:

    Change in Admin UI:

  2. Do it in the code by using [TemplateDescription(default=true)] on your Controller and the webform-page default=false.

TIP 1:

Remove all postbacks stuff, and build some webapi with json response

TIP 2:

Too much work rebuilding some .ascx controls? Render the ascx on an empty aspx that is requested with jQuery.ajax (an XMLHttpRequest), supplying context thru querystring, and place the rendered response HTML on your page.

Good luck and let me know how it went!

Search terms:
  • Migrating ASP.NET Web Forms to the MVC Pattern
  • Mixing Web Forms and ASP.NET MVC
  • Replacing Webforms with MVC
  • Migrate an ASP.Net Web Forms website to MVC
  • Episerver Forms with webforms