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?

David · Accepted Answer · 2015-03-19 23:50:05Z

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.)

edited Mar 19, 2015 at 23:50

answered Mar 19, 2015 at 23:42

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

helmbert · Accepted Answer · 2015-06-20 12:16:47Z

0

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.

edited Jun 20, 2015 at 12:16

helmbert

38.5k13 gold badges92 silver badges101 bronze badges

answered Jun 20, 2015 at 11:42

James Xie

11 silver badge

Collectives™ on Stack Overflow

How to write JavaScript in .net MVC5 controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related