@ Html.DropDownList width

Question

Hỏi: Cách đặt chiều rộng cho @ Html.DropDownList (và không phải trong css)?

@Html.DropDownList("ListId", String.Empty, new {style="width: 250px;"}) @* no go!*@ 

Answer 1

Đối số thứ hai của trợ giúp DropDownList phải là IEnumerable<SelectListItem>. Bạn đang đi qua một chuỗi (một cái trống để chính xác hơn). Vì vậy, để sử dụng helper này, bạn sẽ phải tôn trọng chữ ký của nó:

@Html.DropDownList(
    "ListId", 
    Enumerable.Empty<SelectListItem>(), 
    new { style = "width: 250px;" } 
) 

Rõ ràng tạo ra một danh sách thả xuống rỗng là ít sử dụng. Bạn có thể có một mô hình view (bạn nên bằng cách này) mà bạn muốn sử dụng để liên kết với:

@Html.DropDownList(
    "ListId", 
    Model.MyList, 
    new { style = "width: 250px;" } 
) 

và dĩ nhiên là bởi vì bạn có một mô hình xem bạn nên thích sử dụng DropDownListFor helper:

@Html.DropDownListFor(
    x => x.ListId, 
    Model.MyList, 
    new { style = "width: 250px;" } 
) 

và cuối cùng để tránh làm lộn xộn HTML của bạn với phong cách bạn nên sử dụng một CSS bên ngoài:

@Html.DropDownListFor(
    x => x.ListId, 
    Model.MyList, 
    new { @class = "mycombo" } 
) 

nơi trong CSS bên ngoài của bạn, bạn sẽ xác định .mycombo quy tắc:

.mycombo { 
    width: 250px; 
} 

Bây giờ bạn có những gì tôi coi là mã thích hợp.

Answer 2

@Html.DropDownListFor(model => model.Test, 
new SelectList(new List<YourNamespace.Modelname>(), "Id", "Name"), 
null, new { @id = "ddlTest", @style="width: 250px;" }) 

Answer 3

Có kỹ thuật jquery cho phép bạn đặt chiều rộng mà không cần phải xử lý kiến ​​trúc @ Html.DropDownList.

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("#ListId").width(300); 
    }); 
</script> 

Answer 4

Bạn nên sử dụng phương pháp Xem mô hình. Tuy nhiên, cách lười biếng là chỉ để cung cấp cho tham số thứ 2 là null.

@Html.DropDownList("ListId", null, new {style="width: 250px;"})