razor - 在 MVC Razor 中设置 ListBox 的样式

Question

这是我在页面中使用的 ListBox 的 Razor 语法。如何设置它的高度和宽度？这里 noCategories 是来自 Controller 的视图数据。

$ @Html.ListBox("noCategories");

控制器：

    public ActionResult Configure(int? nopCategoryid)
    {
        model = new DataImporttModel();

        DisplaynopCommerceCategories(model, nopCategoryid);

        return View("Nop.Plugin.Data.Import.Views.DataImport.Configure", model);

    }


    private void DisplaynopCommerceCategories(DataImporttModel model, int? nopCategoryid)
    {
        var _categoryservice = new NopEngine().Resolve<ICategoryService>();

        MultiSelectList sl;

        model.nopCommerceCategories = new List<CS_ListItems>();

        foreach (var item in _categoryservice.GetAllCategories().ToList())
        {
            model.nopCommerceCategories.Add(new CS_ListItems() { Name = item.Name, ID = item.Id });
        }

        if (nopCategoryid != null)
        {

            sl = new MultiSelectList(model.nopCommerceCategories, "ID", "Name", new[] { nopCategoryid });
        }
        else
        {
            sl = new MultiSelectList(model.nopCommerceCategories, "ID", "Name");
        }

        ViewData["nopCommerceCategories"] = sl;

    }

public class DataImporttModel
{        
    public List<C_Category> Mappings { get; set; }

    public List<CS_ListItems> ClockCategories { get; set; }

    public List<CS_ListItems> nopCommerceCategories { get; set; }
}

Answer 1

您可以对其应用一个类，然后通过 CSS 对其进行样式设置：

@Html.ListBox("noCategories", ViewData["nopCommerceCategories"] as MultiSelectList, new {@class = "mylistbox"});

CSS

.myclass{
    width: 100px;
}

或者，您可以内联样式：

@Html.ListBox("noCategories", ViewData["nopCommerceCategories"] as MultiSelectList, new {@style = "width: 100px;"});