使用其他用户输入的数据填充下拉列表

嘿，看了你的代码，你应该是想实现根据用户选择的国家来动态填充州/地区的下拉列表对吧？刚好我之前做过类似的分步骤表单需求，结合你现有的ASP.NET MVC代码，给你几个实用的方案：

方案一：前端静态切换（适合固定的国家-州映射） #

如果你的国家和州的列表是固定的（比如只有美国有州选项），可以直接用jQuery实现前端的显示/隐藏和列表切换，不用走后端：

先在你的index.cshtml底部添加这段脚本：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 页面加载时先隐藏美国专属字段
        $("#USOnly1, #USOnly3, #USOnly4").hide();
        
        // 监听国家下拉框的变化
        $("#AddressCountry").change(function() {
            const selectedCountry = $(this).val();
            const $stateDropdown = $("#AddressState");
            
            if (selectedCountry === "US") {
                // 显示美国相关的州、邮编、县字段
                $("#USOnly1, #USOnly3, #USOnly4").show();
                // 重置州的选择为默认项
                $stateDropdown.val("");
            } else {
                // 隐藏美国专属字段，并清空对应的值
                $("#USOnly1, #USOnly3, #USOnly4").hide();
                $stateDropdown.val("");
                $("#AddressZipCode").val("");
                $("#AddressCounty").val("");
            }
        });
        
        // 页面加载完成后触发一次变化事件，确保初始状态正确
        $("#AddressCountry").trigger("change");
    });
</script>

方案二：AJAX动态加载（支持多国家的地区列表） #

如果后续要扩展其他国家的地区选项，比如加拿大的省、英国的郡，那用AJAX从后端动态获取数据会更灵活：

第一步：在控制器中添加获取地区的Action #

public JsonResult GetRegions(string countryCode)
{
    var regions = new List<SelectListItem>();
    
    // 根据国家代码返回对应的地区列表
    switch(countryCode)
    {
        case "US":
            regions = RegisterViewModel.States;
            break;
        case "CA": // 举加拿大的例子
            regions.Add(new SelectListItem { Text = "Ontario", Value = "Ontario" });
            regions.Add(new SelectListItem { Text = "Quebec", Value = "Quebec" });
            break;
        case "GB": // 英国
            regions.Add(new SelectListItem { Text = "England", Value = "England" });
            regions.Add(new SelectListItem { Text = "Scotland", Value = "Scotland" });
            break;
        default:
            regions.Add(new SelectListItem { Text = "Select Region", Value = "" });
            break;
    }
    
    return Json(regions, JsonRequestBehavior.AllowGet);
}

第二步：修改前端脚本，用AJAX拉取数据 #

<script>
    $(document).ready(function() {
        $("#USOnly1, #USOnly3, #USOnly4").hide();
        
        $("#AddressCountry").change(function() {
            const selectedCountry = $(this).val();
            const $stateDropdown = $("#AddressState");
            
            if (selectedCountry === "US") {
                $("#USOnly1, #USOnly3, #USOnly4").show();
                // 从后端获取美国州列表
                $.ajax({
                    url: "@Url.Action("GetRegions")",
                    type: "GET",
                    data: { countryCode: selectedCountry },
                    success: function(data) {
                        // 清空现有选项，添加新的州选项
                        $stateDropdown.empty();
                        $.each(data, function(index, item) {
                            $stateDropdown.append($("<option></option>").val(item.Value).text(item.Text));
                        });
                    }
                });
            } else if (selectedCountry === "CA") {
                // 加拿大只显示地区字段，隐藏邮编和县
                $("#USOnly1").show();
                $("#USOnly3, #USOnly4").hide();
                
                $.ajax({
                    url: "@Url.Action("GetRegions")",
                    type: "GET",
                    data: { countryCode: selectedCountry },
                    success: function(data) {
                        $stateDropdown.empty();
                        $.each(data, function(index, item) {
                            $stateDropdown.append($("<option></option>").val(item.Value).text(item.Text));
                        });
                    }
                });
            } else {
                $("#USOnly1, #USOnly3, #USOnly4").hide();
                $stateDropdown.empty().append($("<option></option>").val("").text("Select Region"));
            }
        });
        
        $("#AddressCountry").trigger("change");
    });
</script>

额外优化：条件验证 #

因为只有当用户选美国时，州字段才是必填的，所以可以给模型添加条件验证，避免不必要的报错：

第一步：创建自定义验证属性 #

public class RequiredIfCountryIsAttribute : ValidationAttribute, IClientValidatable
{
    private readonly string _countryPropertyName;
    private readonly string _targetCountry;

    public RequiredIfCountryIsAttribute(string countryPropertyName, string targetCountry)
    {
        _countryPropertyName = countryPropertyName;
        _targetCountry = targetCountry;
        ErrorMessage = "This field is required when country is {0}";
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var countryProperty = validationContext.ObjectType.GetProperty(_countryPropertyName);
        if (countryProperty == null)
        {
            return new ValidationResult($"Unknown property: {_countryPropertyName}");
        }

        var countryValue = countryProperty.GetValue(validationContext.ObjectInstance, null) as string;
        if (countryValue == _targetCountry && string.IsNullOrEmpty(value as string))
        {
            return new ValidationResult(string.Format(ErrorMessage, _targetCountry));
        }

        return ValidationResult.Success;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = string.Format(ErrorMessage, _targetCountry),
            ValidationType = "requiredifcountryis"
        };
        rule.ValidationParameters.Add("countryproperty", _countryPropertyName);
        rule.ValidationParameters.Add("targetcountry", _targetCountry);
        yield return rule;
    }
}

第二步：在模型中应用属性 #

[RequiredIfCountryIs(nameof(AddressCountry), "US")]
[DataType(DataType.Text)]
[Display(Name = "State:")]
public string AddressState { get; set; }

第三步：添加客户端验证脚本 #

<script>
    // 自定义客户端验证方法
    $.validator.addMethod("requiredifcountryis", function(value, element, params) {
        const country = $("input[name='" + params.countryproperty + "'], select[name='" + params.countryproperty + "']").val();
        return country !== params.targetcountry || value !== "";
    });

    // 适配Unobtrusive验证
    $.validator.unobtrusive.adapters.add("requiredifcountryis", ["countryproperty", "targetcountry"], function(options) {
        options.rules["requiredifcountryis"] = {
            countryproperty: options.params.countryproperty,
            targetcountry: options.params.targetcountry
        };
        options.messages["requiredifcountryis"] = options.message;
    });
</script>

最后，如果你担心Session中合并模型时的问题，可以在JoinModels方法里加个判断，比如只有当国家是美国时，才保留州的数据，避免脏数据残留。

备注：内容来源于stack exchange，提问作者Zackeezy