trying to reuse javascript code by moving it from view to js file

i have a bunch of code where i dynamically create dropdown boxes in javascript. To prepulate the list of dropdown items, i often have code similar to below where i "inject" in the array of data items from my model so i have <%= myHTMLhelper.ShowArray(Model.List ofItems %> code inside of a javascript function.

This works perfectly except that i now have similar code that i want to reuse across files as i dont want to copy and paste code. The issue is that normally i would move my javascript code into a seperate .js file and import that into my multiple views but in this case i can't as that <% %> code 开发者_StackOverflow中文版wont work inside of a .js file.

Any suggestions on how can avoid copy and paste solution here ?

$(".dependencyAddButton").click(function() {

                var tblID = $(this).prev("table").attr("id");

                var lastRow = GetLastRow(tblID);

                var existingItems = GetExistingItems('#' + tblID);

                <%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>

What you want to do is create a jQuery plugin from your script and pass all server-side information into the plugin as a parameter. Using your example, you would have the following plugin defined in an external file:

jQuery.fn.dropdown = function(array) {
    var tableId = $(this).prev('table').attr('id');
    var lastRow = GetLastRow(tblId);
    var existingItems = GetExistingItems('#' + tblId);
    var dropDownItems = array;
    // DO STUFF WITH THE ARRAY
};

You would then call it from your view:

$('.dependencyAddButton').dropdown(<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>);

This is a pretty common technique that you will find used whenever dynamic information is required. It might be a URL or some other configuration property.

Please note that this was a jQuery plugin written off the top of my head. It doesn't necessarily follow current best practices for writing plugins; it might not even work. It is simply an example of the technique that you can use to handle issues like you were having. Take a look at one of the following links for more information on writing jQuery plugins:

• http://docs.jquery.com/Plugins/Authoring
• http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html
• http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Plug_me:_Writing_your_own_plugins

$(".dependencyAddButton").click(function() {
    var tblID = $(this).prev("table").attr("id");
    var lastRow = GetLastRow(tblID);
    var existingItems = GetExistingItems('#' + tblID);

This is static code. It is a good candidate to go in an external .js file, which can be fetched just once and then cached after that.

<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>

This is not static code, it's page-related data. It's not really a good candidate to go in an external .js file. It might change. It's much easier to keep that inline in the page itself.

Sure, you can kick it out to an external file if you want to: as Pekka said, by serving .js through ASP, or (easier) by just pointing the script tags at a .aspx URL. But what do you gain by doing that? It's not going to get cached, so that's extra HTTP requests to do, with the associated latency. You can fix that by manually managing the cacheing headers, but that's not really so trivial to pull off properly, and do you even know how long it should be cached before expiring anyway?

For reducing duplication at your end you can of course put this kind of ‘output data used by every page’ code in some kind of shared functionality on the server-side such as master pages or user controls.

I would recommend replacing the <%= %> script with it's equivalent JavaScript. Since you are using jQuery, I would turn this short script into a jQuery plugin. This is very easy to do, and basically just adds a wrapper around your current code. You will then be able to do something like.

$(".dependencyAddButton").AddClick();