ASP.NET MVC editor template javascript location

Question

Hi,

We have an editor template that contains approx 40 lines of jquery. I tried dropping this script into a <asp:Content> block to keep all of the javascript in one location within the page. However, I get the following error message content controls have to be top-level controls in a content page.

Is there any way to get this working so we don't have script dotted around our final output pages or could someone recommend the best practice for storing javascript used within ASP.NET MVC templates? At the moment I'm thinking of pulling the code into a separate file and referencing it within the master page but this means it gets pulled into every page which isn't really ideal.

Thanks in advance.

Answer 1

It would be easier for later maintenance, if you keep the javascript into a separate file and reference it where ever it is needed. Also, if you feel that placing all script into a single file will increase unnecessary loading of scripts, where not needed, then break the scripts into separate files based on functionality/modules in which it is useful etc. strategy and then reference them instead.

Also, it was said that always, keep/reference the scripts at the bottom of the page so that page loading will be faster.

Answer 2

as siva says, bottom of the page is the 'ideal'. however, as for seperate files. this is only going to be practical as long as you don't reference asp.net elements from the page - ie:

<asp:Content ContentPlaceHolderID="jsCode" ID="jsCode1" runat="server">
    <script type="text/javascript">
        $(document).ready(function() {
            getPoundsData();
        });

        function getPoundsData() {
            var id = $("#ID").val();
            var URL = '<%=Url.Action("GetPounds", "FundShareholder")%>';
            var params = { id: id };
            if (id != null)
                SendAjaxCache("#" + $("#ShareholderID option:selected").text() + " RSP#", URL, params, null, ListDataShareholderPounds);
        }

        function ListDataShareholderPounds(data) {
            if (data.length != 0) {
                $('#shareholderPounds').html("");
                $('#shareholderPounds').show();
                $('#shareholderPounds').html(data);
            }
        };

    </script>
</asp:Content>

notice the:

var URL = '<%=Url.Action("GetPounds", "FundShareholder")%>';

part in the js. what 'we' do is to add a content section to the master page at the very bottom to hold our js stuff. however, this only works inside the ViewPage (aspx) object. the ascx pages are 'ignorant' of any master page content sections.

We are currently working on systemizing the process whereby we save 'partial' js files with asp.net references inside them and then inject them into the page-flow via a filterattribute. we're at an early stage with this but the nice thing about this approach is that the partial js is treated as a file and is therefore cached for future visits to that page.

anyway, that's our current approach, would be interested to discover if peeps are using any similar mechanisms to inject js that contains asp.net object references.

cheers...

[edit] - here's a heads up on the approach i'm talking about (this wasn't our original inspiration, but is quite similar, tho is webforms, rather than mvc) - http://www.west-wind.com/WebLog/posts/252178.aspx or this one which IS mvc: http://poundingcode.blogspot.com/2009/12/injecting-javasript-into-aspnetmvc-with.html. Finally found the article that inspired our 'search' in this: http://stackoverflow.com/questions/2957517/asp-net-mvc-routing-and-paths-is-js-files plus http://codepaste.net/p2s3po