Cách thêm lớp css thứ hai với giá trị có điều kiện trong dao cạo MVC 4

149

Mặc dù Microsoft đã tạo ra một số kết xuất tự động các thuộc tính html trong dao cạo MVC4, nhưng tôi đã mất khá nhiều thời gian để tìm hiểu cách hiển thị lớp css thứ hai trên một phần tử, dựa trên biểu thức dao cạo có điều kiện. Tôi muốn chia sẻ nó với bạn.

Dựa trên một thuộc tính mô hình @ Model.Details, tôi muốn hiển thị hoặc ẩn một mục danh sách. Nếu có chi tiết, một div nên được hiển thị, nếu không, nó sẽ bị ẩn. Sử dụng jQuery, tất cả những gì tôi cần làm là thêm một lớp hiển thị hoặc ẩn tương ứng. Đối với các mục đích khác, tôi cũng muốn thêm một lớp khác, "chi tiết". Vì vậy, đánh dấu của tôi nên là:

<div class="details show">[Details]</div> hoặc là <div class="details hide">[Details]</div>

Dưới đây, tôi hiển thị một số lần thử thất bại (kết quả đánh dấu giả định không có chi tiết).

Này: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,

sẽ kết xuất cái này : <div class="details" hide="">.

Điều này : <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.

sẽ kết xuất cái này : <div class=""details" hide"="">.

Điều này: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

sẽ kết xuất cái này : <div class="'details" hide'="">.

Không ai trong số này là đánh dấu chính xác.

razor asp.net-mvc-4 html

— R. Schreurs
nguồn

Tất cả các giải pháp đầu tiên của bạn sẽ hoạt động nếu bạn gói chúng trong một phiên bản mới của MvcHtmlString hoặc đã sử dụng Html.Raw

— Kyle

301

Tôi tin rằng vẫn có thể và logic hợp lệ về quan điểm. Nhưng đối với loại điều này tôi đồng ý với @BigMike, nó tốt hơn nên được đặt trên mô hình. Đã nói rằng vấn đề có thể được giải quyết theo ba cách:

Câu trả lời của bạn (giả sử điều này hoạt động, tôi đã không thử điều này):

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

Sự lựa chọn thứ hai:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

Lựa chọn thứ ba:

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

— von v.
nguồn

2

Tôi đã chấp nhận đây là câu trả lời, vì nó cung cấp nhiều tùy chọn hơn của tôi.

— R. Schreurs

18

Tùy chọn thứ 2 gây ra lỗiThe "div" element was not closed

— intrepidis

6

Tất nhiên nó sẽ như những gì được viết ở đây không phải là mã hoàn chỉnh mà là một phần của mã đang được đề cập. Ai biết được có bao nhiêu yếu tố khác trong div;)

— von v.

Không làm việc cho tôi. Tôi đã gặp lỗi này

'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)

— Martin Erlic

Làm thế nào là vấn đề của bạn liên quan đến câu hỏi được đăng?

— von v.

69

Điều này:

    <div class="details @(Model.Details.Count > 0 ? "show" : "hide")">

sẽ kết xuất cái này:

    <div class="details hide">

và là đánh dấu tôi muốn.

— R. Schreurs
nguồn

1

Tôi không thích có logic trong các khung nhìn, ngay cả khi đó là logic tầm thường, tôi thích sử dụng đối tượng ModelView với phương thức getDetailClass ().

— BigMike

29

Cá nhân tôi thích logic tầm thường, có phương thức getDetailCssClass có nghĩa là Mô hình của bạn nhận thức được Chế độ xem của bạn, phá vỡ sự trừu tượng hóa đó. Tôi sẽ thêm một phương thức HasDetails vào Mô hình để giảm logic cần thiết trong chế độ xem, sau đó để logic lớp css cho chế độ xem, điều đó có nghĩa là bạn không phải vứt bỏ chế độ xem @Model.Details.Count > 0. ví dụ<div class="details @(@Model.HasDetails ? "show" : "hide")">

— Chris Diver

26

Bạn có thể thêm thuộc tính vào mô hình của mình như sau:

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

và sau đó, chế độ xem của bạn sẽ đơn giản hơn và hoàn toàn không chứa logic:

    <div class="details @Model.DetailsClass"/>

Điều này sẽ hoạt động ngay cả với nhiều lớp và sẽ không kết xuất lớp nếu nó là null:

    <div class="@Model.Class1 @Model.Class2"/>

với 2 thuộc tính không null sẽ hiển thị:

    <div class="class1 class2"/>

nếu class1 là null

    <div class=" class2"/>

— đồng bộ hóa
nguồn

11

Tôi nghĩ tốt hơn là để cho khung nhìn xác định những thứ như các lớp css. Hãy nhớ rằng chế độ xem phải có thể được sửa đổi một cách rõ ràng (hoặc thậm chí thay thế) mà không ảnh hưởng đến Mô hình Chế độ xem

— tobiak777

1

Mặc dù tôi đồng ý với reddy nói chung, có thể có những trường hợp có thể biện minh cho việc làm theo cách được đồng bộ hóa. Tôi đã làm nó chính xác như thế. Trong trường hợp của tôi, tôi đang dựa vào một đối tượng ViewModel có đầy đủ thông tin để hiển thị chế độ xem, nó không chỉ là một đối tượng dữ liệu.

— Gonzalo Méndez

1

Tôi sẽ sử dụng nó như thế này nếu có nhiều hơn 2 kết quả. Ví dụ cho 5 lớp có thể. Hơn nó sẽ lộn xộn để giữ nó trong tầm nhìn.

— Mateusz Migała

1

Quan điểm là đúng nơi. Định dạng độc đáo dưới dạng các phép gán biến trong một khối mã và nó sẽ không bị lộn xộn.

— Tom Blodget

3

Bạn có thể sử dụng hàm String.Format để thêm lớp thứ hai dựa trên điều kiện:

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">

— Chetan Gaonkar
nguồn