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

How to convert from Webforms to MVC in an #Episerver site

Stuck with an ASP.NET Webforms-solution? Too much work to redo all web to MVC? Then here is the straight forward way to progressively phase to MVC without rebuilding all… Also with several great bonus’!!

Published 17th December 2016
For Episerver Version 7.5 and later

Here is a guide, how to go from a webforms site to MVC hybrid, and 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, and then tell the editors to build all new pages with MVC.

We’ve done this under 2016, with great success.

This method lets you also easily convert page types to the new MVC page types in “admin/content types/convert pages” built in function.

If you rather want to replace the webform-template with MVC view straight on, read my post Automatically migrate Webforms templates to MVC views

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

What´s needed then? 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. Create the pagetype model for the new MVC, by pasting all class content (properties and methods) from Webform model into new MVC model, and then inherit the Webform model to the new MVC model. GOT IT? YES!
  4. 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)
  5. Then make your Controller, ViewModel and View to your MVC model.
    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.
  6. Then make the same procedure with your block models!! This is explained in my post “Using blocks in both MVC and Webforms context

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.

Make an MVC model of your webforms model

Hang on… Create a pagetype model for the new MVC, by pasting all class content (properties and methods) from Webform model into new MVC model, and then inherit the Webform model to the new MVC model.

Lost?

The webform page type must inherit of the MVC page type. The purpose of this is that the models will have the same properties. And easy to convert automaticly later on.

Before:

After:

With the new MVC page type in between:

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:

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.

Convert Pages

Now you can convert page types to the new MVC page types in “admin/content types/convert pages” built in function.

Good luck and let me know how it went!

Using blocks in both MVC and Webforms context made easy in #Episerver

This is a great feature. Comes in handy when you need to convert your site from webform to MVC, it allows the editor to reuse the blocks, just by adding partial views (MVC renderers).

Published 14th December 2016
For Episerver Version 7.5 and later

Johan Björnfot: You cannot mix Mvc and webform templates on the same request. For example a page rendered through a MVC controller/View cannot render a block that only has a UserControl template. So to be able to use a block both on a webform page and a MVC page you need to have both MVC and WebForms renderers for the block (the same goes for partial renderers for pages).

But how? …

EpiServer have made it easy for you to have different renderers, the TemplateResolver scans on init where your Block Model is used and depending of Context (webforms or MVC) it displays the right template. Yey!

What you need is a solution with both Webform Templates and MVC views. (this will be an upcoming blog post soon)

We need then one block model and two renderers, one ascx and one cshtml. Off course depending of the complexity of the partial view, you’ll may add a Controller with a ViewModel.

The Block Model: JennyBlock.cs

The CSHTML in views/shared/jennyblock.cshtml

The jennyblocktemplate.ascx

And the code behind

So conclusion:

  1. If you have a site with Webforms, and want to convert the site to MVC, this pattern helps the editor to reuse the blocks on their new MVC views.
  2. No need for any TemplateDescription for default templates

TIP 1. if you need different Attributes on the block models, you may just make a new one and inherit from the MVC Model.

Sources:

How to make #Episerver #visitorgroups work behind a CDN

There is two way to make the IP come from the actual client instead of the CDN edge server. Here is a guide.

Published 25th November 2016

Sometimes when you google or duckduckgo to find the solution, you don‘t always find the best practice way at first, or you may also find an old blog post and since you are eager to get it working, you don’t take your time to seek for alternate way.  So If you found your way here I will describe two ways to make it work.

“In Content Delivery Networks (CDNs), requests to the web server often come from an edge server and not from the actual client; therefore the HttpContext.Request.UserHostAddress property reflects the edge server’s IP address rather than the connecting client’s.” – Epi Documentation

Best practice, the Episerver way as it meant to be done:

In the CDN panel you may choose a name for the header variable that the client ip should be using, or for example Akamai is using custom header variable True-Client-IP. Then change this appsetting to make it work for visitorgroups.

Header X-Forwarded-For is supported by most CDNs, this header contains a comma separated list of IP addresses, one for each CDN/proxy that a request passes through. This header is supported by using the same setting.

It is possible to specify the number of CDNs/proxies the header is expected to contain. Default value is 1, change this value if more than one CDN or proxy is used.

 

The IIS Url Rewrite way:

Since it sometime differs how many proxies the user is going thru (or you don’t know), this is a way to change HttpContext.Request.UserHostAddress eg ServerVariables[“REMOTE_ADDR”] from the first IP in the IP list in ServerVariables[“HTTP_X_FORWARDED_FOR”].

After installing you have this icon in IIS on the site.
After installing you have this icon in IIS on the site.

First install Url Rewrite to your IIS – https://www.iis.net/downloads/microsoft/url-rewrite

URL Rewrite allows Web administrators to easily build powerful rules using rewrite providers written in .NET, regular expression pattern matching, and wildcard mapping to examine information in both URLs and other HTTP headers and IIS server variables.

urlrewrite_rules_changeheaders

manageservervariablesYou may put up rules in the IIS UI, but the most important to make it work is to “Manage Server Variables” and Allow to manipulate them, Add REMOTE_ADDR and HTTP_X_FORWARDED_FOR.

allowed-server-variables-remote_addr

Adding the variable is only done in IIS UI, but the rules are editable in the Web.config, looking like this.

To test this, there is several add ons to you favorite browser to download to simulate and test this before putting it in production.

Sources: