在MVC5中使用java脚本代码 - 在哪里放置它

Question

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

Answer 1

我在下面写的方法是我从你的观点中完全提取JavaScript的方法.

• 更好地维护(js问题 - >查看js文件而不是视图)
• 模块化方法
• 明确分离
• 通过设计更好地理解

在HTML5中,使用该data属性传递来自的变量Model.这有助于将变量从MVC(您的viewmodel)移植到javascript.这也允许您将javaScript保存在单独的文件中,就像您在MVC环境中所希望的那样.

1.1将c#绑定到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之上,但我编写了两个小函数,它们可以帮助将查询字符串变量移植到对象文字中并返回.我在整个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

您有几个选项可以将脚本附加到您的视图/页面/块:

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

2.2.1部分的baselayout设置

@RenderSection("AdditionalJS", false)

2.2.2使用局部视图

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

2.3.1 baselayout设置视图中的视图

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

2.3.2视图中的使用视图

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 baselayout设置

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

Answer 2

你最好使用Razor @section.

在您的布局中:

<html>
     <head>
          <title>My Title</title>
          .....
          @RenderSection("Scripts", false)
     </head>

     <body>
          @RenderBody
     </body>
</html>

在您的视图中:

<div id="container">
      <h3>Welcome!</h3>
      ...
</div>

@section Scripts
{
    <script type="text/javascript">
        // your script goes here
    </script>
}

有些人宁愿放在标签@RenderSection("Scripts")之前</body>.