2011-10-18 30 views
11

Đây là mã Tôi hiện có:Razor Engine - Làm thế nào tôi có thể hiển thị các thẻ body khác nhau dựa trên các điều kiện khác nhau?

@{ 
    if (Request.Browser.Browser == "IE") { 
     if (Request.Browser.MajorVersion == 7) { <body class="ie7"> } 
     if (Request.Browser.MajorVersion == 8) { <body class="ie8"> } 
     if (Request.Browser.MajorVersion == 9) { <body class="ie9"> } 
     if (Request.Browser.MajorVersion > 9) { <body> } 
    } else { 
     <body> 
    } 
} 

Đây là lỗi mà nó trả về khi trình duyệt cố gắng để làm cho nó:

Parser Error Message: Khối mã thiếu một kết thúc " } " ký tự. Đảm bảo bạn có ký tự "}" phù hợp cho tất cả các ký tự "01" "" trong khối này và không có ký tự "}" nào đang được hiểu là đánh dấu.

Cái quái gì? Tôi đã có thể làm điều này trong cú pháp tiêu chuẩn ASP.NET mẫu! Dưới đây là những gì trông giống như:

<% // Adaptation of paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ 
    if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 7)) { %><body class="ie7"><% } %> 
<% if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 8)) { %><body class="ie8"><% } %> 
<% if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 9)) { %><body class="ie9"><% } %> 
<% if ((Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion > 9)) { %><body><% } %> 
<% if (Request.Browser.Browser != "IE") { %><body><% } %> 
+0

Nó cũng thực hiện điều này [HTML xác nhận tào lao] (http://joshuahayworth.com/wp-content/uploads/2011/10/razorEngineStackOverflowQuestion01.png) trong IDE, đó là gây phiền nhiễu. –

+1

Tại sao bạn không sử dụng CSS bao gồm? http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/. Chỉ cần xác định một kiểu cho "body" trong mỗi script đó. – jgauffin

+0

Kiểm tra nó ngay bây giờ! Cảm ơn các liên kết. –

Trả lời

24

Một tùy chọn tốt hơn có thể là khai báo biến số ieClass ở đầu chế độ xem của bạn và sau đó tham chiếu nó trong thẻ body của bạn.

@{ 
    string ieClass = ""; 
    if (Request.Browser.Browser == "IE") { 
     if (Request.Browser.MajorVersion == 7) { ieClass="ie7"; } 
     else if (Request.Browser.MajorVersion == 8) { ieClass="ie8"; } 
     else if (Request.Browser.MajorVersion == 9) { ieClass="ie9"; } 
    } 
} 

...

<body class="@ieClass"> 
+0

Công trình này! Tuy nhiên, trong Firefox, bây giờ tôi có đang ngồi ở đó. Tôi không chắc tôi cảm thấy vui mừng thế nào với điều đó. –

+0

Bắt đầu với ieClass là "" sau đó bắt đầu trận đấu đầu tiên với "class =" + "ie7" ví dụ như vậy nếu ieClass == "" thì ieClass = "class =" sau đó làm việc phép thuật của bạn từ đó. Nhưng có "class =" "" là ok và trình duyệt sẽ không có bất kỳ vấn đề nào. –

0

Bạn mở nhiều thẻ <body> nhưng không đóng chúng. Dao cạo là "thông minh" vì vậy nó ghi nhớ các thẻ mở và đóng trong khi phân tích cú pháp.

Bạn có thể nói với dao cạo để bỏ qua các thẻ bằng cách sử dụng

@:<body class="ieX"> 

nếu bạn thoát khỏi cuối cùng <body> bạn cũng nên thoát khỏi thẻ </body> như @:</body>. Lời khuyên của tôi là để lại một thẻ <body>.

Nhưng còn nhiều hơn thế nữa.

Định dạng của bạn về mọi thứ trên một dòng có thể cũng gây nhầm lẫn dao cạo. Vì vậy, (không kiểm tra), bạn cần một cái gì đó như:

if (Request.Browser.MajorVersion == 7) { <text>@:<body class="ie7"></text> } 

Nếu điều đó không làm việc, định dạng nó như:

if (Request.Browser.MajorVersion == 7) { 
    @:<body class="ie7"> 
} 

(Xem câu trả lời JRummel của) Và lẽ là giải pháp đơn giản nhất là:

 @{ 
     var bodyClass = string.Empty; 

     if (Request.Browser.MajorVersion == 7) { bodyClass = "ie7"; } 
     if (Request.Browser.MajorVersion == 8) { bodyClass = "ie8"; } 
     // etc 
    } 
    <body class="@bodyClass"> 
    </body> 

2

Tôi cũng muốn giới thiệu cách tiếp cận một chút bụi bằng cách đặt dao cạo/C# mã ở đầu trang của bạn và sử dụng các biến để gán giá trị logic để sử dụng trong trang của bạn. Đầu tiên, nó giải quyết vấn đề của các thẻ nhưng cũng hỗ trợ bảo trì mã.

@{ 
    string bodyCssClass = string.Empty; 
    switch(Request.Browser.Browser) 
    { 
     case "IE": 
      switch(Request.Browser.MajorVersion) 
      { 
       case 7: 
        bodyCssClass = "browser-ie7"; 
        break; 
       case 8: 
        bodyCssClass = "browser-ie8"; 
        break; 
       case 9: 
        bodyCssClass = "browser-ie9"; 
        break; 
       default: 
        bodyCssClass = "browser-ie6"; 
      } 
      break; 
    } 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <title>@Page.Title</title> 
</head> 
<body class="@bodyCssClass"> 
    <div>@RenderBody()</div> 
</body> 
</html> 

Với tất cả những gì đã nói; trừ khi nó không có sẵn cho trang này, công việc được thực hiện không được trên phần tử trình bày (tệp cshtml) mà là từ ViewBag (ví dụ: ViewBag.BodyCssClass).

[Chỉnh sửa] Tôi quên ngắt cho câu lệnh chuyển đổi ngoài cho trường hợp 'IE'. :)

+0

Điều này cũng hoạt động! Tôi đã kết thúc bằng cách sử dụng một sự kết hợp của bạn và mã của jrummell để giải quyết vấn đề của tôi. –

0

Câu trả lời của JRummel là câu trả lời đúng. Để mở rộng trên đó, tôi đã sửa đổi kịch bản của mình để cho phép tôi hỗ trợ các phiên bản cũ hơn của IE và vẫn tương thích ngược.

@{ 
Layout = null; 

string ieClass = ""; 
if (Request.Browser.Browser == "IE") 
{ 
    ieClass += " ie"; 
    if (Request.Browser.MajorVersion == 9) { ieClass += " lt-ie10"; } 
    if (Request.Browser.MajorVersion == 8) { ieClass += " lt-ie9"; } 
    if (Request.Browser.MajorVersion == 7) { ieClass = " lt-ie8"; } 
} 
} 
<!doctype html> 
<html lang="en-us" dir="ltr" class="no-js @ieClass.Trim()"> 
7
@if (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer") 
{ 

} 
+0

Tôi sẽ thêm câu trả lời này và đã thấy câu trả lời của bạn. Microsoft phải thay đổi những gì mà Request Browser trả về. –

Các vấn đề liên quan