如何在.net MVC5控制器中编写JavaScript

Question

我是MVC的新手，所以请原谅我的无知。 我所拥有的是一个Google Maps脚本，它将根据用户页面动态更改标记位置。 在Web表单中，我可以用下面的代码编写脚本，如下所示：

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> ";


    }

并用标签称呼它

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

您将如何在MVC中做到这一点？

还是我朝着完全错误的方向前进？

Answer 1

您无需将脚本放入控制器中。 JavaScript是客户端代码，您将其放在视图中。

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

或在视图引用的自己的.js文件中，或包含在视图使用的脚本包中。

（它实际上不应该在Web窗体的代码隐藏中，它应该在页面上。或者在页面引用的.js文件中。）

Answer 2

实际上，当您要创建动态Javascript并将其发送到客户端时，这是一个有效的问题。 例如，当您希望将特定于ViewModel的数据传递给客户端时，无需为特定于ViewModel的数据编辑每个视图。

有几种方法可以做到这一点。 这是最简单的方法。 使用ViewBag的dynamic属性，然后在服务器端添加您的JavaScript，然后在客户端（或您的视图文件）中检索它。 以下是代码：

在您的Controller方法中，设置：

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

在您的View文件上，插入以下行：

@Html.Raw(ViewBag.clientside_js)

而已。 当然，您也可以通过使用JavaScriptSerializer().Serialize()实现相同的目的。