MVC DropDownList外观 [英] MVC DropDownList look and feel

问题描述

因此，我正在使用MVC创建站点，并且我的DropDownLists和DropDownListFors看起来与页面上的其他输入元素不同.我尝试将其类设置为相同的"form-control"，甚至尝试在具有几乎相同属性(称为"mydropdown")的css中添加我自己的类，并使用该类-均无效.

So I'm creating a site using MVC, and my DropDownLists and DropDownListFors do not look the same as the other input elements on the page. I tried setting their class to be the same "form-control", and even tried adding my own class in the css that has pretty much the same properties called "mydropdown" and using that - neither had an effect.

所以我发现了这非常约瑟夫·伍德沃德(Joseph Woodward)回答的一个方便的线索，我刚刚尝试过....

So I found this very handy thread answered by Joseph Woodward that I just tried....

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

I'm using VB instead of C# so I had to translate it. This is my translated 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循环中的字符串串联....

The one thing I'm not sure I got right was the string concatenation in the For Each loop....

无论如何，我认为我尝试使用

In any case, in my view I tried using

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

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

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

but it gave me a code error:

引用非共享成员需要对象引用.

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

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

So I added a declaration in the code section at the top:

将newDropDown设置为BootstrapHtml =新的BootstrapHtml

Dim newDropDown As BootstrapHtml = New BootstrapHtml

现在视图中的行如下所示:

And my line in the view now looks like this:

@newDropDown = BootstrapHtml.Dropdown("typecombo"，TypeList， 下拉")

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

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

So now my site runs with no errors, however when I go to this page, instead of a dropdown list I am seeing the string, which is this:

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

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

所以，我想首先是我班上的字符串翻译正确(如上所述)吗?如果是这样，为什么我在页面上看到的是字符串而不是实际的下拉列表?

So, I guess first off is the string translation in my class correct (as mentioned above)? And if it is, why am I seeing the string on my page instead of an actual drop down?

谢谢！

推荐答案

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

Based on linked post the Dropdown method should be static. which in Vb.Net is Shared keyword ie

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

实际上，应该共享该类中的所有功能.这就是导致您提到的参考错误的原因.

Actually, all the functions in that class should be shared. That is what caused the reference error you mentioned.

然后您应该可以像示例中那样调用它.

With that you should then be able to call it like in the example.

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

这篇关于MVC DropDownList外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！