Question

116

do you write your JavaScript in a ASP.NET MVC view ... or in a separate JavaScript file?

rated 0 times [ 117] [ 1] / answers: 1 / hits: 37340 / 14 Years ago, fri, january 7, 2011, 12:00:00

Trying to improve my coding styles I've tried different solutions but I can't figure out what is the best.

I've started putting JavaScript inside my views but I don't particularly like this solution.

It's hard to debug with Visual Studio, and it kinds of pollutes the page.

My new trend is to put the scripts for the page in a separate file.

The only problem I am facing is with the code.

To solve the problem I've defined JavaScript variables like this:

<script type=text/javascript>

    var PriceListFetchAction = '<%=Url.Action(Fetch, PriceList)%>';

    var UploaderAction = '<%=Url.Action(UploadExcelPriceList, PriceList)%>';

    var ModelId = '<%=Model.id%>';

    var ImportType = '<%=Model.Type%>';

    var customerCodeFetchAction = '<%=Url.Action(FetchByCustomerCode, Customers)%>';

    var customerNameFetchAction = '<%=Url.Action(FetchByCustomerName, Customers)%>';

    var ImportErpAction = '<%=Url.Action(ImportPriceListErp, PriceList)%>';

    var imageCalendar = '<%=Url.Content(~/Content/Images/calendar.png)%>';

</script>

and then I use the variables in my JavaScript file.
What is the best in terms of performance, debugging, style for you?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tye

Add To Favorites

Follow

Total Points: 415

Total Questions: 103

Total Answers: 116

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

answered 14 Years ago erinh · Accepted Answer

I follow a handful of rules:

Don't attach a variable directly to the DOM unless absolutely necessary.

Place as much information in js files as possible. The fewer js files, the better.

Version your js files. When publishing, minify and mash via Chirpy or SquishIt

In js, minimize your dependency on dynamic server-side values (generated ids, etc.) when you can.

So, here's an example:

I'll add jQuery and jQuery metadata to my project:
http://plugins.jquery.com/project/metadata

Then, in my master js file, I'll extend jQuery with my own namespace:

$.extend({

   fatDish : {

     url : {},

     urls : function(a) {

        $.extend($.fatDish.url, a);

     }

   }

});

Almost all of my customized js logic will live in the $.fatDish namespace.

Now, let's say I want to pass a MVC route to $.fatDish. In my aspx page, I'd write the following:

<script [email protected](~/path/master.js) type=text/javascript></script>

<script type=text/javascript>

   $.fatDish.urls({

      path1 : '@Url.Action(Index, Home)'

   });

</script>

In a js file, I can now write:

window.location = $.fatDish.url.path1;

A second approach is to use jQuery metadata (which I mentioned above). On your aspx page, you could write something like:

<div class=faux-link {act:'@Url.Action(Index, Home)'}>Go Somewhere</div>

Then, in your js file, you can grab the route value like so:

$('.faux-link').click(function() {

   var $this = $(this);

   var href = $this.metadata().act;

   window.location = href;

});