Create Form Views

[JeremyCaney]

Establish new ASP.NET Core views to provide the user interface for the forms.

Current Approach

The current forms use ASP.NET WebForm Web Controls wrapped up in User Controls to expose the user interface, centralize reusable components, and provide both client- and server-side form validation.

New Approach

With ASP.NET Core, the forms will now use standard MVC views. Reusable components can be handled via either partial views or—if they need to be parameterized—Razor components or view components. Form validation can now be handled using a combination of POCO attribute annotations as well as Microsoft’s jQuery-Validation-Unobtrustive library for client-side validation. With ASP.NET Core 3.0 specifically, the input controls can now use the built-in Razor components.

Research

• [x] Determine functional differences between <partial for />, <partial model /> and @Html.EditorFor()
• [x] How to validate a required checkbox (for terms of use); the [Range()] approach isn't working
• [x] How can the navigation menu be configured to use the Web navigation? Perhaps with a TopicLookup of root namespaces?
• [x] Determine how to client- and server-side validation on complex properties with required types if the property itself is optional (e.g., conditional contacts).
• [x] What's the best approach for data binding dropdown lists? Enums? OnTopic metadata?

Steps (Application)

• [x] Create a partial view for each model type (e.g., CoreContract, Profile)
• [x] Create a view for each form to composite the above EditorTemplates
• [x] Add markup and styles from existing forms to the above views
• [x] (?) Create an Email.cshtml for representing the general email template

Partial views

• [x] OptionalContact
• [x] CoreContact
• [x] Contact
• [x] ExtendedContact
• [x] Address
• [x] Profile
• [x] ExtendedProfile
• [x] ModuleSelection

Forms

• [x] AcademicInstructor
• [x] AcademicStudent
• [x] Demo
• [x] Evaluation
• [x] Newsletter
• [x] Quote
• [x] Training
• [x] UserConference

Issues

• [x] Custom Validation: Add support for detecting free/public domains (e.g., gmail.com).
• [x] Required Fields: Create CSS to mark and prefix required fields.
• [x] Error Styles: Update error rules to recognize JQuery-Validate-Unobtrusive classes.
• [x] Email Instructions: Move email instructions to individual form pages, not _CoreContact.
• [x] Follow-up Pages: Implement follow-up pages, ideally via OnTopic integration.
• [x] Button Styles: Implement special CSS handling for check boxes, radio buttons.
• [x] Conditional Logic: Wireup conditionally enabled form elements and messaging.

This will likely represent the largest effort in the forms migration, since much of the legacy code won’t translate to the new format.

[JeremyCaney]

Question: "Determine functional differences between <partial for />, <partial model /> and @Html.EditorFor()"

Html.EditorFor(o => o.BindingModel.Trainer, "Contact", "BindingModel.Trainer", null)

• Allows HTML field name (BindingModel.Trainer) to be set independently of model (o.BindingModel.Trainer)
• Uses the /EditorTemplates, which helps is a nice organizational structure

<partial name="Contact" for="BindingModel.Trainer" />

• Automatically assigns HTML field name based on the property
• Can use any partial view, thus providing some flexibility in organization
• The @Model is implicit; this enforces use of a valid model property

<partial name="Contact" model="Model.BindingModel.Trainer" />

• Does not assign the HTML field name, nor provide an option
• Can use any partial view, thus providing some flexibility in organization
• Will not work with complex objects unless they're first created
• Does not populate child objects (due to issue with HTML field name)
• Doesn't even work with primary properties since they're nested under BindingModel

Given this, my recommendation is that we use <partial for /> on GoldSim, as it uses declarative markup, correctly interprets the HTML field name, and supports nested complex objects.