我的Javascript代码未在MVC视图中运行

Question

我在将这个模板实施到我的MVC应用程序时遇到了一些问题。

https://bootsnipp.com/snippets/featured/pinterest-like-sensitive-grid

我的CSS和代码可以正常工作，但是Javascript无法正常工作。

我正在使用部分视图来包含如下代码：

@model List<Assignment_3.Models.Word>

<script type="text/javascript" src='@Url.Content("~/Scripts/ResponsiveGrid.js")'></script>

<div class="container">
    <div class="row">
        <div>
            <section id="pinBoot">
                @foreach (var word in Model)
                {
                    <ItemTemplate>
                        <article class="white-panel">

                            <a href="@Url.Action("Detail", new { id = Word.WordId })">
                                <img src="@Url.Content(Idiom.Imagepath)" />
                            </a>
                            <h4 class="textwrapper">Test</h4>
                            <p>Language</p>
                        </article>
                    </ItemTemplate>
                }
            </section>
        </div>
    </div>
</div>

<style>
    body {
        background-color: #eee;
    }

    .textwrapper {
        word-break: break-all;
    }

    #pinBoot {
        position: relative;
        max-width: 100%;
        width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .white-panel {
        position: absolute;
        background: white;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px;
    }
    .white-panel h1 {
            font-size: 1em;
    }

    .white-panel h1 a {
            color: #A92733;
    }

    .white-panel:hover {
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
            margin-top: -5px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    }
</style>

这是Javascript文件：

$(document).ready(function () {
$('#pinBoot').pinterest_grid({
    no_columns: 4,
    padding_x: 10,
    padding_y: 10,
    margin_bottom: 50,
    single_column_breakpoint: 700
});
});

usage:

$(document).ready(function () {

$('#blog-landing').pinterest_grid({
    no_columns: 4
});
});

; (function ($, window, document, undefined) {
var pluginName = 'pinterest_grid',
    defaults = {
        padding_x: 10,
        padding_y: 10,
        no_columns: 3,
        margin_bottom: 50,
        single_column_breakpoint: 700
    },
    columns,
    $article,
    article_width;

function Plugin(element, options) {
    this.element = element;
    this.options = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

Plugin.prototype.init = function () {
    var self = this,
        resize_finish;

    $(window).resize(function () {
        clearTimeout(resize_finish);
        resize_finish = setTimeout(function () {
            self.make_layout_change(self);
        }, 11);
    });

    self.make_layout_change(self);

    setTimeout(function () {
        $(window).resize();
    }, 500);
};

Plugin.prototype.calculate = function (single_column_mode) {
    var self = this,
        tallest = 0,
        row = 0,
        $container = $(this.element),
        container_width = $container.width();
    $article = $(this.element).children();

    if (single_column_mode === true) {
        article_width = $container.width() - self.options.padding_x;
    } else {
        article_width = ($container.width() - self.options.padding_x * 
self.options.no_columns) / self.options.no_columns;
    }

    $article.each(function () {
        $(this).css('width', article_width);
    });

    columns = self.options.no_columns;

    $article.each(function (index) {
        var current_column,
            left_out = 0,
            top = 0,
            $this = $(this),
            prevAll = $this.prevAll(),
            tallest = 0;

        if (single_column_mode === false) {
            current_column = (index % columns);
        } else {
            current_column = 0;
        }

        for (var t = 0; t < columns; t++) {
            $this.removeClass('c' + t);
        }

        if (index % columns === 0) {
            row++;
        }

        $this.addClass('c' + current_column);
        $this.addClass('r' + row);

        prevAll.each(function (index) {
            if ($(this).hasClass('c' + current_column)) {
                top += $(this).outerHeight() + self.options.padding_y;
            }
        });

        if (single_column_mode === true) {
            left_out = 0;
        } else {
            left_out = (index % columns) * (article_width + 
self.options.padding_x);
        }

        $this.css({
            'left': left_out,
            'top': top
        });
    });

    this.tallest($container);
    $(window).resize();
};

Plugin.prototype.tallest = function (_container) {
    var column_heights = [],
        largest = 0;

    for (var z = 0; z < columns; z++) {
        var temp_height = 0;
        _container.find('.c' + z).each(function () {
            temp_height += $(this).outerHeight();
        });
        column_heights[z] = temp_height;
    }

    largest = Math.max.apply(Math, column_heights);
    _container.css('height', largest + (this.options.padding_y + 
this.options.margin_bottom));
};

Plugin.prototype.make_layout_change = function (_self) {
    if ($(window).width() < _self.options.single_column_breakpoint) {
        _self.calculate(true);
    } else {
        _self.calculate(false);
    }
};

$.fn[pluginName] = function (options) {
    return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));
        }
    });
}

})(jQuery, window, document);

非常感谢您使用Javascript的任何提示！

Answer 1

即使您正在使用jQuery和其他开放源代码库，也要在结束正文标记之前放置javascript文件，这是一个好习惯。 您是否检查过浏览器（在Windows上为F12）以查看所指向的URL是否正在网络上加载文件？ 在MVC中，您可能希望将JS文件放入bundle.config内，并使用捆绑和压缩来引用它们，如下所示

在Bundle.config中

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
                    "~/Scripts/script.js");

在Application_Start事件中

public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}
} 

和在UI上

 @Scripts.Render("~/bundles/scripts")

这样，您的JS文件将被最小化，并且更改始终会反映在UI上（解决缓存问题）

Answer 2

如果您在浏览器中检查输出的html，您会看到script标记中的url可能无法正确解析：

<script type="text/javascript" src='@Url.Content("~/Scripts/ResponsiveGrid.js")'>
</script>

您可以使用相对于域根的url来解决此问题。

src="/Scripts/ResponsiveGrid.js"