How to write JavaScript in .net MVC5 controller

Question

I am new with MVC so forgive my ignorance. What I have is a Google maps script, which will dynamically change the marker location based on user page. In web forms I can write the script in code behind like so:

protected void maps_wrapper_Init(object sender, EventArgs e)
    {

        maps_wrapper.Text = "<script> " +
        "function initialize() {" +
          "var mapOptions = {" +
            "zoom: 12," +
            "center: new google.maps.LatLng(-25.363882, 131.044922)," +
            "mapTypeId: google.maps.MapTypeId.SATELLITE" +
          "};" +

          "var map = new google.maps.Map(document.getElementById('map-canvas')," +
             " mapOptions);" +

          "var image = 'img/mapMarker.png';" +
          "var marker = new google.maps.Marker({" +
            "position: map.getCenter()," +
            "map: map," +
            "title: 'Click to zoom'," +
            "icon: image" +
          "}); " +

          "google.maps.event.addListener(map, 'center_changed', function() {" +
            "window.setTimeout(function() {" +
              "map.panTo(marker.getPosition());" +
            "}, 3000);" +
          "});" +

          "google.maps.event.addListener(marker, 'click', function() {" +
            "map.setZoom(18);" +
            "map.setCenter(marker.getPosition());" +
          "});" +
        "}" +

        "google.maps.event.addDomListener(window, 'load', initialize);" +
        "</script> ";


    }

and call it with a label

<asp:Label runat="server" ID="map_wrapper" OnInit="search_wrapper_Init" />

How would you do this equivalent in MVC?

Or am I heading in completely the wrong direction?

Answer 1

You don't put the script in your controller. JavaScript is client-side code, you put it in your view.

<script type="text/javascript">
    function initialize() {
      var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(-25.363882, 131.044922),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };

    // etc.

</script>

Or perhaps in its own .js file referenced by your view, or included in a script bundle which the view uses.

(It really shouldn't have been in the code-behind in Web Forms, it should have been on the page. Or in a .js file referenced by the page.)

Answer 2

Actually, this is a valid question when you want to create dynamic Javascripts and send to client side. For instance, when you want to pass on your ViewModel-specific data to client side without editing each view for ViewModel-specific data.

There are several ways to do this. Here is the easiest way. Using ViewBag's dynamic property and add your javascript on the server side and retrieve it on the client side (or your view file). The following is the code:

In your Controller method, set:

Viewbag.clientside_js="<script type=\"text/javascript\"> Your Javascript here </script>";

On your View file, insert the following line:

@Html.Raw(ViewBag.clientside_js)

That's it. Of course, you can achieve the same by using JavaScriptSerializer().Serialize() as well.