将Bootstrap样式应用于MVC下拉列表

时间:2015-12-28 20:28:50

标签: asp.net bootstrapping

我正在尝试将样式应用于以下行

@Html.DropDownList("productOptions", "Products")

我改写了以下

@Html.DropDownList("productOptions", "Products",  new { @class = "form-control" })

在我的控制器中,我将productOptions添加到ViewData["productOptions"]产品是默认文字的可选字符串

但是我一直收到有关语法

的以下错误消息
Argument 3: cannot convert from 'string' to 'System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>'  

Cannot resolve method 'Dropdownlist(string, string, { class:string}' candidates are:

Anyhelp非常感谢。

2 个答案:

答案 0 :(得分:0)

"Products"需要是实际的对象而不是字符串。

使用示例:

public class ExampleClass //This is the model class
{
    public string SelectedProvider { get; set; }
    public ICollection<System.Web.Mvc.SelectListItem> Providers { get; set; }
}
//The above class you define it this way in your view
@model ExampleClass

//And you use it like this.
@Html.DropDownListFor(model => model.SelectedProvider, Model.Providers, new { @class = "form-control" })

//In your case you have your data in ViewData
@Html.DropDownList("Products", 
new SelectList((IEnumerable) ViewData["productOptions"], "Id", "Name"))

有关详细信息,请查看此处:Populating a dropdown from ViewData

答案 1 :(得分:0)

试试这个

Ext.create('Ext.form.Panel', {    
    width: 300,
    height: 500,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'checkboxgroup',
        fieldLabel: 'Two Columns',       
        columns: 2,
        vertical: true,       
        listeners:{
            change: function(){ 
                var data = Ext.Array.flatten(Ext.Object.getValues(this.getValue()));   
                data = data.map(function(n){ return { name: n } });
                Ext.getCmp("VMTemplate").getStore().loadData(data);
            }
        } ,       
        items: [
            { boxLabel: 'Item 1', name: 'rb-auto', inputValue: 'Item 1'},
            { boxLabel: 'Item 2', name: 'rb-auto', inputValue: 'Item 2'},
            { boxLabel: 'Item 3', name: 'rb-auto', inputValue: 'Item 3' },
            { boxLabel: 'Item 4', name: 'rb-auto', inputValue: 'Item 4' },
            { boxLabel: 'Item 5', name: 'rb-auto', inputValue: 'Item 5' },
            { boxLabel: 'Item 6', name: 'rb-auto', inputValue: 'Item 6' }
        ]
    },{
        xtype: 'combo',
        store:{
            fields: ['name'],
            data: []
        },
        displayField: 'name',
        valueField: 'name',
        emptyText: 'Template',
        id: 'VMTemplate',
        queryMode: 'local'
    }]
});