locked
How to encapsulate JS/CSS inside a User Control (ascx)? RRS feed

  • Question

  • User260076833 posted

    Hello,

    I want to use a jQuery widget in my app, but I want to encapsulate the JS and CSS it uses inside a user control (ascx).

    There are many Howtos and posts saying that it's easy and works out of the box. But not for me. Here is a minimal example:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Plotter.ascx.cs" Inherits="Governix.lib.web.ctl.Plotter" %>
    
    <script type="text/javascript" src='<%# ResolveUrl ("~/lib/ext/flot/jquery.flot.min.js") %>'></script>
    
    <script type="text/javascript">
    
        function init()
        {
            var d1 = [];
            for (var i = 0; i < 14; i += 0.5) {
                d1.push([i, Math.sin(i)]);
            }
    
            var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
            var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
            $.plot("#plotter", [d1, d2, d3]);
        };
    </script>
    
    <script type="text/javascript">
        $(document).ready(init);
    </script>
    
    <div id="plotter">
        Plotter
    </div>
    

    This example uses the jQuery Flot plugin (www.flotcharts.org). The jQuery JS are included in a master page. The Flot plugin is included in this user control (first script tag).

    However, when I use this user control I get a jquery error saying that the method "plot" is not defined.

    How can you get this to work while keeping the jquery plugin encapsulated in the user control?

    Thanks
    Magnus

    EDIT:

    In the source of the final page I can see that the plugin is not included:

    <script type="text/javascript" src=''></script>

    Furthermore, these script tags are at the end of the page, below the HTML code where the user control is used.

    What can I do?

    Wednesday, October 11, 2017 7:38 AM

All replies

  • User2103319870 posted

    <script type="text/javascript" src='<%# ResolveUrl ("~/lib/ext/flot/jquery.flot.min.js") %>'></script>

    You need to change this binding expression, Instead of using # you need to use = like below

    <script type="text/javascript" src='<%= ResolveUrl ("~/lib/ext/flot/jquery.flot.min.js") %>'></script>

    Also I cannot see a masterpagefile property on your page directive, hence you might get jquery reference issue( JavaScript runtime error: '$' is undefined). If you face that then add the reference for jquery directly to page

    Wednesday, October 11, 2017 1:41 PM
  • User260076833 posted

    Hello,

    thank you very much. It works now!
    (The user control is used in a page which in turn uses a master page.)

    However, I there is another point which still fits under the thread subject:

    I want to be able to "use" the user defned control "Plotter" within the code behind, i. e. fill it with data.
    In the example above, all the data is populated in JavaScript.

    So I need to retrieve the data from a database in the code behind and populate this data to the client JS code.

    How can you do this?

    Thanks
    Magnus

    Wednesday, October 11, 2017 3:04 PM
  • User2103319870 posted

    I need to retrieve the data from a database in the code behind and populate this data to the client JS code.

    You need to use Ajax to get the data from Code Behind using Client JSCode and then populate the Chart. You can take a look at this article for more details :http://techbrij.com/chart-jquery-flot-asp-net-web-api-mvc 

    Wednesday, October 11, 2017 5:17 PM