ASP.NET Core Razor：AnswerTypeId为1时答案逗号分隔存储与展示实现

现有功能概述 #

当前表单已实现：

• 选择**文本类型（AnswerTypeId=1）**时，输入框仅允许输入字母（含土耳其语特殊字符çÇğĞıİöÖşŞüÜ）
• 选择**数字类型（AnswerTypeId=2）**时，输入框仅允许输入数字

新增需求实现 #

需新增：当选择文本类型时，输入内容支持逗号分隔，最终以逗号分隔格式保存到数据库，页面展示也保持逗号分隔形式。

修改后的前端代码 #

@model TourCms.DataAccess.ViewModels.SurveyCreateViewModel
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Basic Layout -->
    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Create</h5>
                </div>
                <div class="card-body">
                    <div class="col-md-6">
                        <form method="post" asp-action="Create" asp-controller="Survey">
                            <div class="mb-3">
                                <label class="form-label" asp-for="Question"></label>
                                <input class="form-control" asp-for="Question">
                                <span asp-validation-for="Question" class="text-danger"></span>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" asp-for="AnswerTypeId"></label>
                                <select class="form-control" asp-for="AnswerTypeId" id="AnswerTypeId" >
                                    <option value="1">Text</option>
                                    <option value="2">Number</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" asp-for="Answers"></label>
                                <input id="answer-input" class="form-control" asp-for="Answers">
                                <span asp-validation-for="Answers" class="text-danger"></span>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" asp-for="Language"></label>
                                <select class="form-control" asp-for="Language">
                                    <option value="">Select</option>
                                    <option value="EN">English</option>
                                    <option value="TR">Turkish</option>
                                    <option value="FR">France</option>
                                    <option value="DE">Deutsche</option>
                                </select>
                                <span asp-validation-for="Language" class="text-danger"></span>
                            </div>
                            <div class="mb-3">
                                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            </div>
                            <button type="submit" class="btn btn-primary">Create</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var answerInput = document.getElementById('answer-input');
        var answerTypeSelect = document.getElementById('AnswerTypeId');

        checkAnswerType();

        answerTypeSelect.addEventListener('change', function () {
            checkAnswerType();
        });

        function checkAnswerType() {
            var answerType = answerTypeSelect.value;
            answerInput.value = '';              
        }

        answerInput.addEventListener('input', function () {
            if (answerTypeSelect.value === '1') {
                // 允许字母、土耳其语特殊字符和逗号，同时处理格式问题
                let cleanedValue = this.value.replace(/[^a-zA-Z çÇğĞıİöÖşŞüÜ,]/g, '');
                // 替换连续逗号为单个逗号
                cleanedValue = cleanedValue.replace(/,+/g, ',');
                // 移除开头/结尾的逗号
                cleanedValue = cleanedValue.replace(/^,|,$/g, '');
                this.value = cleanedValue;
            } else {
                this.value = this.value.replace(/[^0-9]/g, '');
            }
        });
    });
</script>

后端处理提示 #

1. ViewModel验证：可在SurveyCreateViewModel中添加自定义验证，确保当AnswerTypeId=1时，Answers字段为合法的逗号分隔文本（可选）
2. 数据库保存：直接将前端传入的逗号分隔字符串保存到对应字段即可，若后续需要拆分使用，可在读取数据时进行拆分处理

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