How to pass variable to external JS file in asp.net?

Question

I want to use variable of default.aspx.cs in default.aspx file in the script and i successfully it like

public partial class default: System.Web.UI.Page
{
    public string _file = string.Empty;
    public string _img = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        _file = "~/videos/myVideo.mp4";
        _img = "~/images/myImg.png";
    }
}

and in my default.aspx file

<html>
  <body>
    <div id="dv_video"></div>
  </body>
</html>

<!-- jw Script -->
<script src="../jwplayer/jwplayer.js"></script>
<script type="text/javascript">
    jwplayer("dv_video").setup({
        file: '<%= _file %>',
        image: '<%= _img %>',
        height: 500,
        width: 850
    });
    </script>
<!-- jw Script -->

this code is working fine, I want to shift this script code to external javascript file extras.js how can i access _file, _img variable on that javascipt file thats looks like

jwplayer("dv_video").setup({
    file: '<%= _file %>',
    image: '<%= _img %>',
    height: 500,
    width: 850
});

Edited

I have use this code to pass parameter to the js file extras.js

<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/jwplayer/extras.js") %>">
    _image: '<%= _img %>';
    _file320: '<%= _file320 %>';
    _file480: '<%= _file480 %>';
</script>

and this code to use parameter on js file

jwplayer("dv_video").setup({
    image: window._image,
    sources: [{
        file: window._file480,
        label: "480p HD",
        "default": "false"
    },
    {
        file: window._file320,
        label: "360p SD",
        "default": "true"
    }],
    height: 500,
    width: 850
});

drewmerk · Accepted Answer · 2021-05-14 05:32:42Z

4

There's several ways to do that. You can either define a global JS variable like this:

<script type="text/javascript">
_file = '<% _file %>';
_image = '<% _image %>';
</script>

Then you can use those variables in your external JavaScript file like this:

var file = window._file;
var image = window._image;

Another solution is to add those variables into your HTML as data values. Like the following:

<html>
  <body>
    <div id="dv_video" data-file="<% _file %>" data-image="<% _image %>"></div>
  </body>
</html>

Then you can get those data-values in your JS like this:

var image = $('#dv_video').data('image');
var file = $('#dv_video').data('file');

edited May 14, 2021 at 5:32

drewmerk

3924 silver badges13 bronze badges

answered Feb 14, 2017 at 7:48

Mikkel

1,8651 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Usf Noor Over a year ago

thank for your help, but unfortunately both of these way did't work for me, actually i am new to java script, can you help me furture

Mikkel Over a year ago

Hi @UsfNoor - I'd like to help you further, but you need to show me which one of them you've tried and show me how they're not working. Can you show me some code? :-)

Usf Noor Over a year ago

I have add code to edited section of the question, that i had use,

Mikkel Over a year ago

The method you've used should work. I'm doing exactly that in one of my solutions, but if that method won't work for you, try using the other option and do it with data-attributes.

Sandeep Parashar · Accepted Answer · 2019-05-07 13:52:19Z

1

Just a small correction. Use '=' instead of ':' to assign the value to the variables, like below:

<script type="text/javascript">
 _file = '<% _file %>';
 _image = '<% _image %>';
</script>

answered May 7, 2019 at 13:52

Sandeep Parashar

3673 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to pass variable to external JS file in asp.net?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related