如何在动态创建的 MVC 中获取下拉值

Question

您好，我创建了在单击按钮时添加多个下拉菜单的逻辑。下面是我的查看代码

<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" />
        <br />
        <br />
        <div id="DropdownContainer">
            <!--Textboxes will be added here -->
        </div>
        <br />
        <input type="submit" value="Submit" />
    }
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function GetDynamicTextBox(value) {
            var div = $("<div />");
            var textBox = '<div class="col-xs-2"><select  name="From" class="form-control">';
            textBox = textBox + '<option value="">From</option>';
            textBox = textBox + '<option value="1 AM">1 AM</option>';
            textBox = textBox + '<option value="1.30 AM">1.30 AM</option>';
            textBox = textBox + '<option value="2 AM">2 AM</option>';
            textBox = textBox + '<option value="2.30 AM">2.30 AM</option>';

            textBox = textBox + '</select></div>';

            textBox = textBox + '<div class="col-xs-2"><select  name="To" class="form-control">';
            textBox = textBox + '<option value="">To</option>';
            textBox = textBox + '<option value="1 AM">1 AM</option>';
            textBox = textBox + '<option value="1.30 AM">1.30 AM</option>';
            textBox = textBox + '<option value="2 AM">2 AM</option>';
            textBox = textBox + '<option value="2.30 AM">2.30 AM</option>';                
            textBox = textBox + '</select>  </div>';

            //textBox.val(value);
            div.append(textBox);

            var button = $("<input />").attr("type", "button").attr("value", "Remove");
            button.attr("onclick", "RemoveTextBox(this)");
            div.append(button);

            return div;
        }
        function AddTextBox() {
            var div = GetDynamicTextBox("");
            $("#DropdownContainer").append(div);
        }

        function RemoveTextBox(button) {
            $(button).parent().remove();
        }

        $(function () {
            var values = eval('@Html.Raw(ViewBag.Values)');
            if (values != null) {
                $("#DropdownContainer").html("");
                $(values).each(function () {
                    $("#DropdownContainer").append(GetDynamicTextBox(this));
                });
            }
        });
    </script>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message")
            });
        </script>
    }
</body>

我的控制器端接到电话是

[HttpPost]
        public ActionResult Index(string[] DynamicTextBox)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            ViewBag.Values = serializer.Serialize(DynamicTextBox);

            string message = "";
            foreach (string textboxValue in DynamicTextBox)
            {
                message += textboxValue + "\n";
            }
            ViewBag.Message = message;

            return View();
        }

但是当我点击提交时，我无法获得我选择的两个下拉值。

请查看下图

我需要获取所有选定的多个下拉值的值，以及如何放置 下拉 id 的验证未选择任何内容。

点击提交我需要在数据库中保存下拉列表的选定值。

验证码为

 function validate() {
            var values = [];
            $('#DropdownContainer option').each(function () {
                var e = $(this);
                console.log(e);               
                return false;
            });
            return false;
     }

如何获取选定的值？

Answer 1

问题不在于这些下拉框的创建。您的控制器中的模型绑定不正确。这些名称为 From 和 To 的多个下拉框。例如，您的操作应如下所示：

[HttpPost]
public ActionResult Index(string[] from, string[] to)
{
   // your code            
}

更新：在客户端添加验证码

    function validateByInputName(name) {
        var isValidate = true;
        $("select[name='" + name+"']").each(function (index, item) {
            var selectedValue = $(item).val();
            if (selectedValue == "") {
                isValidate = false;
                return;
            }
        });

        return isValidate;
    }

    function validate() {
        return validateByInputName('From') && validateByInputName('To');
    }

我想你现在应该明白了。

如何在动态创建的 MVC 中获取下拉值

How can I get dropdown Value in MVC created dynamically

c#

asp.net-mvc

asp.net-mvc-3

asp.net-mvc-4