是否可以在部分视图中放入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 -->