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:

“Mobile last” strategy approach with “Multilayered webforms presentation architecture” for ASP.NET Webforms and #EPiServer CMS 9, 8 and 7,5 #EpiDev #MobileLast

Hey EPiServer World, with you in mind! Stuck with an ASP.NET WebForms-solution with no responsive layout? And the owner won’t redo all web to MVC? Then here is the simpler way to go responsive… without rebuilding all and immoderate job effort from editors… only fun work for the web developers.

There can be several reasons why you just can’t upgrade, or you just don’t want a big project redoing all the web, involving editor redoing their content. If you’re pleased with your web, but missing a responsive site the easiest way is to only implement a responsive/mobile channel. Since you probably also stuck with Webforms instead of MVC, there is a way of implementing responsive channels without touching the web logic.

Are you still on CMS 6? check this instead.

Solution: Implement an alternate presentation layer, reusing the aspx code behind and display it for your target devices.

How can we do that? I call it “Multilayered webforms presentation architecture

  1. For each .aspx and .ascx, make a .resp.aspx and .resp.ascx and point it to the same code behind. The .resp.aspx uses a masterpage with appropriate html and style. The resp.aspx uses reference to .resp.ascx. or original ascx (not all ascx needs to be changed if there only is CSS changes).
  2. Register an DisplayChannel for “Mobile”
  3. You have to register your responsive template with a descriptor, put it where you have the original page descriptor: Important put the TAGS on the resp version and Default=true on the default.
  4. Thats it!

Advanced option:

EPiServer 7.5 and later has a build in TemplateResolver. The template resolver is responsible to find what template to use for a certain type. You can high jack it and implement your own logic. This is done by attaching on an event in Application_Start in global asax.

Conclusion: With this mobile strategy approach you gain the following

  • No need for immoderate contributions from editors (probably only the communication part)
  • You could start with the most important mobile pages first, since the fallback is the desktop version.
  • Quite small overhead to get started
  • The URL in browser will be the same for the desktop site and in the mobile phone. Just like you want it.
  • It opens the possibility to go full responsive with the new channel.

Downside: When you work in Visual Studio projects in your .resp.aspx page, and you add new server controls, it may override the designer.cs of the page, so be attentive. Continue reading ““Mobile last” strategy approach with “Multilayered webforms presentation architecture” for ASP.NET Webforms and #EPiServer CMS 9, 8 and 7,5 #EpiDev #MobileLast”