Tôi có .csHtmltệp -razor với hàm javascript sử dụng hàm @Url.ContentC # bên trong cho URL ajax.
Tôi muốn chuyển chức năng đó sang .jstệp được tham chiếu từ chế độ xem của tôi.
Vấn đề là javascript không "biết" @ký hiệu và không phân tích cú pháp mã C #.
Có cách nào để tham chiếu .jstệp từ chế độ xem có ký hiệu "@" không?
Câu trả lời:
Bạn có thể sử dụng các data-*thuộc tính HTML5 . Giả sử rằng bạn muốn thực hiện một số hành động khi một số phần tử DOM như div được nhấp vào. Vì thế:
<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>và sau đó trong tệp javascript riêng biệt của bạn, bạn có thể làm việc một cách không phô trương với DOM:
$('#foo').click(function() {
var url = $(this).data('url');
// do something with this url
});
Bằng cách này, bạn có thể tách biệt rõ ràng giữa đánh dấu và tập lệnh mà không cần bất kỳ thẻ phía máy chủ nào trong các tệp javascript của mình.
Tôi vừa tìm thấy một công cụ dao cạo trên nuget làm được điều đó! Có nghĩa là giải quyết @cú pháp!
Nó tên là RazorJS .
Các NuGet gói
Cập nhật năm 2016:
Gói này đã không được cập nhật trong 5 năm và liên kết trang web của dự án đã chết. Tôi không khuyên mọi người sử dụng thư viện này nữa.
Một cách để giải quyết vấn đề là:
Thêm chế độ xem một phần bằng các hàm javascript vào chế độ xem.
Bằng cách này, bạn có thể sử dụng @biểu tượng và tất cả các javascriptchức năng của bạn được tách biệt khỏi dạng xem.
Bạn có hai lựa chọn:
Ví dụ:
var MyCompany =
{
MyProject: {
MyVariable:""
}
};
Và sau đó theo quan điểm của bạn, hãy đặt nó:
MyCompany.MyProject.MyVariable = @....Bạn có thể tự hỏi không có gì là tốt vì ghép nối, tốt là đúng, bạn đang ghép nối js và xem. Đó là lý do tại sao các tập lệnh phải không biết vị trí mà chúng đang chạy, vì vậy đó là một triệu chứng của việc tổ chức các tệp không tối ưu.
Dù sao cũng có tùy chọn thứ ba để tạo công cụ xem và chạy các tệp js trên dao cạo và gửi kết quả trở lại. Điều này là sạch hơn nhưng chậm hơn nhiều nên cũng không được khuyến khích.
Để đưa @biến vào tệp .js của bạn, bạn sẽ phải sử dụng một biến toàn cục và đặt giá trị của biến đó từ chế độ xem mvc đang sử dụng tệp .js đó.
Tệp JavaScript:
var myValue;
function myFunc() {
alert(myValue);
}
MVC Xem tệp:
<script language="text/javascript">
myValue = @myValueFromModel;
</script>
Chỉ cần đảm bảo rằng mọi lệnh gọi đến hàm của bạn xảy ra SAU KHI giá trị đã được đặt bởi dạng xem.
Có lẽ đây không phải là cách tiếp cận đúng. Cân nhắc tách rời các mối quan tâm. Bạn nên có một data injectortrên JavaScriptlớp của mình và trong hầu hết các trường hợp là dữ liệu JSON.
Tạo một tệp JS trong scriptthư mục của bạn và thêm tham chiếu này vàoView
<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>Bây giờ, hãy xem xét một JavaScriptlớp chữ trong yourJsFile.js:
var contentSetter = {
allData: {},
loadData: function (data) {
contentSetter.allData = eval('(' + data + ')');
},
setContentA: function () {
$("#contentA").html(allData.contentAData);
},
setContentB: function () {
$("#contentB").html(allData.contentAData);
}
};
Cũng khai báo một lớp
public class ContentData
{
public string ContentDataA { get; set }
public string ContentDataB { get; set }
}
Bây giờ, từ bạn Actionlàm điều này:
public ActionResult Index() {
var contentData = new ContentData();
contentData.ContentDataA = "Hello";
contentData.ContentDataB = "World";
ViewData.Add("contentData", contentData);
}
Và theo quan điểm của bạn:
<div id="contentA"></div>
<div id="contentB"></div>
<script type="text/javascript">
contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
contentSetter.setContentA();
contentSetter.setContentB();
</script>
Gần đây tôi đã viết blog về chủ đề này: Tạo tệp JavaScript bên ngoài bằng chế độ xem dao cạo một phần .
Giải pháp của tôi là sử dụng thuộc tính tùy chỉnh ( ExternalJavaScriptFileAttribute) hiển thị chế độ xem Razor một phần như hiện tại và sau đó trả về nó mà không có các <script>thẻ xung quanh . Điều đó làm cho nó trở thành một tệp JavaScript bên ngoài hợp lệ.
Tôi thường quấn JS cần quyền truy cập vào các thuộc tính mô hình, trong các hàm và sau đó chuyển @something trong chế độ xem. Ví dụ
<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
alert(somethingPresentInTheView);
}
</script>trong dạng xem, tôi thêm lệnh gọi hàm thông qua (chỉ là một ví dụ):
<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />Tôi nghĩ rằng bạn đang gặp khó khăn với việc phải đặt mã JS đó trong Chế độ xem. Trình phân tích cú pháp Razor, theo như tôi biết, sẽ không xem xét các tệp .js, do đó bất kỳ thứ gì bạn có mà sử dụng @sẽ không hoạt động. PLus, như bạn đã phát hiện ra, bản thân Javascript không thích @ký tự này quanh quẩn mà không có lý do gì, chẳng hạn như trong một chuỗi.