MVC partial views and Unobtrusive jQuery/Javascript

Question

I'm struggling to work out how I should be authoring my partial views which use jQuery.

For example, in the partial view below, I am displaying a text box which is hooked up to the jquery autocomplete plugin.

Eventually I want the results to be shown with an "X" next to them which the user can then remove, but for the purpose of this example the selected text is simply appended to the sibling div.

Is my jQuery code OK sitting here in the partial view, or should I be putting it in an external file? If an external file is used, then another developer using the partial view will need to be aware that the external js file should be included - is that OK?

I suppose my question really is that, although I'm kind of OK with jQuery (finding elements in the DOM, calling actions asynchronously etc..), I need some sort of guidance on where to put all this code that will stop me getting in a mess.

Does any of what I have just typed make sense????

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script language="javascript" type="text/javascript">
$(document).ready(function() {

    $(".acEmployee").autocomplete({
        source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
        select: function(event, ui) {

            $(this).siblings().append(ui.item.value);
        }
    });

});

</script>
<div><div></div><input class="acEmployee" /></div>

Since posting this question I found this http://stackoverflow.com/questions/3668518/how-do-you-organize-large-js-jquery-code-bases-across-your-entire-website, which is pretty much what I am asking. — ETFairfax, Mar 21 '11 at 10:37
...and this http://stackoverflow.com/questions/247209/javascript-how-do-you-organize-this-mess — ETFairfax, Mar 21 '11 at 10:45

score 0 · Accepted Answer · answered Mar 21 '11 at 10:06

If the JavaScript is "hookup" code then I don't mind it being in with the partial - as after all, everything it relates to is there.

If the JavaScript is "framework" code and can be reused all over the place, and isn't dependant on anything in the partial then I put it in its own file.

That's just what I do, but I'd be interested in hearing other peoples methods too.

score 0 · Answer 2 · answered Mar 22 '11 at 12:55

If possible, keep all your js code in an external js files. That way you can put your jquery includes at the bottom of the page.

for .net mvc try something like:

       <!--try fetching jquery from CDN, if CDN is down, fallback to local-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='<%:Url.Content("~/Scripts/jquery-1.5.1.min.js")%>' type='text/javascript'%3E%3C/script%3E"));
}
    </script>
    <script type="text/javascript" language="javascript">
    var MVC_baseurl = "<%:Url.Content("~/") %>";
    </script>
    <script type="text/javascript" language="javascript" src="<%:Url.Content("~/Scripts/jquery-ui-1.8.10.custom.min.js")%>"></script>
    <script type="text/javascript" language="javascript" src="<%:Url.Content("~/Scripts/plugins.js")%>"></script>
    <asp:ContentPlaceHolder ID="BottomJavascript" runat="server">

    </asp:ContentPlaceHolder>

You can then put your page-specific stuff in the content placeholders. , your master page specific plugins in plugins.js, and you can use

var path = MVC_baseurl + "Controller/Action"

and use that in your ajax calls etc...

MVC partial views and Unobtrusive jQuery/Javascript

2 Answers2