Episerver表单管理功能开发：数据存储方案求建议

Great to hear you’ve got the hardcoded form submitting to your API working smoothly! Let’s break down how to build that form management functionality in Episerver, with a focus on letting users create forms that include dropdown fields.

Episerver’s content model is key here—we’ll create custom content types to represent forms and their individual fields. This lets users create/edit forms directly in the Episerver editor.

First, create a base content type for all form fields (so you can add other field types later, like text inputs or checkboxes):

[ContentType(DisplayName = "Form Field Base", AvailableInEditMode = false)]
public class FormFieldBase : PageData
{
    [Display(Name = "Field Label", Order = 10)]
    [Required]
    public virtual string Label { get; set; }

    [Display(Name = "Field Name (for API submission)", Order = 20)]
    [Required]
    public virtual string FieldName { get; set; }

    [Display(Name = "Is Required?", Order = 30)]
    public virtual bool IsRequired { get; set; } = false;
}

Next, create a specific content type for dropdown fields, inheriting from the base:

[ContentType(DisplayName = "Dropdown Form Field", Description = "Add a dropdown select field to your form")]
public class DropdownFormField : FormFieldBase
{
    [Display(Name = "Dropdown Options", Order = 40)]
    [EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<DropdownOption>))]
    public virtual IList<DropdownOption> Options { get; set; } = new List<DropdownOption>();
}

// Helper class for dropdown options (text + value pairs)
public class DropdownOption
{
    [Display(Name = "Option Text")]
    public string Text { get; set; }

    [Display(Name = "Option Value (sent to API)")]
    public string Value { get; set; }
}

Finally, create a content type for the form itself, which will hold all fields and API configuration:

[ContentType(DisplayName = "Custom Form", Description = "Create a form to submit data to your external API")]
public class CustomForm : PageData
{
    [Display(Name = "Form Name", Order = 10)]
    [Required]
    public virtual string FormName { get; set; }

    [Display(Name = "API Submission Endpoint", Order = 20)]
    [Required]
    [Url]
    public virtual string ApiEndpoint { get; set; }

    [Display(Name = "Form Fields", Order = 30)]
    [AllowedTypes(typeof(FormFieldBase))]
    public virtual ContentArea FormFields { get; set; }
}

With the content types defined, users can now:

1. Go to the Episerver editor and create a new Custom Form item.
2. Fill in the form name and your API endpoint (matching what you used in the hardcoded form).
3. Add fields to the Form Fields content area—including the Dropdown Form Field type.
4. For dropdown fields, use the collection editor to add text/value pairs for the options.

Now you need to render these custom forms on your site, keeping the same API submission flow as your hardcoded form. Create a view template for the CustomForm content type:

@model YourNamespace.CustomForm

<form action="@Model.ApiEndpoint" method="post" class="custom-form">
    <h2>@Model.FormName</h2>

    @foreach (var fieldItem in Model.FormFields.FilteredItems)
    {
        if (fieldItem.Content is DropdownFormField dropdownField)
        {
            <div class="form-group mb-3">
                <label for="@dropdownField.FieldName">
                    @dropdownField.Label
                    @if (dropdownField.IsRequired)
                    {
                        <span class="text-danger ms-1">*</span>
                    }
                </label>
                <select id="@dropdownField.FieldName" name="@dropdownField.FieldName" 
                        @(dropdownField.IsRequired ? "required" : "")>
                    <option value="">-- Select an option --</option>
                    @foreach (var option in dropdownField.Options)
                    {
                        <option value="@option.Value">@option.Text</option>
                    }
                </select>
            </div>
        }
        // Add logic here for other field types (text inputs, checkboxes, etc.)
        else if (fieldItem.Content is TextFormField textField)
        {
            <div class="form-group mb-3">
                <label for="@textField.FieldName">
                    @textField.Label
                    @(textField.IsRequired ? "<span class='text-danger ms-1'>*</span>" : "")
                </label>
                <input type="text" id="@textField.FieldName" name="@textField.FieldName" 
                       @(textField.IsRequired ? "required" : "") class="form-control">
            </div>
        }
    }

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

This will dynamically generate the form based on the user’s configuration, and submit data to the specified API endpoint just like your hardcoded version.

• Dynamic Dropdown Options: If you need dropdowns populated from an external source (e.g., another API or Episerver content), add a property to DropdownFormField like ContentReference OptionsList or string DataSourceApi, then fetch the options at render time.
• Server-Side Validation: Add Episerver validation attributes to your field properties (like [MaxLength] for text fields) and validate submissions before sending to the API.
• Display Templates: Create separate display templates for each field type (e.g., DropdownFormField.cshtml) to clean up the main form view.

• Create a test form with a dropdown field, add options, and submit it.
• Verify the API receives the correct FieldName and selected value.
• Test required field validation to ensure users can’t submit without selecting an option if marked as required.

内容的提问来源于stack exchange，提问作者Ayo Adesina