Is it better to use embedded javascript or a separate .js file in an MVC3 view?

Question

I've been told that it's best to place Javascript code in a separate file to keep concerns separated, and while the idea resonates with me, I don't find it practical.

That may just be my inexperience, hence this question.

Here's a clear cut example where I found that placing the code in the View was better than placing it in a separate javascript file.

In my View, I needed to invoke a JQueryUI dialog, and set the title dynamically with the Name of my model.

$("#thumbs img").click(function () {
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog({
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: {
            effect: 'slide',
            duration: 500,
            direction: 'up'
        },
        hide: {
            effect: 'slide',
            duration: 250,
            direction: 'up'
        },
        title: '@Model.Product.Name'
    });
});

Notice:

title: '@Model.Product.Name'

As you can see I have access to the strongly typed model if I use Javascript in my View. This is not the case if I use a separate Javascript file.

Am I doing this wrong, is there something I'm not seeing?

If I were to use a separate file, how would it look like seeing as I can't access the Model properties from within the Javascript file?

external js files are not just only good for "separation of concerns", we get other main advantages like browser caching, minification etc. so the answer is straight put them in external files. — VJAI
– VJAI, Commented Apr 11, 2012 at 14:02

danludwig · Accepted Answer · 2012-04-05 22:37:38Z

12

Separate js file:

<div id="thumbs">
    <img data-dialog-title="@Model.Product.Name" src="[whatever url]" />
</div?

$("#thumbs img").click(function () {
    var title = $(this).data('dialog-title');
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog({
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: {
            effect: 'slide',
            duration: 500,
            direction: 'up'
        },
        hide: {
            effect: 'slide',
            duration: 250,
            direction: 'up'
        },
        title: title
    });
});

Access the model properties unobtrusively through the dom using HTML5 data-* attributes. The javascript above will work perfectly fine as an external file.

edited Apr 5, 2012 at 22:37

answered Apr 5, 2012 at 22:31

danludwig

47.3k27 gold badges164 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marc Gagne · Accepted Answer · 2012-04-06 15:57:13Z

0

If you cannot use the aforementioned HTML5 data attributes, then perhaps http://nuget.org/packages/RazorJS will do the trick, seems like it could solve your problem.

answered Apr 6, 2012 at 15:57

Marc Gagne

8195 silver badges7 bronze badges

Collectives™ on Stack Overflow

Is it better to use embedded javascript or a separate .js file in an MVC3 view?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related