Question

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

Answer 1

你需要在下拉列表的点击事件上写一些javascript，并且为了传递结果数组，你可以从here获得一些初步想法

Answer 2

有很多方法可以实现这一点，所以让我们举一个例子，使用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>

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

2 个答案: