如何在.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()實現相同的目的。