Tôi có thể đặt JavaScript ở một phần Chế độ xem

Question

Tôi đang làm việc trên ứng dụng web nơi trang chính chứa hai phần: khối không đổi luôn hiển thị và khối thông tin được tạo thành bởi một trong 3 chế độ xem một phần. Mỗi khung nhìn một phần xuất hiện như là kết quả của yêu cầu AJAX và được tải chỉ một lần (sau khi các cửa sổ chuyển đổi đó được cung cấp bởi jquery). Nó hoạt động tốt nhưng tôi đã phải đối mặt với một vấn đề.

Mã html của một phần lượt xem chứa hàm js được sử dụng trong khối không đổi và trong khối thông tin. Khi trang được tải, các chức năng này có thể “nhìn thấy” và hoạt động nhưng chức năng chia sẻ lại không thể tìm thấy các khai báo chức năng và cảnh báo cho tôi về điều này. Tôi không thể giải quyết vấn đề bằng cách chuyển chúng thành tệp js bên ngoài vì cú pháp dao cạo có thể được tìm thấy trong mã của chúng.

Tôi có thể làm gì với điều này?

Cảm ơn.

Cập nhật:

Cuối cùng tôi đã quyết định để giải quyết vấn đề tách mã js của tôi từ quan điểm. Vì vậy, câu hỏi mới là làm thế nào để bao gồm cú pháp dao cạo vào tập tin js hoặc thay thế chấp nhận được là gì. Các giải pháp phổ biến mà tôi đã tìm thấy là sử dụng các biến toàn cầu, thuộc tính dữ liệu và thuộc tính tôi thích hơn - thư viện RazorJS của John Katsiotis.

http://djsolid.net/blog/razorjs---write-razor-inside-your-javascript-files

Tôi hy vọng nó sẽ làm việc ổn định và làm cho Resharper hạnh phúc.

Chúc mừng!

Cập nhật:

Sau 3 năm, tôi nhớ lại câu hỏi này và đã quyết định cập nhật nó theo kinh nghiệm của tôi. Trong thực tế bây giờ tôi không muốn khuyên bạn nên sử dụng thư viện bổ sung cho điều đó. Đặc biệt là nếu bạn không phải là thành viên duy nhất trong nhóm dự án… Sẽ tốt hơn nếu bạn được đảm bảo trong tất cả các thư viện của mình, chúng được hỗ trợ bởi người sáng tạo và cộng đồng và có thể dễ dàng tích hợp vào IDE của bạn (nếu sử dụng cú pháp đặc biệt) . Ngoài ra tất cả các chàng trai trong nhóm của bạn cũng nên biết nó hoạt động như thế nào. Vì vậy, bây giờ tôi sẽ đề nghị làm những việc tiếp theo:

1. Giữ tất cả JS trong các tệp riêng biệt. Cô lập nó càng nhiều càng tốt. Cung cấp API bên ngoài cho nó.
2. Gọi hàm API từ Chế độ xem của bạn.
3. Chuyển tất cả các URL được tạo bằng Razor, tin nhắn văn bản, hằng số dưới dạng tham số tài nguyên.

Ví dụ:

js file:

$.api.someInitFunction = function(resources){ ... } 

Xem:

<script> 
    $.api.someInitFunction({ 
     urls: { myAction: '@Url.Action("MyAction", "MyController")' }, 
     messages: { error: '@errorMessage' }, 
     consts: { myConst: @myIntConst } 
    }); 
</script> 

Answer 1

Nếu Resharper cảnh báo bạn nó không phải là một vấn đề lớn^_^

Nhưng nếu tôi là bạn tôi sẽ không đưa JavaScript vào chế độ xem một phần ở tất cả.

Vì chế độ xem một phần có thể được chèn vào một trang nhiều lần nên bạn sẽ gặp sự cố với JavaScripts của mình.

Và đối với trường hợp của bạn nếu bạn không thể tách tệp JavaScript thành JS thì chỉ cần tạo một PartialView khác và đặt các tập lệnh này vào nó và chỉ hiển thị nó trong trang chính của bạn.

Answer 2

Tôi đồng ý với Wahid rằng bạn không nên đặt JavaScript ở chế độ xem một phần hoặc cách khác. Tôi đã nhìn thấy đủ mã mà làm điều này để biết nó chỉ dẫn đến không tốt.

Tôi cũng sẽ nói rằng bạn sẽ có thể chuyển logic được đóng gói trong cú pháp Razor vào JavaScript, bạn chỉ cần chuyển tới JavaScript của bạn thông tin cần thiết bởi logic của bạn.

Tôi chỉ đoán từ kinh nghiệm với nhận xét tiếp theo này nhưng bạn nên thiết kế JavaScript giống như cách bạn sẽ thiết kế cấu trúc mã C# hoặc VB.NET của bạn. Bằng cách đó, logic mà bạn đang sử dụng Razor cho nên là một phần của JavaScript của bạn.

