是否可以在部分視圖中放入JavaScript

Question

我正在開發Web應用程序，其中主頁面包含兩部分：始終可見的常量塊和由3個部分視圖中的一個構成的信息塊。每個局部視圖都是AJAX請求的結果，並且只加載一次（在jQuery提供切換窗口之後）。它運行良好，但我遇到了一個問題。

部分視圖的html代碼包含常量塊和信息塊中使用的js函數。當頁面被加載時，這些函數可以「看到」對方，它的工作原理，但resharper無法找到函數聲明，並警告我這一點。由於可以在代碼中找到剃刀語法，我無法通過將它們轉移到外部js文件來解決問題。

我該怎麼辦？

謝謝。

更新：

最後我決定從解決意見分開我的js代碼的問題。所以，新的問題是如何將剃刀語法包含到js文件中或者可接受的替代方法是什麼。我發現的流行解決方案是使用全局變量，數據屬性和我更喜歡的一個 - John Katsiotis的RazorJS庫。

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

我希望它會工作穩定做出ReSharper的快樂。

乾杯！

更新：

3年後我回憶起了這個問題，並決定根據我的經驗來更新它。事實上，現在我寧願不建議使用額外的庫。特別是如果你不是項目團隊中唯一的成員......如果你在所有的庫中都能得到保證，這會更好，它們受創建者和社區的支持，並且可以很容易地集成到你的IDE中（例如，如果使用特殊的語法） 。同樣，來自團隊的所有人都應該知道它是如何工作的。所以現在我建議做下一件事情：

1. 把所有的JS保存在單獨的文件中。儘可能地隔離它。 爲其提供外部API。
2. 從視圖中調用API函數。
3. 將所有Razor生成的URL，短信，常量作爲資源參數傳遞。

例如：

js文件：

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

查看：

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

Answer 1

如果ReSharper的警告您這不是什麼大不了的^ _^

但如果我是你，我不會把JavaScript放入部分視圖在所有。

由於部分視圖可能會多次插入到一頁中，因此您會在JavaScript中遇到問題。

對於您的情況，如果您無法將JavaScript分離爲JS文件，那麼只需即可創建另一個PartialView，並將這些腳本放入其中並將其呈現在主頁面中。

Answer 2

我同意瓦希德，你不應該把JavaScript放在所有部分或其他地方的視圖中。我見過足夠的代碼，知道它只會導致不好的結果。

我也會說你應該能夠將Razor語法封裝的邏輯轉換成JavaScript，你只需要將你的邏輯所需的信息傳遞給你的JavaScript。

我只是從下次評論的經驗中猜測出來的，但是您應該像設計C＃或VB.NET代碼的結構一樣設計JavaScript。這樣，你使用Razor的邏輯應該是你的JavaScript的一部分。

這樣你的JavaScript會更容易維護，我認爲Resharper也應該更快樂。

Answer 3

我這樣做，發現它非常方便。它可以很好地動態加載部分JavaScript代碼片段的可用性ViewBag，HttpContext等。

它導致感覺像使用T4模板。

如果您添加像這樣的幻影腳本標籤，您甚至可以獲得JavaScript驗證，智能感知等。

@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

如果你想寫一個封裝「小工具」，只是工作，一旦你將它們包含在一個頁面，然後嵌入局部視圖內的腳本塊局部視圖是一個乾淨的方式來包裝標記和初始化腳本在局部視圖中一起使用。例如，我可能會在我的網站中使用名爲「_EventList」的部分視圖。如果我在我的母版頁上放置兩個地方，它應該只是工作，我不想在我的母版頁中編寫邏輯來初始化小部件。

如果你永遠不會在頁面中多次使用它，它很簡單。但是，如果你可能，然後包裝腳本，使其不會執行兩次。見下文。爲了堆棧溢出片段，我通過在代碼片段中重複部分視圖兩次來模擬它，以表示在母版頁中包含兩次局部視圖。

我的母版頁可能看起來像：

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

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

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

例子：

<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 -->