在部分视图中放入JavaScript是否可行？

我正在开发Web应用程序，其中主页面包含两个部分：始终可见的常量块和由3个部分视图之一组成的信息块。 每个部分视图都是AJAX请求的结果，只加载一次（在jQuery提供切换窗口之后）。 它运作良好，但我遇到了一个问题。

部分视图的html代码包含常量块和信息块中使用的js函数。 当页面被加载时，这些函数可以“看到”对方，它的工作，但resharper无法find函数声明，并警告我这个。 我不能通过将代码转换成外部js文件来解决问题，因为在代码中可以find剃刀的语法。

我能用这个做什么？

谢谢。

更新：

最后，我决定解决从视图分离我的JS代码的问题。 所以，新的问题是如何将剃刀语法包含到js文件中，或者可以接受的select是什么。 我发现的stream行的解决scheme是使用全局variables，数据属性和我更喜欢的 – John Katsiotis的RazorJS库。

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

我希望它能够稳定工作，让Resharper高兴。

干杯!

更新：

三年后，我回忆起这个问题，并根据我的经验决定更新它。 事实上，现在我宁愿不build议使用额外的库。 特别是如果你不是项目团队中唯一的成员……如果你在所有的库中得到了保证，那么它会受到创build者和社区的支持，并且可以很容易地集成到你的IDE中（如果使用特殊的语法） 。 同样，你们团队的所有人都应该知道它是如何工作的。 所以现在我会build议做下一件事情：

1. 把所有的JS保存在不同的文件中。 尽可能地隔离它。 为其提供外部API。
2. 从视图中调用API函数。
3. 将所有Razor生成的URL，短信，常量作为资源parameter passing。

例如：

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文件，那么只需创build另一个PartialView，并将这些脚本放在它中，并将其呈现在主页面中。

Answer 2

如果要编写封装“部件”的部分视图，只要将它们包含在页面中，部分视图就可以工作，那么在部分视图中embedded脚本块就是将标记和初始化脚本一起包装在局部视图中的一种干净方式。 例如，我可能会在我的网站中使用名为“_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 --> 

Answer 3

我同意Wahid的意见，你不应该把JavaScript全部或部分地放在视图中。 我已经看到足够的代码，知道它只会导致没有好处。

我也会说，你应该能够将Razor语法封装的逻辑转换成JavaScript，你只需要把你的逻辑所需的信息传递给你的JavaScript。

我只是从下一个评论的经验中猜测，但是你应该像deviseC＃或VB.NET代码的结构一样deviseJavaScript。 这样，你使用Razor的逻辑应该是你的JavaScript的一部分。

这样你的JavaScript将更容易维护，我认为Resharper也应该更快乐。

Answer 4

我这样做，发现它非常方便。 它可以很好地dynamic加载部分JavaScript代码片段的ViewBag，HttpContext等的可用性

它导致了使用T4模板的感觉。

你甚至可以得到JavaScriptvalidation，智能感知等，如果你添加像这样的幻影脚本标签。

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