Question

I’ve seen/read plenty advocating “unobtrusive” JavaScript contained in separate files. I’m preparing to combine all my JavaScript from three partial views into a single file that I will then reference somewhere in my master.

My question is: is there any type of JavaScript that should remain behind in the html? One example that seems to me may present a problem would be something like:

<script type="text/javascript">
    $(document).ready(function () {
        $('#newQuoteLink').click(function () {
            $('#newQuoteLink').hide();
            $('#newQuoteDiv').load('/Quote/Create/<%:Model.Book.BookID%>');
            return false;
        });
    });
</script>

–in particular the

<%:Model.Book.BookID%>

Am I correct in assuming this script would not work if loaded from a separate file?

I mostly wanted to check if there were any caveats or other considerations prior to combining everything into this lone, separate file.

Thanks in advance.

Answer 1

Nope, promise to never ever hardcode url addresses that are route dependent like you did in your javascript file. It’s bad, bad, bad. Did I say it’s bad?

That’s too much of a javascript in a view (it’s a bandwidth waste). You could try a global javascript variable declaration your view:

<script type="text/javascript">
    var quoteUrl = '<%: Url.Action("create", "quote", new { id = Model.Book.BookID }) %>';
</script>

and in your javascript file:

$(function () {
    $('#newQuoteLink').click(function () {
        $('#newQuoteLink').hide();
        $('#newQuoteDiv').load(quoteUrl);
        return false;
    });
});

That’s a path I wouldn’t personally take. Still a script tag with a global javascript variable declaration in your view. Still a waste.

---

Things become even prettier like this (and it is at that moment that you realize the real power of unobtrusive javascript):

<%: Html.ActionLink("Foo Bar Beer Link Text", "create", "quote", 
    new { id = Model.Book.BookID }, new { id = "newQuoteLink" }) %>

and in your external javascript:

$(function () {
    $('#newQuoteLink').click(function () {
        $('#newQuoteLink').hide();
        $('#newQuoteDiv').load(this.href);
        return false;
    });
});