在 DropDownList 中的某些项目上添加缩进 - ASP.net MVC Razor View答案

【问题标题】：Add indentation on certain items in DropDownList - ASP.net MVC Razor View在 DropDownList 中的某些项目上添加缩进 - ASP.net MVC Razor View
【发布时间】：2017-06-13 09:53:13
【问题描述】：

我看到了一些与我的问题相似的问题，但我还不能确定我的问题 - 所以我希望有人遇到同样的问题或知道如何最好地解决这个问题。

我有一个来自数据库的 SelectedItemList 位置。它返回 Locations 列表，主要是城市，但也列出了一些国家/地区。此列表将显示为这样；

Australia
Melbourne
Perth
Sydney
Bermuda
Canada
Calgary
Toronto
Vancouver

列表中的所有项目都有一个Id和Text属性，任何属于国家的城市都有一个ParentLocation_Id属性，对应国家的Id（澳大利亚是8，所以悉尼和珀斯的“ParentLocation_Id”为 8 等）所以我知道这是我将用于定位列表中的那些项目的条件，以便缩进正确的项目。

我想使用@Html.DropDownListFor() 方法并能够定位国家以缩进它们，因此列表会像这样出现在选择列表中；

但我想知道是否有一种更简洁的方法可以通过使用 HTML 扩展来做到这一点。以前有人试过吗？

到目前为止，我已经通过这种方式管理了它，但是你可以看到它看起来很可怕:(

<select id="SelectedLocation" name="SelectedLocation">
                    @{
                        foreach (var location in Model.Locations)
                        {
                            if (location.Item.ParentLocation != null && location.Item.ParentLocation.Id != null)
                            {
                                <option value="@location.Item.Id" class="styled">&nbsp;&nbsp;&nbsp;&nbsp;@location.Item.Text</option>
                            }
                            else
                            {
                                <option value="@location.Item.Id" class="styled">@location.Item.Text</option>
                            }
                        }
                    }
                </select>

甚至可能这是实现此 UI 的唯一方法，但我很想知道是否有人想出更好的方法来处理这个问题。

谢谢！

【问题讨论】：

AFAIK，当你使用普通的 Select 时，你做对了。如果您想要更高级的渲染，可能是时候切换到自定义控件了。
您希望能够选择澳大利亚（及其城市）吗？
是的@StephenMuecke，列表中的所有项目都是可选的。
您可以编写一个扩展方法，但除非您对“缩进”下拉列表有多种用途，否则这将是一种矫枉过正的做法。您可以始终将该代码放在部分（或EditorTempate）中，但您当前的代码缺少正确的双向绑定和客户端验证所需的代码。
如果我设法确定缩进的下拉列表，我会在很多地方使用它——所以为了减少丑陋代码的数量，我几乎肯定会把它移到部分并修复绑定/验证问题。该列表也并非详尽无遗，因此为了保证该列表的可读性，我认为最好不要做我目前所做的事情！

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

【解决方案1】：

感谢大家帮助解决我的问题。

我就我的问题与我的老板进行了交谈，他建议我想要做一个扩展方法有点过于复杂了。

我已经设法从一个简单的单选按钮列表、一点 JS 和一些样式中获得了我想要的外观和效果。

我花了一点时间，但我学到了一些东西，所以我认为这是一项有价值的任务:)

有兴趣的可以看看下面的代码

       /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    $('#selectLocation').click(function () {
        document.getElementById("locationDropdown").classList.toggle("show");
        return false;
    });

    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function (event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    };
    $('input[name="SelectedLocation"]').on('change', function () {
        var idVal = $(this).attr("id");
        $("#selectLocation").text($("label[for='" + idVal + "']").text());
    });

.field {
    float: left;
    clear: left;
    margin: 1em 0;
    width: 100%;
}

field-label {
    float: left;
    margin: 0 10px 0 0;
    width: 180px;
    line-height: 140%;
    font-size: .9375em;
}
.dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 200px;
}
#selectLocation a {
    cursor: pointer;
    text-decoration: none;
}
#content a {
    text-decoration: underline;
    color: #333;
}
#selectLocation {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #fff url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png) no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border: 1px solid #ccc;
    display: block;
    padding: 10px;
    width: 100%;
}
#locationDropdown {
    border: 1px solid #799BD2;
    height: 300px;
    list-style-type: none;
    margin: 0;
    margin-top: 0;
    overflow-y: scroll;
    padding-left: 0;
}
ul#locationDropdown li:hover {
    background-color: #1E90FF;
}
#content ul {
    list-style: disc outside;
}
.dropdown-content {
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0px rgba(0, 0, 0, 0.2);
    display: none;
    min-width: 160px;
    position: absolute;
    z-index: 1;
}
.lblLocation {
    display: inline-block;
    width: 100%;
}
input[name="SelectedLocation"] {
    display: none;
}
.indent {
    padding-left: 10px;
}
.indentExtra {
    padding-left: 30px;
}
.dropdown-content.show {
    margin: 0;
    width: 110%;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="dropdown">
  <a id="selectLocation">
    <span>Select location</span>
  </a>
  <ul id="locationDropdown" class="dropdown-content">
    <li>
      <label class="lblLocation" for="8" value="Australia">
                                        <input id="8" name="SelectedLocation" type="radio" value="8">
                                        <span class="indent">Australia</span>
                                    </label>


    </li>
    <li>
      <label class="lblLocation" for="9" value="Melbourne">
                                        <input id="9" name="SelectedLocation" type="radio" value="9">
                                        <span class="indentExtra">Melbourne</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="10" value="Perth">
                                        <input id="10" name="SelectedLocation" type="radio" value="10">
                                        <span class="indentExtra">Perth</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="11" value="Sydney">
                                        <input id="11" name="SelectedLocation" type="radio" value="11">
                                        <span class="indentExtra">Sydney</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="12" value="Bermuda">
                                        <input id="12" name="SelectedLocation" type="radio" value="12">
                                        <span class="indent">Bermuda</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="13" value="Canada">
                                        <input id="13" name="SelectedLocation" type="radio" value="13">
                                        <span class="indent">Canada</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="14" value="Calgary">
                                        <input id="14" name="SelectedLocation" type="radio" value="14">
                                        <span class="indentExtra">Calgary</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="15" value="Toronto">
                                        <input id="15" name="SelectedLocation" type="radio" value="15">
                                        <span class="indentExtra">Toronto</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="16" value="Vancouver">
                                        <input id="16" name="SelectedLocation" type="radio" value="16">
                                        <span class="indentExtra">Vancouver</span>
                                    </label>
    </li>
  </ul>
</div>

再次感谢所有评论的人！

【讨论】：