我的web应用程序的工作,其中主要页面包含两个部分:固定块,始终可见,并通过3个局部视图一个由该信息块。 中的每一个局部视图显示为AJAX请求的结果和被加载只一次(即切换窗口由jquery的提供之后)。 它运作良好,但我面对的一个问题。
的局部视图的HTML代码包含了在恒定块和信息块用作以及JS功能。 当加载页面时,这些功能都可以“看到”对方和它的作品,但ReSharper的找不到函数的声明和警告我这件事。 我不能将它们转移到可以在他们的代码中找到,因为剃刀语法的外部js文件解决问题。
我能有什么用呢?
谢谢。
更新:
最后我决定从解决意见分开我的js代码的问题。 因此,新的问题是如何将剃刀语法到js文件或什么是可接受的替代品。 在流行的解决方案,我发现是使用全局变量,数据属性和一个我喜欢更多 - 约翰Katsiotis RazorJS库。
http://djsolid.net/blog/razorjs---write-razor-inside-your-javascript-files
我希望它会工作稳定做出ReSharper的快乐。
干杯!
更新:
3年后我回忆起了这个问题,并决定根据我的经验来更新它。 其实现在我宁愿不建议使用额外的库。 特别是如果你是不是在项目组的唯一成员......这是,如果你在所有的库确保好得多,它们是由创作者和社区支持,并且可以很容易地集成到IDE(如果使用例如特殊的语法) 。 也都从你的球队的球员应该知道它是如何工作的。 所以,现在我建议做接下来的事情就:
- 保持在单独的文件中的所有JS。 隔离它,就像你可以。 它对外提供API。
- 从您的视图调用API函数。
- 通过所有刀片生成的URL,短信,常量,资源参数。
例如:
js文件:
$.api.someInitFunction = function(resources){ ... }
视图:
<script>
$.api.someInitFunction({
urls: { myAction: '@Url.Action("MyAction", "MyController")' },
messages: { error: '@errorMessage' },
consts: { myConst: @myIntConst }
});
</script>
如果ReSharper的警告您这不是什么大不了的^ _ ^
但如果我是你,我不会把JavaScript中的局部视图在所有 。
由于局部视图可以在一个页面中多次被插入,那么你会得到一个问题,你的JavaScript。
而对于你的情况,如果你不能在JavaScript来JS文件分开然后就创建另一个PartialView,并把这些脚本它,只是呈现在您的主页。
如果你要编写封装“小工具”,只是工作,一旦你将它们包含在一个页面,然后嵌入局部视图内的脚本块局部视图是一个干净的方式在一个局部视图来包装标记和初始化脚本一起。 例如,我可能有一个名为“_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 -->
我瓦希德同意,你不应该把在JavaScript的浏览在所有的部分或其他方式。 我已经看够了代码,这是否知道它只会导致没有好。
我还要说,你应该能够封装在剃刀语法逻辑转移到JavaScript中,你只需要传递给你的JavaScript你的逻辑所需要的信息。
我只是从经验与猜测这下评论,但你应该设计的JavaScript,你会设计你的C#或VB.NET代码的结构,以同样的方式。 这样,您使用的剃须刀应该是你的JavaScript的一部分的逻辑。
这样,你的JavaScript会更容易维护,我认为ReSharper的也应该是快乐的。
我这样做,并发现它非常方便。 它的工作原理以及动态地加载部分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>
}
对于这个问题的未来观众,这里是我的经验。 我认为这将是一个好主意,让该只在部分使用的部分用于组织的脚本。
我是在调试过程中的问题,我有时会有麻烦我的断点击中,将不能够解决的问题,除非我把剧本给父视图。 很可能是由于打印功能不止一次。 我希望部分将解决和组织这更好,但部分没有在局部视图支持(至少在MVC 4)。
所以,我的回答将是维护和调试的缘故,没有剧本不应该局部视图里面放。