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:
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
- Clone the MVC samples repository from the GitHub repository.
- Copy all the files from the FormsMigration folder in your Sitefinity CMS WebApp project.
- Build your Sitefinity CMS web application.
- 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.
- 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:
- Open the MigrateForms.aspx.cs file and locate the fieldMap collection.
-
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.