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>

Answer 1

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.