在 mvc 2 中使用级联下拉列表和文本框答案

【问题标题】：Working with cascading dropdownlist and textbox in mvc 2在 mvc 2 中使用级联下拉列表和文本框
【发布时间】：2011-06-29 10:03:54
【问题描述】：

我正在尝试使用 dropdownlist 隐藏和取消隐藏文本框，因此例如，当从下拉列表中选择 0 时，视图上不应出现任何文本框，但如果从 dropdownlist 中选择 1，则对于所选值应该出现类似的文本框2，它应该显示两个框，然后我想在控制器动作中将选定的值和文本框文本传递给 http[post] 以进行一些计算。我可以在 webforms 中完成所有这些，但我不知道如何在 mvc 2 中实现这一点，我可以使用 Form 集合将值从视图传递到控制器，但我将如何传递下拉列表值。任何示例或建议将不胜感激。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-2 drop-down-menu

【解决方案1】：

有很多方法可以实现这一点，让我们举一个例子，使用 javascript 根据下拉列表的选定值管理输入字段。

一如既往地从视图模型开始：

public class MyViewModel
{
    public string[] Values { get; set; }
    public int SelectedItem { get; set; }
    public IEnumerable<SelectListItem> Items
    {
        get
        {
            return Enumerable.Range(0, 4).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x + " Item(s)"
            });
        }
    }
}

然后是控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            SelectedItem = 2,
            Values = new[] { "", "" }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // Here you will get the model properly initialized
        return View(model);
    }
}

最后是视图：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-1.5.1.js") %>"></script>
    <script type="text/javascript">
        $(function () {
            $('#SelectedItem').change(function () {
                var count = parseInt($(this).val(), 10);
                if (count == 0) {
                    $('#values').html('');
                    return;
                }

                for (var i = 0; i < count; i++) {
                    var item = $(':text[name="Values[' + i + ']"]');
                    if (item.length < 1) {
                        $('#values').append(
                            $('<div/>').html(
                                $('<input/>', {
                                    type: 'text',
                                    'data-index': i,
                                    name: 'Values[' + i + ']',
                                    value: ''
                                })
                            )
                        );
                    }
                }

                $('#values :text').each(function (index, element) {
                    if (index >= count) {
                        $(element).parent('div').remove();
                    }
                });

            });
        });
    </script>
</head>
<body>
    <div>
        <% using (Html.BeginForm()) { %>
            <%= Html.DropDownListFor(
                x => x.SelectedItem, 
                new SelectList(Model.Items, "Value", "Text")
            ) %>

            <div id="values">
                <% for (int i = 0; i < Model.Values.Length; i++) { %>
                    <div>
                        <%= Html.EditorFor(x => x.Values[i]) %>
                    </div>
                <% } %>
            </div>

            <input type="submit" value="OK" />
        <% } %>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

您需要在下拉菜单的点击事件上编写一些 javascript 并传递结果数组，您可以从 here 获得一些初步想法

【讨论】：