Tách JavaScript trong chế độ xem dao cạo cshtml

Question

Tôi mới sử dụng ASP.NET/MVC3 và tôi đang cố gắng tìm cách tách JavaScript của tôi (chứa C#) khỏi phần còn lại của HTML.

Nếu tôi đặt chúng vào tệp .JS và chèn chúng với thẻ tập lệnh thì khía cạnh C# của chúng sẽ ngừng hoạt động. Cách tốt nhất để tách mã JavaScript của bạn cũng chứa mã C# trong dao cạo MVC 3 là gì?

Cảm ơn.

Answer 1

Nếu bất kỳ điều gì ngừng hoạt động khi tham chiếu đến tệp js bên ngoài, có thể bạn đang làm điều gì đó sai. Cung cấp cho chúng tôi một số mã ví dụ về cách bạn tham chiếu tệp bên ngoài. Một cách khác là chỉ cần đặt mã JavaScript giữa các thẻ script ở đâu đó trong tệp. Nếu nó nằm trong _Layout.cshtml, bạn có thể đặt nó trong thẻ head và trong một tệp cshtml khác, đặt nó lên trên cùng giữa các thẻ script.

Answer 2

Mã Javascript phải không chứa bất kỳ mã được tạo động nào. Nếu bạn cần tải trong một số cài đặt cấu hình, bạn nên sử dụng một thẻ tập lệnh nội tuyến đơn định nghĩa các biến. Các tùy chọn khác đang tải trong tệp cấu hình json được tạo động hoặc dựa trên nội dung dom tùy thuộc vào thông tin động cụ thể mà bạn cần. (Ajax là cách phổ biến nhất tôi sẽ nói, mặc dù điều đó thực sự sẽ phụ thuộc vào tình huống của bạn). Dù bằng cách nào, ý tưởng là các tệp javascript và css là luôn là tĩnh.

Answer 3

Vì nhiều lý do, bạn nên đặt hầu hết, nếu không phải tất cả JS của bạn vào các tập tin JS riêng biệt (để bạn có thể tận dụng lợi thế của việc tái sử dụng, việc rút gọn, tối ưu hóa trình duyệt, mạng lưới phân phối nội dung, vv)

Để đọc kết quả của server-side đang dao cạo vào các tập tin JS của bạn sử dụng một trong các phương pháp sau:

1) Đặt mã dao cạo của bạn thành một biến javascript trong giao diện (mã không kiểm tra)

<script type="text/javascript"> 
    if(!MyGlobalVariables){ 
    MyGlobalVariables = {}; 
    } 
    MyGlobalVariables.IndexUrl = "@Url.Action("Index")"; 
</script> 

2) Sử dụng thuộc tính tùy chỉnh (ưu tiên tiền tố với dữ liệu như được đề xuất trong HTML 5 spec). Xem thảo luận liên quan ở đây: Can I add custom attribute to HTML tag?

<div data-index-url="@Url.Action("Index")"></div> 

Sau đó, sử dụng $ (this) .attr ("data-index-url") trong jQuery để truy cập đánh dấu dao cạo render.

3) Đặt C# vào trường nhập ẩn trên chế độ xem của bạn và đọc đầu vào bị ẩn trong tệp JS của bạn.

<input id="indexUrl" type="hidden" value="@Url.Action("Index")" /> 

Để đọc này trong jQuery, bạn sẽ sử dụng $ ("# indexUrl"). Val()

Answer 4

Như những người khác đã nói viết C# để .js bạn File lẽ isnt ý tưởng tốt nhất vì lý do khác nhau chẳng hạn như bộ nhớ đệm của các biến động. Nhưng đôi khi tất cả chúng ta phải làm những việc chúng ta không nên làm. Và nếu đó là trường hợp thì có một gói NuGet cho phép bạn viết cú pháp Razor bên trong a.js nộp của nó có sẵn ở đây http://nuget.org/packages/RazorJS

Answer 5

Thay vào đó, làm một cái gì đó như thế này trong trang điểm của bạn:

var options = { 
    parameter1 : '@(SomeC#Value)', 
    parameter2 : '@(SomeC#Value)', 
    parameter3 : '@(SomeC#Value)', 
} 

sau đó gọi một cái gì đó như:

myJavascriptObject.init(options); 

và có Javascript sử dụng thông qua trong tùy chọn để kiểm soát luồng, v.v.

Answer 6

Chúng tôi chuyển đổi các đối tượng C# thành Json với phần mở rộng trên đối tượng và JavaScriptSerializer:

public static string ToJson(this object item) 
    { 
     return new JavaScriptSerializer().Serialize(item); 
    } 

Sau đó, chúng tôi gửi đặt nó vào một biến (hoặc trong trường hợp của chúng tôi vượt qua nó để các nhà xây dựng của Controller JavaScript)