ASP.NET Webforms, JavaScript in User Controls

Question

We are fighting a bit for the correct implementation of JavaScript in our solution (APS.NET Webforms).

We want to have all (or at least as much as possible) of our javascript at the bottom of the pages, in accordance with best practice, so the pages first load HTML and CSS and give a better user interface.

Our project has a lot of jQuery code, which is often specific to certain controls, so we don’t want this to load on every page.

Currently, jQuery itself, including the jQuery user interface, is located at the top of the pages, so we can use jQuery in controls (either from js files or sometimes in embedded code), however we want to move all this to the bottom of the page. We have already added a content site ("JavascriptFooter") at the bottom of the page, so we can place javascript from the pages in the page footer, but we are stuck on the controls.

What are the best methods for doing this? Should we preempt all JS and check JS if the control is loaded? But then we will show too many things all the time. Or is there another way?

Answer 1

First, I would suggest downloading jQuery from a CDN. Here is the code for Google:

<script type="text/javascript"> document.write(["\<script type='text/javascript' src='", ("https:" == document.location.protocol) ? "https://" : "http://", "ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>\<\/script>"].join('')); </script> 

Thus, if a visitor has been sent to another site, he will already be cached. In addition, it will boot in parallel since it is being delivered from another host.

I also agree with @ctorx - you should use document readiness.

In addition, you can use the ScriptManager and create all of your JS control code in the code for each control (probably a good idea if this control is the only object using this JS) - all this code is displayed on the bottom of the page.

Example:

 Page pg = (Page)System.Web.HttpContext.Current.Handler; // or this.Page in .ascx ScriptManager.RegisterStartupScript(pg, typeof(Page), "myJS", "[... your code ]", true); 

Answer 2

I bet there are as many solutions as there are companies using webforms. However, you can always use the request context to store the necessary scripts and then write them before displaying the page.

You could use requireJS . I am not an expert, but there are many options, and it will handle script loading timeouts, circular dependencies, define several dependencies, etc.

Answer 3

Firstly, the best approach is to externalize JavaScript from the controls in a JS file that loads on the first request to your site and in all subsequent requests (e.g. site.js). This file will then be cached by the browser, and users will not have to download JS again and again, as if JS remained in the controls.

Then you need to create a mechanism to execute only those parts of the script that are relevant to the executable page or control.

There are several ways to achieve this, however, if I were in your situation, I would do it this way.

Define a page-level element that wraps most of your content ... usually people call it wrapper . Dynamically add a custom attribute to the wrapper called " data-js ". Set the value of "data-js" dynamically (server side) from any page or user / user control. Let it have several keys separated by a pipe (|) or another character.

 <div class="wrapper" data-js="funtion1|function2"> <!-- Page content goes here --> </div> 

Use jQuery to search for this attribute in the DOM and execute JS custom functions based on the value in the data-js attribute. This function will only contain code that is relevant to the current page or controls.

  $(function(){ var funcKeys = $('.wrapper').attr('data-js'); if(funcKeys != null) { var funcs = funcKeys.split('|'); for(var i=0; i< funcs.length; i++) { var funcName = eval(funcs[i]); if(typeof funcName == 'function') { funcName(); } } } }); 

Using this approach, you only need the jQuery CDN link, the link to your site's JS file, and the above code snippet in your layout.

Then you just need to include certain page / control functions in your JS file of your site, for example:

 function function1() { alert("This is function 1"); } function function2() { alert("This is function 2"); } 

Hope this helps.

FYI, I am also setting up the fiddle so you can play with it: http://jsfiddle.net/hh84f/1/