CODEWITHSUNDEEP
javascriptasp.netasp.net-mvc
Steven Edison
Steven Edison

Reputation: 527

What is the standard workaround for dynamic js files

Is there a standard workaround for something like this in ASP.NET:

//myinclude.js
$(document).ready(function() {
    for(recs=0; recs < {{server-side-value}}; recs++) {
        // process records
    }
});

Note this is a js file. I know about WinForms ability to insert dynamic quoted scripts into the page. But how about a page's js file that is dependent on server-side values? I know you can use something like:

//myview.cshtml    
var instance = new MyObject(<%= ServerSideValue =%>);

and include it on the page to pass it to the js file, but I'm wondering about the architecture of keeping js separate from html code so that an html/css designer can work with the template free of javascript; keeping everything separate. I primarily use MVC now.

What are some of the patterns to deal with this? Is the only solution dynamically inserting js into the actual page or having partial views included separately into the page.? Or is there a way to sprinkle server-side values in separated js? In short, no dynamic js files?

I'm not trying to fix an exact project at this time, I have just been curious about this on past projects.

Thanks...

Upvotes: 0

Views: 59

Answers (3)

EdSF
EdSF

Reputation: 12341

If it's not "inline" (on the View/Page itself), you could do a Partial View/Page:

Trivial example: _PartialJs.cshtml

$(document).ready(function() {
    var foo = "@DateTime.Now.Year";
});

Then in your view:

<script>
    @Html.Partial("_PartialJs")
</script>

Renders:

<script>
    $(document).ready(function() {
       var foo = "2015";
    });
</script>

Hth...

Upvotes: 1

Nikos M.
Nikos M.

Reputation: 8325

for example one can do this:

A. have the main .js code read any context-specific parameters from the current window like this (page.js):

!function(window){
 var configData = window.MyAppNameConfigData;
// rest app code here..
}(window);

B. the server side script can inject these context-specific data in the page's html like this:

<script>
window.MyAppNameConfigData = {
  param1: //..
  param2: //..
  // etc..
};
</script>

Note if needed make sure that the page.js is enqueued/loaded after the data have been injected/inserted (using a script dependency chain for example)

Upvotes: 1

Yosep Kim
Yosep Kim

Reputation: 2941

There are multiple ways to achieve this. One of the ways would be populating your data into a Javascript objects on the HTML page directly.

//myview.cshtml    

<script>
  var pageData = {
    name : '@variable1',
    value1: @value1
  }; 
</script>

And, in the javascript file:

//pageUI.js
if (pageData) {
  $('#page_tile').html(pageData.name);
}

I am sure you can optimize a whole lot (for example, having a single communication between the server side data and the client side code). At the end of the day, you want to make sure that your javascript code can be resusable.

Upvotes: 1

Related Questions