什麼是在ASP.net MVC2中創建動態javascript的正確方法？

Question

我在我的項目中創建了一個Google地圖部分視圖/用戶控件，該控件傳遞了包含緯度和經度值的強類型對象列表。

目前，這是我的代碼有部分：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Project.Models.Entities.Location>>" %> 
<!-- Place for google to put the map --> 
<div id="report_map_canvas" style="width: 100%; height: 728px; margin-bottom: 2px;"> 
</div> 

<script type='text/javascript'>  
google.load("maps", "2"); 
$(document).ready(initializeMap); 

function initializeMap() { 
    if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById('report_map_canvas')); 
     map.setCenter(new GLatLng(51.5, -0.1167), 2); 
     <% foreach (var item in Model) { %> 
     map.addOverlay(new GMarker(new GLatLng('<%= Html.Encode(item.latitude)%>','<%= Html.Encode(item.longitude)%>'),{ title: '<%= Html.Encode(String.Format("{0:F}",item.speed)) %> km/h '})); 
     <% } %> 
     map.setUIToDefault(); 
    } 
} 
</script> 

那麼，是否可以動態創建JavaScript文件這樣通過遍歷列表，併發射的JavaScript？

有沒有更好的方法來做到這一點？

Answer 1

我不喜歡這種方式，因爲如果你有很多要添加的項目將爲用戶加載大文檔，而我更願意將項目加載爲JSON，然後迭代它們並使用谷歌功能，例如：

var data = [<%="{x:50.44444,y:30.44444,speed:50},..." %>] // generate you JSON Here as array 

for(var i = 0; i < data.length; i++){ 
map.addOverlay(new GMarker(new GLatLng(data[i].y,data[i].x),{ title: data[i].speed + 'Km/h'})); 
} 

這樣你就不會重複這部分

map.addOverlay(new GMarker(new GLatLng(,),{ title: + 'Km/h'})); 

這將增加文件大小和頁面加載

Answer 2

Theres沒有錯誤的預載你的數據與你的頁面渲染（這是有效的你在做什麼循環，也許你可以輸出json在你的頁面，並寫一些javascript來評估它（這將削減repedative charaters ie map.addOverlay ...） 你只需要尋找你的模型的無約束輸出，你不想要這樣呈現1 000 000條記錄

Answer 3

這是關於一樣漂亮，因爲它得到。

稍微更好的辦法國際海事組織將做這樣的事情：

var locations = <%= Html.ToJson(Model) %> 

在頂部，然後你的JavaScript將沒有嵌入式C＃的東西純JavaScript。

PS：爲了做到這一點，您需要使用ToJson方法擴展HtmlHelper。

Answer 4

最終混合了Kronass和mookid的答案。

下面是引用最終代碼：

public static class MvcViewExtensions 
{ 
    public static string ToJson(this System.Web.Mvc.HtmlHelper helper, object obj) { 
     JavaScriptSerializer serializer = new JavaScriptSerializer(); 
     return serializer.Serialize(obj); 
    } 
} 

並在視圖的JavaScript：

<script type='text/javascript'>  
google.load("maps", "2"); 
$(document).ready(initializeReportMap); 

function initializeReportMap() {  
    if (GBrowserIsCompatible()) {  
     // Convert the reports to JSON 
     var reports = <%= Html.ToJson(Model) %> 
     var map = new GMap2(document.getElementById('report_map_canvas')); 
     map.setCenter(new GLatLng(51.5, -0.1167), 3); 
     for(var i = 0; i < reports.length; i++){ 
      map.addOverlay(new GMarker(new GLatLng(reports[i].latitude,reports[i].longitude),{ title: reports[i].speed + 'Km/h'})); 
     } 
     map.setUIToDefault(); 
    } 
} 
</script> 

Answer 5

看看這個項目（Google map control for aspnet mvc）。也許它可以幫助你創建一個包裝你想要的功能的助手。