asp.net - 在 MVC 5 中使用 javascript 代码 - 将其放在哪里

Question

我有 MVC5 应用程序，在 View index.cshtml 中我需要使用一些java脚本代码，目前我将脚本代码放在 View 中并且它工作正常。我的问题是我应该把这段代码放在哪里(来自最佳实践)以及应该如何放置我是从 View 中引用的？请提供一个例子。

Answer 1

我在下面写下的方法是我从您的 View 中完全提取 JavaScript 的方法。

• 更好地维护(js 问题 -> 在 js 文件中查找而不是在 View 中)
• 模块化方法
• 清晰的分隔
• 通过设计更好地理解

在 HTML5 中，使用 data 属性传递来自 Model 的变量。这对于将变量从 MVC(您的 View 模型)移植到 javascript 非常有帮助。这还允许您将 javaScript 存储在单独的文件中，就像您在 MVC 环境中可能希望的那样。

1.1 将 c# 绑定(bind)到 HTML

<div class="news" data-js-params="websiteName=@LocationWebsiteHelper.CurrentLocationWebsiteName()&amp;languageName=@languageName&amp;page=0&amp;itemsPerPage=@Model.MaxNumberOfItems">

1.2 JS Helper 函数将数据转换为对象文字

虽然是基于 jQuery 构建的，但我编写了 2 个小函数，可以帮助将查询字符串变量移植到对象文本中并返回。我在我的 js 文件中使用这些:

// @param (qs): a query string of key value pairs (without ?)
// @param (keyDelimiter): string : character between values and keys
// @param (valDelimiter): string : character between keys and values
// @return (obj): an object literal
// @example: key1=val1&key2=val2&key3=val3
convertQsToLiteral: function (qs, keyDelimiter, valDelimiter) {
    var arrParams, obj = {};

    if (qs && qs.length) {
        keyDelimiter = keyDelimiter || '&';
        valDelimiter = valDelimiter || '=';
        arrParams = qs.split(keyDelimiter);

        $.each(arrParams, function (i, pair) {
            var arrPair = pair.split(valDelimiter),
                key = arrPair[0],
                val = arrPair[1];
             obj[key] = val;
        });
    }
    return obj;
},

// @param (literal): an object literal key value paired of one level deep
// @param (keyDelimiter): string  character between values and keys
// @param (valDelimiter): string : character between keys and values
// @return (string): array string representation
// @example: { key1: val1, key2: val2, key3: val3 }
convertLiteralToQs: function (literal, keyDelimiter, valDelimiter) {
    var arrQs = [],
        arrPairs, key;

    keyDelimiter = keyDelimiter || '&';
    valDelimiter = valDelimiter || '=';

    for (key in literal) {
        if (literal.hasOwnProperty(key)) {
            arrPairs = [];
            arrPairs.push(key, literal[key]);
            arrQs.push(arrPairs.join(valDelimiter));
        }
    }

    return arrQs.join(keyDelimiter);
},

1.3 将HTML数据转换为js对象字面量

考虑到这些函数，您可以将任何查询字符串(例如变量)传递到对象文字中。

var dataParams = convertQsToLiteral($('.news').data('js-params')); // get data attr
var urlParams = convertQsToLiteral(window.location.search.substr(1)); // get url query string

1.4 示例:用于扩展和覆盖对象文字的 JS 模块化设置

结合 jQuery 的 $.extend() 函数，您现在可以以模块化方法覆盖 javascript 对象(考虑到 js 文件/模块的所有闭包如下所示):

window.ProjectName = (function($, projectname){
    // default object literal
    var cfg = {
        // your default options
        idea: 'great'
    };

    // @param (options): something like the cfg object
    projectname.Module = function (options) {

        this.settings = $.extend(true, {}, cfg, options); // deep copy
        this.init();

    };

    projectname.Module.prototype = {
        init: function(){
            this.idea = this.settings.idea;
            console.log(this.idea);
        }
    };

    return projectname;
}(window.jQuery, window.ProjectName));

1.5 初始化js模块

var module = new ProjectName.Module({ idea: 'even better' });

2.1 将脚本/css 添加到 View

您有几个选项可以将脚本附加到 View /页面/ block :

• 基本布局中定义的部分(仅适用于部分 View ，直接包含在基本布局中)
• c# ClientResources(不是 MVC 中的最佳方法，但仍然可行，允许您将外部文件包含到部分 View -> View 中)
• 捆绑(良好或缩小和模块化方法)

2.2.1 部分的基本布局设置

@RenderSection("AdditionalJS", false)

2.2.2 使用部分 View

@section AdditionalJS
{
    <script>
        var module = new ProjectName.Module({ idea: @Model.idea });
    </script>
}

2.3.1 View 中 View 的基本布局设置

@Html.Raw(Html.RequiredClientResources(RenderingTags.Header))

2.3.2 View 中的使用情况

ClientResources.RequireScript("/Design/js/projectname.module.js").AtHeader();

2.4.1 脚本的 BundleConfig 设置

/// <summary>
/// Register the Javascript bundles
/// Separated in libJs, projectJs and polyfillJs
/// </summary>
/// <param name="bundles"></param>
private static void RegisterScripts(BundleCollection bundles)
{
    // usage for libraries
    bundles.Add(new ScriptBundle(
            "~/bundles/libJs").Include(
            "~/Design/js/lib/*.js"
    ));

    // project object
    bundles.Add(new ScriptBundle(
            "~/bundles/projectJs").Include(
            "~/Design/js/project.dev.js",
            "~/Design/js/classes/*.js",
            "~/Design/js/components/*.js"
    ));

    // usage for browser support
    bundles.Add(new ScriptBundle(
            "~/bundles/polyfillJs").Include(
            "~/Design/js/polyfills/*.js"
    ));
}

/// <summary>
/// Render scripts inside conditional comments
/// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments
/// </summary>
/// <param name="ie"></param>
/// <param name="paths"></param>
/// <returns></returns>
public static IHtmlString RenderConditionalScripts(string ie, params string[] paths)
{
    var tag = string.Format("<!--[if {0}]>{1}<![endif]-->", ie, Scripts.Render(paths));
    return new MvcHtmlString(tag);
}

2.4.2 基本布局设置

...
<head>
    ...
    @BundleConfig.RenderConditionalScripts("lte IE 9", "~/bundles/polyfillJs")
    @Scripts.Render("~/bundles/libJs")
<head>
<body>
    ...
    @Scripts.Render("~/bundles/projectJs")        
</body>