使用 selectize multiselect 将值传递给数据库

Question

我有一个带有 multiselect selectize "Department" 下拉菜单的 "Add Employee" 模式。单击按钮时，ajax 调用将运行调用相应的控制器并将值传递给数据库。除了 "Department" 下拉菜单，我可以传递所有内容。

我试过：

$.ajax({
...
data: { ..., Department: $("#cmbAddDepartment").val(), .... }
})


$.ajax({
...
data: { ...., Department: $("#cmbAddDepartment").getValue(), ... }
})

和

var selectize = $('#cmbAddDepartment').get(0).selectize;
var cmbAddDepartment=selectize.getValue();
$.ajax({
...
data: { ... , Department: cmbAddDepartment, ... }
})

有趣的是，所有这些都在 alert() 中工作，而不是在 ajax 数据中工作。

我正在使用： Bootstrap 4 阿尔法 6， JQuery 3.2.1, 独立选择 0.12.4

编辑： 仅供参考，我所有其他的组合框都是单一的-select（仍然 selectize），并且 $("#cmbAddSomething").val()` 对它们有效。

编辑 2： 这是控制器和（视图）模型

视图模型 - vmEmpCreate.cs

public class vmEmpCreate
{
    public vmEmpCreate()
    {
        //constructor
    }

    //combo
    public string Company { get; set; }
    public string Site { get; set; }
    public string[] Department { get; set; } //can be multiple
    public string ProductionLine { get; set; }
    public IEnumerable<SelectListItem> AddCompany { get; set; }
    public IEnumerable<SelectListItem> AddSite { get; set; }
    public IEnumerable<SelectListItem> AddDepartment { get; set; }
    public IEnumerable<SelectListItem> AddProductionLine { get; set; }

}

public class MyListSelectForAdd
{
    public string Key { get; set; }
    public string Display { get; set; }
}

控制器 - Controller.cs

[HttpPost]
    public ActionResult AddEmployee(vmEmpCreate vmc)
    {
        if (ModelState.IsValid)
        {
            modEmployee addemp = new modEmployee();

            addemp.Company = vmc.Company;
            addemp.Site = vmc.Site;
            addemp.Department = vmc.Department;
            ...
            addemp.Remarks = vmc.Remarks;

            conn = new SqlConnection(someConnectionString);
            conn.Open();
            comm = new SqlCommand("insert into someTable (company, site, department, ..., remarks) values ('"
                + addemp.Company + "' , '"
                + addemp.Site + "' , '"
                + addemp.Department + "' , '"
                ...
                + addemp.Remarks + "')", conn);
            comm.ExecuteNonQuery();
            conn.Close();
        }

        return PartialView();
    }

编辑 3： 根据建议，我用 chrome 检查员检查了我的程序以查看任何错误，但是 none 出现了。

Answer 1

我对 selectize 不是很熟悉，但是为了发送一组信息，您需要将其存储在一个对象（也称为关联数组）中：

var selectize = $('#cmbAddDepartment').get(0).selectize;
var cmbAddDepartment=selectize.getValue();

$.ajax({
    ...
    data: {
        ... , 
        Department: cmbAddDepartment, 
        ...
    }
});

您可以根据需要向其中传递尽可能多的数据。因此，如果您的所有方法都有效，请使用最适合您的方法，确保数据包含在括号中。

更多关于JavaScript Objects

Answer 2

我能够通过将多选下拉列表中选定的值存储到 HiddenFor，然后将该值传递给 "Department" 属性 ajax 中的我来创建解决此问题的解决方法称呼。我还将我的视图模型 "Department" 属性从数组更改为字符串。

（视图）型号：

public string Department;

查看：

@Html.HiddenFor(m => m.Department, new { @id = "hdnDepartment" })

$('#btnAddEmployee').click(function (e) {
    e.preventDefault();
    var selectize = $('#cmbAddDepartment').get(0).selectize;
    var cmbAddDepartment = selectize.getValue();
    $("#hdnDepartment").val(cmbAddDepartment);
    $.ajax({
        ..
        data: { ..., Department: $("#hdnDepartment").val(), ... }, // optional data
        ...
    });
});

非常便宜的解决方案，但它完成了工作。感谢大家的帮助！

使用 selectize multiselect 将值传递给数据库

Pass values to database with selectize multiselect

javascript

c#

twitter-bootstrap

selectize.js