如何将多选框中动态创建的选项传递给 MVC 控制器

Question

请帮忙。我正在使用 MVC、剃须刀 3、jquery。 当下拉选择更改时，我会动态创建一个多选框。我将多项选择绑定到模型中的列表。它可以工作，除了它传递给我选定索引的列表，而不是选定文本的列表。我想要选定的文本，而不是列表的索引。我将值设置为文本，但我没有运气。

如果我手动创建列表，一切正常。如何将选定选项列表传递回控制器？

我的视图中有这个 div：

    <div class="row-fluid" id="divAvailableAssemblies"  hidden ="hidden">
    <label class="span4">Available Assemblies:</label>
    <select multiple="multiple" class="span8 ui-corner-all" id="Request_SelectingAssemblies" name="Request.SelectingAssemblies">
        @*<option value="test">test</option>
        <option value="test2">test2</option>*@

    </select>

</div>

这里是我的 jquery：

<script type="text/javascript">
$(function () {
    $('#ddPartsToCreate').live('change',function () {
        var selectedPart = this.value;
        if (selectedPart < 6 || $("#txtOrderNumber").val()=="")
        {
            $("#divAvailableAssemblies").attr("hidden", "hidden");
            return;
        }

        $("#divAvailableAssemblies").removeAttr("hidden");

        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetSelectingAssembliesFromOrder", "Home")',
            data: JSON.stringify({ orderNumber: $("#txtOrderNumber").val() }),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            cache: false,
            async: false,
            success: function (response) {
                var returnedData = JSON.parse(response);

                var selectingAssemblies = $("#Request_SelectingAssemblies");

                selectingAssemblies.empty();

                for (var assembly in returnedData)
                {
                    //selectingAssemblies.append($('<option >', { value: assembly }).text(returnedData[assembly].Text)).hide().show();
                    //selectingAssemblies.append($('<option value=' + assembly + '>' + returnedData[assembly].Text + '</option>'));
                    //selectingAssemblies.append($('<option >', { value: assembly, text: returnedData[assembly].Text }));
                    //selectingAssemblies.append($('<option></option>').val(assembly).html(returnedData[assembly].Text));
                    //$("#Request_SelectingAssemblies").append($('<option>', { value: assembly }).text(returnedData[assembly].Text));

                    //$("#Request_SelectingAssemblies").append($('<option>', { value: assembly }).text(returnedData[assembly].Text));
                    //$('<option />', { value: assembly, text: returnedData[assembly].Text }).appendTo(selectingAssemblies);
                    selectingAssemblies.append($('<option></option>').val(assembly).html(returnedData[assembly].Text));


                }

            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });

});

在后端，我生成 JSON：

            foreach (var assembly in pr.ShipParts)
        {
            sb.Append(String.Format(",{{\"Text\":\"{0}\", \"Value\":\"{1}\"}}", assembly.Mark.ToString(), assembly.Mark.ToString()));
            availableAssemblies.Add(assembly.Mark.ToString());

        }

我在我的模型中将多重选择（Request_SelectingAssemblies）与这个属性绑定：

      public List<String> SelectingAssemblies
  {
      get
      {

          return _SelectingAssemblies;
      }
      set
      {
          _SelectingAssemblies = value;
      }
  }
  private List<String> _SelectingAssemblies = new List<string>();

当我在控制器中执行操作时，SelectingAssemblies 具有索引而不是实际文本。但是我将每个选项的值设置为文本。如果我手动设置选项，它们将显示在源页面中并返回文本。但由于我动态创建选项，它们不会显示在源页面中。我不知道如何让 MVC 理解动态数据。 图中动态创建了CX001、RBX001、RBX002的列表。如果我在 IE 中按 F12，我会看到它们在 DOM 中正确创建。如果我选择 CX001 和 RBX002，SelectionAssembies 将有 0 和 2。

谢谢

Answer 1

感谢@StephenMuecke，这是最新且有效的代码：

<script type="text/javascript">
$(function () {
        $('#ddPartsToCreate').live('change',function () {
        var selectedPart = this.value;
        if (selectedPart < 6 || $("#txtOrderNumber").val()=="")
        {
            $("#divAvailableAssemblies").attr("hidden", "hidden");
            return;
        }

        $("#divAvailableAssemblies").removeAttr("hidden");

        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetSelectingAssembliesFromOrder", "Home")',
            data: JSON.stringify({ orderNumber: $("#txtOrderNumber").val() }),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            cache: false,
            async: false,
            success: function (response) {
                var returnedData = JSON.parse(response);
                var selectingAssemblies = $("#Request_SelectingAssemblies");
                $.each(returnedData, function (index, item) {
                    selectingAssemblies.append($('<option></option>').val(item.Value).html(item.Text));
                });

            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });


});

    public ActionResult GetSelectingAssembliesFromOrder(String orderNumber)
    {
        return Json(model.GetSelectingAssembliesFromOrder(orderNumber), JsonRequestBehavior.AllowGet);
    }



    public String GetSelectingAssembliesFromOrder(String orderNumber)
    {
       //...
        StringBuilder sb = new StringBuilder();
        sb.Append("[");
        foreach (var assembly in pr.ShipParts)
        {
            string assemblyName = assembly.Mark.Trim();
            sb.Append(String.Format(",{{\"Text\":\"{0}\", \"Value\":\"{1}\"}}", assemblyName, assemblyName));//JSON to build the list
            //...
        }

        sb.Append("]");
        sb.Remove(1, 1);//remove extra comma
        _db.SaveChanges();
        return sb.ToString();
    }