Tôi có thể thêm một lớp vào HTML.ActionLink trong MVC3 không


83

Tôi có mã này và muốn thêm một lớp vào liên kết. Có thể làm điều này trong MVC3 không?

Html.ActionLink("Create New", "Create")

lớp như trong "lớp công khai MyClass {...}" hoặc lớp như trong "<a class='form-control' href='/MyController/MyAction'> Tạo mới </a>"?
LongChalk

Câu trả lời:


150

Có, bạn chỉ có thể thêm một tham số khác với đối tượng đại diện cho lớp css:

Html.ActionLink("Create New", "Create", CONTROLLERNAME, null, new { @class= "yourCSSclass"} )

Nó có thể được dịch thành:

Html.ActionLink(link text, action name, controller name, route values object, html attributes object)

Biên tập:

Để thêm các kiểu tùy chỉnh, hãy sử dụng cái này:

Html.ActionLink(
"Create New",
"Create",
CONTROLLERNAME,
null,
new { @class= "yourCSSclass", @style= "width:100px; color: red;" }
)

Cảm ơn vì những câu trả lời tuyệt vời. Nhưng bây giờ tôi đang bối rối vì tôi thấy ba cách khác nhau để làm điều này mà tất cả đều có các thông số khác nhau. Ai đó có thể cho tôi một số ý tưởng mà có thể là tốt nhất. Cảm ơn bạn rất nhiều.
Sango

1
@Sango: Tham số đầu tiên là văn bản liên kết thực tế sẽ được hiển thị. Thông số thứ hai là tên của hành động. Thứ ba là tên của một bộ điều khiển. Thứ tư là đối tượng chứa các giá trị tuyến (tức là đối tượng mà bạn cần chuyển cho tuyến / hành động) - bạn không cần cái này trong trường hợp này, vì vậy chỉ cần đặt nó là 'null'. Và đối tượng cuối cùng là đối tượng htmlAttributes có các thuộc tính như 'class', thêm chuỗi / s được cung cấp dưới dạng lớp css vào liên kết của bạn. Bạn có thể xem thêm tại tài liệu đã đề cập . Chỉ cần lưu ý rằng câu trả lời từ Rhapsody không hoạt động vì ..
Damb

1
Không có "tốt nhất". Tất cả chúng đều là quá tải trỏ đến cùng một mã cơ bản để hiển thị thẻ achor. Việc chọn quá tải nào phụ thuộc vào những gì bạn cần trong URL.
RPM1984

1
Cảm ơn mọi người rất nhiều. Bây giờ tôi có mã đang hoạt động và nó trông rất tuyệt.
Sango

18
@Html.ActionLink("ClickMe",  // link text
                 "Index", // action name
                 "Home",  // controller 
                 new { id = 2131 }, // (optional) route values
                 new { @class = "someClass" }) // html attributes

@RPM - câu hỏi nhanh. Tôi có thể chỉ định một cái gì đó như chiều rộng để khác cho liên kết này không? Văn bản nút của tôi rộng hơn bình thường và tôi muốn có thể sửa đổi chiều rộng.
Sango

@Sango: Kiểm tra câu trả lời của tôi để xem cách thêm kiểu tùy chỉnh vào liên kết của bạn.
Damb

Tôi đã thử điều đó nhưng nó không hoạt động. Nó chỉ xác định một tham số được gọi là chiều rộng với giá trị 100px trong tuyến địa chỉ :-(
Sango

@Sango: Có vẻ như câu trả lời của tôi là không thể nhìn thấy đối với bạn. Đừng bận tâm. Rất nhiều vì đã cố gắng giúp giải đáp ngay từ đầu :)
Damb

btw sử dụng @stylelà thực hành xấu. IMO nó cũng tệ như sử dụng <div style="color:red;">. Sử dụng một lớp CSS.
RPM1984,

7
Html.ActionLink("Create New", "Create", null, htmlAttributes: new { @class = "className" })

5

Theo tài liệu , điều này sẽ thực hiện thủ thuật:

Html.ActionLink("LinkText", "Action", "Controller", new { }, new {@class="css class"})

Chỉnh sửa: Cảm ơn bạn đã chú ý đến Dampe, tôi đã cập nhật mẫu mã.


3
-1, điều này không hoạt động . Bạn đã chuyển đổi thứ tự của tham số tên bộ điều khiển và tham số tên hành động. Bạn có thể thấy thứ tự chính xác trong câu trả lời của tôi.
Damb

4

Bạn có thể sử dụng quá tải ActionLink lấy tham số htmlAttributes để thêm một lớp vào phần tử được tạo:

Html.ActionLink("Create New", "Create", new {}, new { @class = cssClass });
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.