Bằng cách đó, JavaScript của bạn sẽ dễ bảo trì hơn và tôi cho rằng Resharper cũng sẽ vui hơn.

Answer 3

Tôi làm điều này và thấy nó rất thuận tiện. Nó hoạt động tốt để tự động tải các đoạn mã javascript một phần với sự sẵn có của ViewBag, HttpContext, v.v.

Nó mang lại kết quả giống như sử dụng mẫu T4.

Bạn thậm chí có thể nhận được xác thực javascript, intellisense, v.v. nếu bạn thêm các thẻ ma tập lệnh như thế này.

@using System.Configuration 
@if (false) 
{ 
    @:<script type="text/javascript"> 
}  
     $scope.clickCartItem = function(cartItem) { 
      console.log(cartItem); 
      window.location.href =@Html.Raw("('" + ConfigurationManager.AppSettings["baseUrl"] + "/Checkout/' + cartItem.ItemId)"); 
     }; 
     dataAccess.getCart(
     function (response) { 
      //... 
     }, 
     function (response) { 
      //... 
     } 
     ); 

@if (false) 
{ 
    @:</script> 
} 

Answer 4

Nếu bạn muốn viết quang cảnh một phần được đóng gói "widget" mà chỉ làm việc khi bạn bao gồm chúng trong một trang, sau đó nhúng một khối kịch bản bên trong xem một phần là một cách sạch để quấn đánh dấu và kịch bản khởi tạo cùng nhau trong một chế độ xem một phần. Ví dụ: tôi có thể có một chế độ xem một phần có tên "_EventList" mà tôi sử dụng trên toàn bộ trang web của mình. Nếu tôi đặt ở hai nơi trên trang chủ của tôi nó chỉ nên làm việc và tôi không muốn phải viết logic trong trang chủ của tôi để khởi tạo các widget.

Nếu bạn sẽ không bao giờ sử dụng nó nhiều lần trong một trang, nó đơn giản. Nhưng nếu bạn có thể, sau đó quấn kịch bản để nó không thực hiện hai lần. Xem bên dưới. Vì lợi ích của các đoạn chồng tràn ngăn xếp, tôi mô phỏng nó bằng cách lặp lại xem một phần hai lần trong đoạn mã để biểu diễn bao gồm một phần xem hai lần trong một trang chính.

trang chủ của tôi có thể trông giống như:

<div id="left-nav"> 
    @Html.Partial("_EventList")   
</div> 

<div id="body"> 
</div> 

<div id="right-nav"> 
    @Html.Partial("_EventList") 
</div> 

Ví dụ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Self-contained partial view containing widget --> 
 

 
<div id="widgetDiv" class="panel panel-default"> 
 

 
    <div class="panel-heading">Event Dates</div> 
 
    <div class="panel panel-group"> 
 
     <ul class="widget"> 
 
     <!-- These will load dynamically --> 
 
     </ul> 
 
    </div> 
 

 
    <script> 
 
     $(document).ready(function() { 
 

 
      // Run this once only in case widget is on page more than once 
 
      if(typeof $widget == 'undefined') { 
 
       $widget = $("ul.widget"); // could be more than one 
 
       // mock data to simulate an ajax call 
 
       var data = [ 
 
        {Description: "March", StartDate: "03/01/2015"}, 
 
        {Description: "April", StartDate: "04/01/2015"}, 
 
        {Description: "May", StartDate: "05/01/2015"} 
 
       ]; 
 

 
       $.each($widget, function(w, widget) { 
 
        // might be an $.ajax call 
 
        $.each(data, function(i, row) { 
 
         $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>"); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    </script> 
 
</div> 
 
<!-- End of widget/partial view --> 
 

 

 

 
<!-- Second copy of above for sake of example snippet --> 
 
<!-- No need to read further --> 
 

 

 

 

 

 

 

 

 

 
<!-- Self-contained partial view containing widget --> 
 

 
<div id="widgetDiv" class="panel panel-default"> 
 

 
    <div class="panel-heading">Event Dates</div> 
 
    <div class="panel panel-group"> 
 
     <ul class="tinylist nav nav-sidebar widget"> 
 
     <!-- These will load dynamically --> 
 
     </ul> 
 
    </div> 
 

 
    <script> 
 
     $(document).ready(function() { 
 

 
      // Run this once only in case widget is on page more than once 
 
      if(typeof $widget == 'undefined') { 
 
       $widget = $("ul.widget"); // could be more than one 
 
       // mock data to simulate an ajax call 
 
       var data = [ 
 
        {Description: "March", StartDate: "03/01/2015"}, 
 
        {Description: "April", StartDate: "04/01/2015"}, 
 
        {Description: "May", StartDate: "05/01/2015"} 
 
       ]; 
 

 
       $.each($widget, function(w, widget) { 
 
        // might be an $.ajax call 
 
        $.each(data, function(i, row) { 
 
         $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>"); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    </script> 
 
</div> 
 
<!-- End of widget/partial view -->