MVC DropDownList 外观和感觉

Question

所以我正在使用 MVC 创建一个站点，我的 DropDownLists 和 DropDownListFors 看起来与页面上的其他输入元素不一样。我尝试将它们的 class 设置为相同的 "form-control"，甚至尝试在 css 中添加我自己的 class，它具有几乎相同的属性 "mydropdown"并使用它 - 都没有效果。

所以我发现 this very handy thread answered by Joseph Woodward 我刚刚尝试过....

我使用的是 VB 而不是 C#，所以我不得不翻译它。这是我翻译的 BootstrapHtml:

Public Class BootstrapHtml

    Public Function Dropdown(id As String, selectListItems As List(Of SelectListItem), label As String) As MvcHtmlString

        Dim button = New TagBuilder("button")
        button.Attributes.Add("id", id)
        button.Attributes.Add("type", "button")
        button.Attributes.Add("data-toggle", "dropdown")

        button.AddCssClass("btn")
        button.AddCssClass("btn-default")
        button.AddCssClass("dropdown-toggle")

        button.SetInnerText(label)
        button.InnerHtml += " " + BuildCaret()

        Dim wrapper = New TagBuilder("div")
        wrapper.AddCssClass("dropdown")
        wrapper.InnerHtml += button.ToString
        wrapper.InnerHtml += BuildDropdown(id, selectListItems)

        Return New MvcHtmlString(wrapper.ToString)

    End Function

    Private Function BuildCaret() As String

        Dim caret = New TagBuilder("span")
        caret.AddCssClass("caret")

        Return caret.ToString

    End Function

    Private Function BuildDropdown(id As String, items As IEnumerable(Of SelectListItem)) As String

        Dim list = New TagBuilder("ul")
        list.Attributes.Add("class", "dropdown-menu")
        list.Attributes.Add("role", "menu")
        list.Attributes.Add("aria-labelledby", id)

        Dim listItem = New TagBuilder("li")
        listItem.Attributes.Add("role", "presentation")

        For Each x In items
            list.InnerHtml += "<li role=\presentation\>" & BuildListRow(x) & "</li>"
        Next

        Return list.ToString

    End Function

    Private Function BuildListRow(item As SelectListItem) As String

        Dim anchor = New TagBuilder("a")
        anchor.Attributes.Add("role", "menuitem")
        anchor.Attributes.Add("tabindex", "-1")
        anchor.Attributes.Add("href", item.Value)

        anchor.SetInnerText(item.Text)
        Return anchor.ToString

    End Function

End Class

我不确定自己是否正确的一件事是 For Each 循环中的字符串连接....

无论如何，在我看来我尝试使用

@BootstrapHtml.Dropdown("typecombo", TypeList, "Dropdown")

但是它给了我一个代码错误：

Reference to a non-shared member requires an object reference.

所以我在顶部的代码部分添加了一个声明：

Dim newDropDown As BootstrapHtml = New BootstrapHtml

我在视图中的行现在如下所示：

@newDropDown = BootstrapHtml.Dropdown("typecombo", TypeList, "Dropdown")

所以现在我的网站运行没有错误，但是当我转到此页面时，我看到的不是下拉列表，而是字符串，它是这样的：

[myproject].BootstrapHtml = BootstrapHtml.Dropdown("typecombo", TypeList, "Dropdown")

那么，我想首先我的 class 中的字符串翻译是否正确（如上所述）？如果是，为什么我在页面上看到的是字符串而不是实际的下拉菜单？

谢谢！！

Answer 1

基于链接 post，Dropdown 方法应该是静态的。在 Vb.Net 中是 Shared 关键字，即

Public Class BootstrapHtml

    Public Shared Function Dropdown(id As String, selectListItems As List(Of SelectListItem), label As String) As MvcHtmlString
        '''other code removed for brevity
    End Function

End Class

实际上，class中的所有功能都应该共享。这就是导致您提到的引用错误的原因。

这样您就可以像示例中那样调用它了。

@BootstrapHtml.Dropdown("typecombo", TypeList, "Dropdown")

MVC DropDownList 外观和感觉

MVC DropDownList look and feel

asp.net-mvc

vb.net

razor

html.dropdownlistfor