Question

我正在使用MVC5，Razor和C＃

我有一个传统的MVC下拉列表。

   @Html.DropDownListFor(model => model.Car, (SelectList)ViewBag.CarSelectList, " -- Please Select --")

我想将此转换为可编辑的下拉列表，我使用JQuery Editable Select插件完成，请参阅：JQuery Editable Select WebPage使用：

$(function () {
    $("#Car").editableSelect();
});

一切正常。但是当我输入不在SelectList中的自定义汽车时，它会被保存起来，但是当我刷新编辑页面时，下拉列表不会显示自定义汽车，即“KitCar1”。我怀疑这是因为这个“KitCar1”不在选择列表中，因此无法匹配。但是，当我重新显示页面时，如何在可编辑的拖放中显示“KitCar1”。

我唯一的想法是在一个单独的只读“div”中显示“Model.Car”，但它不是一个很好的解决方案。

赞赏的想法。

编辑1：

我确实找到了一个解决方案，我将保存的值作为新的“SelectItem”添加到“Get Action”中的“SelectList”中。然后，这会使用正确的值生成下拉列表。

Answer 1

您似乎需要某种数据持久性，这可以通过您的模型完成。每次向下拉列表添加项目时，都需要将项目添加到某种数据库中。

我建议使用AJAX将这些项添加到您的模型中。

您的控制器中应该有一个方法可以将项目发布到您的模型中：

public void AddCarsToModel (string[] cars)
{
        List<Car> carNames = new List<Car>();

        foreach (Car car in cars)
        {
            carNames.Add(
            new Car
            {
              CarName = car
            });
        }

        try
        {
            db.SaveChanges();
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
        }
}

你的jQuery中的

和AJAX会发布到你视图中的方法：

$('#Cars').editableSelect({
  onCreate: function () {

      var carsArray = [];
      //for every car added to the dop down list, append it to the array

$.ajax({
            type: "POST",
            traditional: true,
            url: "@Url.Action("AddCarsToModel", "Controller")",
            data: { cars: carsArray },
        success: function () {
            alert("Success!");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            if (debug) {
                alert(XMLHttpRequest.responseText);
                alert(textStatus);
                alert(errorThrown);
            }
        }
  }
});

Answer 2

当您键入自定义汽车时，它会在选择控件中保存。这将保持到页面重新加载。

刷新页面DropDown控件将使用来自服务器的数据重置。并且使用DropDown选项列表再次构建您的自定义可编辑DropDown。

因此，如果想要保留新添加的自定义汽车，则必须将新的自定义汽车保存到服务器。特别是你的数据库。

Ajax 是一个不错的选择。

如何使用JQuery Editable Select插件在MVC Asp.net中的可编辑选择中显示保存的自定义值？

2 个答案: