Migrate WebForms forms to MVC forms

Once you decide to work with MVC forms, you can start creating MVC forms from scratch and have full control over the form markup with the MVC convention-based framework.

If you, however, worked web forms previously and you want to keep using the form content, layout, and fields, you can migrate old web forms to MVC forms, instead of making the same form configurations from scratch. To do so, you need to run the migration script that automatically migrates your web forms to MVC forms.

When migrating web forms, the new MVC forms:

  • Have the same name as the old web forms with an _MVC suffix at the end
  • Use MVC fields that replace the equivalent web forms fields
  • Have the same settings and configuration of the form fields
  • Have the same layouts migrated to the MVC grid equivalent, so the positions of the widgets are preserved
  • Have form responses and subscriptions migrated as well.

    NOTE: Responses are not copied, they are linked to the new MVC form instead. After migration. the original web form will have no responses.

IMPORTANT: Modifications you make over the web form layout widget are not migrated. We recommend you check the final look of your new MVC form after the migration. Have in mind that styles that you used in the web form are not loaded since the new MVC form is based on resource packages. You may need to style the forms additionally after migration.

Mapping between web forms fields and MVC forms fields

Since field names differ between the two types of forms,after migration fields are mapped in the following way:

Web form field MVC form field
FormCheckboxes  CheckboxesFieldController 
FormDropDownList  DropdownListFieldController 
FormMultipleChoice  MultipleChoiceFieldController 
FormParagraphTextBox  ParagraphTextFieldController 
FormTextBox  TextFieldController 
FormFileUpload  FileFieldController 
FormCaptcha  CaptchaController 
FormSectionHeader  SectionHeaderController 
FormInstructionalText  ContentBlockController 
FormSubmitButton  SubmitButtonController 
default  TextFieldController 

Mapping between web forms layouts and MVC grid widgets

To make sure the layout of your forms looks the same after migration, web forms layouts are mapped to MVC grid widgets in the following way:

Layout title Grid widget 
100%  grid-12 
25% + 75%  grid-3+9 
33% + 67%  grid-4+8 
50% + 50%  grid-6+6 
67% + 33%  grid-8+4 
75% + 25%  grid-9+3 
33% + 34% + 33%  grid-4+4+4 
25% + 50% + 25%  grid-3+6+3 
4 x 25%  grid-3+3+3+3 
5 x 20%  grid-2+3+2+3+2 

Run the migration script

  1. Clone the MVC samples repository from the GitHub repository.
  2. Copy all the files from the FormsMigration folder in your Sitefinity CMS WebApp project.
  3. Build your Sitefinity CMS web application.
  4. Log in your website and on the frontend, navigate to the http://<mywebsite.com>/MigrateForms.aspx page.

    NOTE: In the URL above, <mywebsite.com> is the name of your website.

  5. Click the Duplicate forms button.

Result

Your web forms are migrated to MVC forms, but none of your public content is affected. The newly migrated forms are in status Draft and will not be public until you publish them.You need to remove the old web forms from the pages and drag and drop the new MVC forms to display them on the frontend and make them public.

Migrate custom fields

By default, your custom web form fields are migrated to MVC as TextFields. You can, however, create your own custom MVC fields and drag them onto the MVC forms.

Another option is to add mappings for your custom fields in the upgrade script. To do this, you edit the MigrateForms.aspx.cs file:

  1. Open the MigrateForms.aspx.cs file and locate the fieldMap collection.
  2. Add a record in the collection in the following manner:

In the code above:

  • [MyCustomWebFormsField] is the name of the existing custom field that you need to migrate
  • [MVCFormsControllerName] is the name of the controller that you will use to display your custom field in the MVC form. In case you find relevant equivalent between the existing MVC fields you can use it.
  • [MyCustomFieldConfigurator] is class that implements the IElementConfigurator interface.
    In the Configure method you can manually migrate the settings of the field to the new field. If there are no settings to migrate, you can leave this as null.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?