ASP.net - 单击按钮打开和关闭列表答案

【问题标题】：ASP.net - open and close a list on button clickASP.net - 单击按钮打开和关闭列表
【发布时间】：2015-11-16 09:11:52
【问题描述】：

我在 C# 方面相当先进，但在 ASP.NET 领域是新手。

我的 HomeController.cs：

public ActionResult Index()
{
    // tuple -> item1 = key string / item2 = assigned list
    var configList = new List<Tuple<string, List<string>>>();
    configList = fillItWithSomeData(..)
    ViewBag.ConfigSettings = configList;

    return View();
}

我的 Index.cshtml：

<div>
    <div class="row">
        @foreach (var elements in ViewBag.configSettings)
        {
            <div class="col-md-8 checkbox">
                /*I NEED A BUTTON HERE*/
                <label>
                    <input type="checkbox">@elements.Item1
                </label>
            </div>
            foreach (var listElement in elements.Item2)
            {
                <div class="col-md-8 col-md-offset-1 checkbox">
                    <label>
                        <input type="checkbox">@listElement
                    </label>
                </div>
            }
        }
    </div>
</div>

我列表中的每个键字符串都包含一个字符串列表。（查看 var configList）在我看来，我希望每个键字符串都有一个按钮，它应该能够打开或关闭相应键字符串的分配列表。我目前使用 ASP.NET-MVC。我该如何编程？在 C# 中还是我需要为此使用 JS？我真的不知道。提前致谢。

【问题讨论】：

如果你想响应客户端事件，你需要javascript。但它有点不清楚你想做什么。
总结：类似于下拉列表的东西...我想要一些关键字符串。每个键字符串在左侧都包含一个按钮...我的目的是在单击按钮时打开相应键字符串的整个列表，如果列表已经打开，则关闭列表。
你的意思是像this fiddle这样的东西吗？
这正是我的意思斯蒂芬！
只需一个按钮而不是一个复选框......使用静态 XML 树很容易......但在我的上例中，可以有 1 - n 个带有 1 - n 个元素的键字符串...看看“foreach{foreach{..}}”

标签： asp.net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

您可以使用 bootstrap Accordion 或 bootstrap Collapsible 面板。下面的代码使用引导可折叠面板。

<div>
<div class="row">
    @foreach (var elements in ViewBag.configSettings)
    {
        <div class="col-md-8 checkbox">
            /*I NEED A BUTTON HERE*/
            <label>
                <input type="checkbox" data-toggle="collapse" data-target="#@elements.Item1">@elements.Item1
            </label>
        </div>
        foreach (var listElement in elements.Item2)
        {
            <div class="col-md-8 col-md-offset-1 checkbox collapse" id="@elements.Item1">
                <label>
                    <input type="checkbox">@listElement
                </label>
            </div>
        }
    }
</div>

【讨论】：