Question

我是MVC的新手，请原谅我的无知。我所拥有的是Google地图脚本，它将根据用户页面动态更改标记位置。在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

实际上，当您想要创建动态Javascripts并发送到客户端时，这是一个有效的问题。例如，当您想要将ViewModel特定数据传递到客户端而不编辑ViewModel特定数据的每个视图时。

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

在您的Controller方法中，设置：

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

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

@Html.Raw(ViewBag.clientside_js)

就是这样。当然，您也可以使用JavaScriptSerializer().Serialize()来实现相同目标。

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

2 个答案: