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

【问题标题】：How can I get dropdown Value in MVC created dynamically如何在动态创建的 MVC 中获取下拉值
【发布时间】：2018-04-07 19:53:38
【问题描述】：

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

<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;
     }

如何获得选定的值？

【问题讨论】：

标签： c# asp.net-mvc asp.net-mvc-4 asp.net-mvc-3

【解决方案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');
    }

我想你现在可以得到想法了。

【讨论】：

有没有办法在没有选择的情况下验证多个下拉菜单
我更新了代码。你可以获得多个价值。
不，我已经明白了，我要求验证多个下拉菜单
验证是什么意思？如果没有选中，则为空字符串
不，我想从客户端限制空字符串