javascript - 将 JavaScript 放在部分视图中是否可以

Question

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

部分视图的 html 代码包含用于常量块和信息块中的 js 函数。加载页面时，这些函数可以“看到”彼此并且它可以工作，但是 resharper 找不到函数声明并警告我这一点。由于可以在他们的代码中找到剃刀语法，我无法通过将它们传输到外部 js 文件来解决问题。

我能用这个做什么？

谢谢。

更新：

最后，我决定解决将我的 js 代码与视图分开的问题。所以新的问题是如何将 razor 语法包含到 js 文件中，或者什么是可接受的替代方案。我发现的流行解决方案是使用全局变量、数据属性和我更喜欢的一个——John Katsiotis 的 RazorJS 库。

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

我希望它能够稳定运行并使 Resharper 高兴。

干杯!

更新：

3年后我回忆起这个问题并决定根据我的经验对其进行更新。事实上，现在我宁愿不建议为此使用额外的库。尤其是如果您不是项目团队中的唯一成员……如果您在所有库中都得到保证会更好，它们得到创建者和社区的支持，并且可以轻松集成到您的 IDE 中（例如，如果使用特殊语法） . 此外，您团队中的所有人员都应该知道它是如何工作的。所以现在我建议做接下来的事情：

将所有 JS 保存在单独的文件中。尽可能地隔离它。为其提供外部 API。
从您的视图中调用 API 函数。
将所有 Razor 生成的 URL、文本消息、常量作为资源参数传递。

例如：

.js 文件：

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

看法：

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

score 40 · Accepted Answer

如果 Resharper 警告你，这没什么大不了的^_^

但如果我是你，我根本不会把 JavaScript 放在局部视图中。

因为局部视图可以多次插入到一个页面中，所以您的 JavaScript 会出现问题。

对于您的情况，如果您无法将 JavaScript 与 JS 文件分开，那么只需创建另一个 PartialView 并将这些脚本放入其中，然后将其呈现在您的主页中。

score 11 · Accepted Answer

如果您想编写封装“小部件”的局部视图，一旦将它们包含在页面中就可以工作，那么在局部视图中嵌入脚本块是将标记和初始化脚本一起包装在局部视图中的一种干净方法. 例如，我可能有一个名为“_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 -->

score 4 · Accepted Answer

我同意 Wahid 的观点，即您不应该将 JavaScript 放在任何部分或其他视图中。我已经看过足够多的代码来做到这一点，知道它只会导致没有好处。

我还要说，您应该能够将封装在 Razor 语法中的逻辑转移到 JavaScript 中，您只需将逻辑所需的信息传递给 JavaScript。

我只是根据下一条评论的经验猜测，但您应该以与设计 C# 或 VB.NET 代码结构相同的方式设计 JavaScript。这样，您使用 Razor 的逻辑应该是 JavaScript 的一部分。

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

score 2 · Accepted Answer

我这样做并发现它非常方便。它可以很好地使用 ViewBag、HttpContext 等来动态加载部分 javascript 片段。

它产生的感觉就像使用 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>
}

score 1 · Accepted Answer

对于这个问题的未来观众，这是我的经验。我认为将仅由局部使用的脚本保留在局部组织中是一个好主意。

我遇到的问题是在调试过程中，有时我很难让我的断点命中并且无法解决问题，除非我将脚本移动到父视图。很可能是由于多次打印该功能。我希望部分能够更好地解决和组织这个问题，但部分视图不支持部分（至少在 MVC 4 中不支持）。

所以我的回答是为了维护和调试，不应该将任何脚本放在局部视图中。

javascript - 将 JavaScript 放在部分视图中是否可以

5 回答 5

Related

Reference