ASP.NET MVC无插件实现多语言选择的提交及保存方法咨询

我来帮你搞定这个问题，不用依赖Select2插件，用原生HTML和ASP.NET MVC就能实现多选语言的提交与保存，还能避开插件冲突～咱们一步步来：

1. 调整View层：确保多选下拉正确渲染+回显已选项 #

你的View代码已经有了multiple="multiple"和name="Dil_Id[]"（这个很关键，ASP.NET MVC会自动把多选值绑定到数组），只需要补充编辑时回显已选语言的逻辑：

<div class="form-group">
    <label class="col-md-4 control-label">Which Languages Speak *</label>
    <span style="color:red;"><small> >>> You can select multiple languages.</small></span>
    <div class="col-md-8 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span>
            <!-- 保持name="Dil_Id[]"，确保多选值能被正确提交 -->
            <select class="form-control" name="Dil_Id[]" multiple="multiple" id="select" required>
                @foreach (var item in ViewBag.dilList)
                {
                    // 编辑时判断当前语言是否已被选中，添加selected属性
                    bool isSelected = Model?.SecilenDilIds?.Contains(item.Id) ?? false;
                    <option value="@item.Id" @(isSelected ? "selected" : "")>@item.DilAdi_Eng</option>
                }
            </select>
        </div>
    </div>
</div>

2. 改造Controller层：接收多选数组+调用业务逻辑保存 #

在HttpPost方法里，直接接收int[] Dil_Id参数（和View里的name对应），然后先保存用户基本信息，再处理语言关联：

public class YeniIhtiyacSahibiController : Controller {
    IhtiyacSahibiUyeBLL _ISUye = new IhtiyacSahibiUyeBLL();
    ISUDilBLL _isuDil = new ISUDilBLL(); // members languages

    public ActionResult Index(int Id = 0)
    {
        var model = _ISUye.GetById(Id);
        // 加载所有语言列表到ViewBag，供下拉渲染
        ViewBag.dilList = _isuDil.GetAllLanguages();
        
        // 如果是编辑页面，加载用户已选的语言ID，用于回显
        if (Id > 0)
        {
            model.SecilenDilIds = _isuDil.GetSelectedLanguageIdsByUserId(Id);
        }
        
        ViewBag.Mesaj = GenelAraclarBLL.KayitYeni(); 
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(IhtiyacSahibiUye model, int[] Dil_Id)
    {
        if (ModelState.IsValid)
        {
            // 先保存用户基本信息
            bool isUserSaved = _ISUye.Save(model);
            if (isUserSaved)
            {
                // 编辑模式下：先删除用户之前的语言关联，避免重复
                if (model.Id > 0)
                {
                    _isuDil.DeleteUserLanguages(model.Id);
                }
                
                // 保存新的语言关联（如果有选中的语言）
                if (Dil_Id != null && Dil_Id.Length > 0)
                {
                    _isuDil.SaveUserLanguages(model.Id, Dil_Id);
                }
                
                ViewBag.Mesaj = GenelAraclarBLL.KayitBasarili();
                return RedirectToAction("Index", new { Id = model.Id }); // 跳转到编辑页展示结果
            }
            else
            {
                ViewBag.Mesaj = GenelAraclarBLL.KayitHata();
            }
        }
        
        // 验证失败/保存失败：重新加载语言列表，回显用户选中的选项
        ViewBag.dilList = _isuDil.GetAllLanguages();
        model.SecilenDilIds = Dil_Id;
        return View(model);
    }
}

3. 模型补充：添加用于回显的属性 #

给你的IhtiyacSahibiUye模型加一个临时属性，用来存储用户选中的语言ID数组（不需要存到数据库，只是给View回显用）：

public class IhtiyacSahibiUye
{
    // 你的现有属性...
    public int Id { get; set; }
    // 其他用户信息属性...

    // 新增：用于View回显已选语言
    public int[] SecilenDilIds { get; set; }
}

4. BLL层实现语言关联的CRUD #

给ISUDilBLL补充几个核心方法，处理用户和语言的关联逻辑：

public class ISUDilBLL
{
    // 获取所有语言列表
    public List<Dil> GetAllLanguages()
    {
        using (var dbContext = new YourDatabaseContext())
        {
            return dbContext.Diller.ToList();
        }
    }

    // 根据用户ID获取已选语言的ID数组
    public int[] GetSelectedLanguageIdsByUserId(int userId)
    {
        using (var dbContext = new YourDatabaseContext())
        {
            return dbContext.ISUDiller
                           .Where(x => x.IhtiyacSahibiUyeId == userId)
                           .Select(x => x.DilId)
                           .ToArray();
        }
    }

    // 删除用户所有已关联的语言
    public void DeleteUserLanguages(int userId)
    {
        using (var dbContext = new YourDatabaseContext())
        {
            var existingRelations = dbContext.ISUDiller.Where(x => x.IhtiyacSahibiUyeId == userId);
            dbContext.ISUDiller.RemoveRange(existingRelations);
            dbContext.SaveChanges();
        }
    }

    // 保存用户与语言的新关联
    public void SaveUserLanguages(int userId, int[] languageIds)
    {
        using (var dbContext = new YourDatabaseContext())
        {
            foreach (var langId in languageIds)
            {
                dbContext.ISUDiller.Add(new ISUDil
                {
                    IhtiyacSahibiUyeId = userId,
                    DilId = langId
                });
            }
            dbContext.SaveChanges();
        }
    }
}

小提示：优化原生多选的体验 #

原生多选下拉的默认样式有点朴素，可以加一点点CSS优化显示：

/* 让多选下拉显示更多选项，避免滚动条太窄 */
select[multiple] {
    height: 160px;
    min-width: 250px;
}

这样一套下来，就能完全脱离Select2实现多选语言的提交和保存，还不会和其他JS插件冲突啦～

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