Make external js file in ASP.NET MVC with razor path

Question

I have js code , that I decided to move to external js.

In this code I have razor syntax (url path)

Here is code of those functions

 function getStops() {
    var url = $('#map').data('request-url');
    $.getJSON(url,
        function (data) {
            var marker = [];

            $.each(data,
                function (i, item) {
                    marker.push({
                        'location': new google.maps.LatLng(item.Latitude2, item.Longitude2),
                        'map': map,
                        'weight': item.Difference,
                        'radius': 10
                    });
                });
            var pointArray = new google.maps.MVCArray(marker);

            heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            heatmap.setMap(map);
        });
};


// get Driving and show on layer
function getDriving() {
    var url = $('#map').data('request-url2');
    $.getJSON(url,
        function (data) {
            var marker = [];

            $.each(data,
                function (i, item) {
                    marker.push({
                        'location': new google.maps.LatLng(item.Latitude2, item.Longitude2),
                        'map': map,
                        'weight': item.Speed,
                        'radius': 10
                    });
                });
            var pointArray = new google.maps.MVCArray(marker);

            heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            heatmap.setMap(map);
        });

I know about data-request-url that I can write in element. in my case it's div.

So I wrote it like this on font-end

<div id="map" data-request-url="@Url.Action("GetStops", "Home")" data-request-url2="@Url.Action("Driving", "Home")">

Is this right, or I can do it in other way?

Answer 1

It's good to use data-* attributes for this kind of thing. I would highly recommend avoiding generic names like data-request-url in favor of something more explicit. You are generating two different heat maps:

1. Stops
2. Driving

This feels like two explicitly named attributes would be better:

<div id="map"
     data-heatmap-stops-url="@Url.Action(...)"
     data-heatmap-driving-url="@Url.Action(...)">
</div>

Now looking at your HTML source code will give you a better idea about what these custom attributes mean.

Cleaning up repetitive code

The code to get the map points between the stops and driving points is very similar. In fact, there are only two differences:

1. The URL
2. The property within the response used to render the heat map

Consider pulling this out into its own method, and parameterizing it:

function getHeatmapData(url, propertyName) {
    $.getJSON(url,
        function (data) {
            var marker = [];

            $.each(data,
                function (i, item) {
                    marker.push({
                        'location': new google.maps.LatLng(item.Latitude2, item.Longitude2),
                        'map': map,
                        'weight': item[propertyName],
                        'radius': 10
                    });
                });
            var pointArray = new google.maps.MVCArray(marker);

            heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            heatmap.setMap(map);
        });
}

Then the getStops and getDriving methods are much shorter:

function getStops() {
    var url = $('#map').data('heatmap-stops-url');

    getHeatmapData(url, "Stops");
}

function getDriving() {
    var url = $('#map').data('heatmap-driving');

    getHeatmapData(url, "Speed");
}

Just plain getting crazy

You could utilize a function closure and import only the symbols you need, throw in a 'use strict'; directive.

This will:

1. Give you bragging rights because you used 'use strict';. There are other benefits, but from the standpoint of your script it basically does nothing. Bragging right. That's it.

2. Remove the need for fully qualified class names like google.map.x.Foo.

3. Allow your code to function even if some other JavaScript library defines a $ function

(function ($, MVCArray, HeatmapLayer, LatLng) {
    'use strict';

    function getHeatmapData(url, propertyName) {
        $.getJSON(url,
            function (data) {
                var marker = [];

                $.each(data,
                    function (i, item) {
                        marker.push({
                            'location': new LatLng(item.Latitude2, item.Longitude2),
                            'map': map,
                            'weight': item[propertyName],
                            'radius': 10
                        });
                    });
                var pointArray = new MVCArray(marker);

                heatmap = new HeatmapLayer({
                    data: pointArray
                });
                heatmap.setMap(map);
            });
    }


    this.getStops = function () {
        var url = $('#map').data('heatmap-stops-url');

        getHeatmapData(url, "Stops");
    }

    this.getDriving = function () {
        var url = $('#map').data('heatmap-driving');

        getHeatmapData(url, "Speed");
    }

})(this.jQuery, this.google.maps.MVCArray, this.google.maps.visualization.HeatmapLayer, this.google.maps.LatLng);

But at this point, we're really just being crazy.