Using java script code in MVC5 - where to put it

Question

Im having MVC5 application and in the view index.cshtml I need to use some java script code ,currently I put the script code inside the view and its working fine. My question is where should I put this code (from best practice) and how should I refer to it from the view?please provide an example.

Answer 1

The approach I've written down below is my way of extracting JavaScript completely from your views.

• better to maintain (js issues -> look in js files and not in views)
• modular approach
• clear separation
• better to understand by design

In HTML5, use the data attribute to pass along variables from the Model. This helps tremendously in porting variables from MVC (your viewmodel) to javascript. This also allows you to keep javaScript stored in separate files as you probably would like in an MVC environment.

1.1 Binding c# to HTML

<div class="news" data-js-params="[email protected]()&amp;languageName=@languageName&amp;page=0&amp;[email protected]">

1.2 JS Helper functions to convert data into object literals

Although built on jQuery, I've written 2 small functions which can help porting querystring variables into object literals and back. I use these throughout my js files:

// @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 Convert HTML data into js object literals

With these functions in mind you can pass any query string like variables into an object literal.

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

1.4 Example: JS modular setup to extend and override object literals

Combined with jQuery's $.extend() function you can now override javascript objects in a modular approach (considering all closures a js file/module looks like this):

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 Initializing a js module

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

2.1 Adding scripts/css to your views

You have a couple options for attaching scripts to your views/pages/blocks:

• section defined in the baselayout (only for partial views, directly included into the baselayout)
• c# ClientResources (not the best approach in MVC but still doable, allows you to include external files into a partial view -> view in view)
• bundles (good or minification and modular approach)

2.2.1 baselayout setup for sections

@RenderSection("AdditionalJS", false)

2.2.2 usage partial view

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

2.3.1 baselayout setup for view in view

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

2.3.2 usage view in view

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

2.4.1 BundleConfig setup for scripts

/// <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 setup

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