Transferring javascript from a view to a seperate JS file

Question

I am working on a legacy application and I want to move some JS code onto a separate JS file.

I will have to refractor some of the code to do this. I can put @Url.Content statements into data attributes in the HTML.

But how would I replace this line of code?

var array = @Html.Raw(Json.Encode(ViewBag.JobList));

A separate JS file will not know what @Html.Raw means.

Create a function and send the value as a parameter. You won't be able to get rid of all the Javascript code in the View then. — emerson.marini, Aug 13 '13 at 14:07
I am now working on something else, but will come back to this later. I haven't forgotton. — arame3333, Aug 20 '13 at 10:27

score 2 · Answer 1 · answered Aug 13 '13 at 14:08

Server side code like that cannot run in a seperate javascript file. My solution for such problems is having a short javascript part in the head that runs on the onload event. There you can set variables that you can use in a seperate javascript file:

in the head:

array = @Html.Raw(Json.Encode(ViewBag.JobList));

in the seperate javascript file:

var array;

Then, in the seperate javascript file you can do with your array whatever is necessary.

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

I think you need to create action with JavaScriptResult

public ActionResult Test()
{        
    string script = "var textboxvalue=$('#name').val();";
    return JavaScript(script);
}

But, before proceeding please go through following links

edited May 23 '17 at 11:49

Community

1
1

answered Aug 13 '13 at 14:27

Satpal

132,252
13
159
168

score 1 · Accepted Answer · answered Aug 13 '13 at 14:31

The ViewBag.JobList data is only known at HTML page generation time. To include it in an external JavaScript file, you have to have another ASP.NET resource that recalculated ViewBag.JobList and then served as part of a dynamic JavaScript file. This is pretty inefficient.

Instead, do what you're doing with the URLs: pass the data through the DOM. If you're writing into normal DOM instead of a script block, you don't need the raw-output any more (*), normal HTML escaping is fine:

<script
    id="do_stuff_script" src="do_stuff.js"
    data-array="@Json.Encode(ViewBag.JobList)"
></script>

 ...

var array = $('#do_stuff_script').data('array');

// jQuery hack - equivalent to JSON.parse($('#do_stuff_script').attr('data-array'));

(Actually, the raw-output might have been a security bug, depending on what JSON encoder you're using and whether it chooses to escape </script to \u003C/script. Writing to HTML, with well-understood HTML-encoding requirements, is a good idea as it avoids problems like this too.)

Data attributes are so useful. For client side programming you can use then like hidden fields, but with the advantage that you can store arrays in them as well. Your answer puts the attribute in a script element, but it can also go into a div element or hidden field element. Given my application is in ASP.Net/MVC it is better to do this as my next refactor is to bundle the script. — arame3333, Oct 01 '13 at 07:28

score 1 · Answer 4 · edited May 23 '17 at 11:49

1

I would also follow MelanciaUK's suggestion :

In your javascript file, put your code inside a function :

function MyViewRefactored( array ){
  ... your code ...
}

In your view, leave a minimal javascript bloc :

 <script>
     var array = @Html.Raw(Json.Encode(ViewBag.JobList));
     MyViewRefactored( array );
 </script>

edited May 23 '17 at 11:49

Community

1
1

answered Aug 13 '13 at 15:27

LeGEC

46,477
5
57
104

Transferring javascript from a view to a seperate JS file

4 Answers4