在ASP.net MVC2中创建动态javascript的正确方法是什么？

我正在我的项目中创建一个GoogleMaps局部视图/用户控件，该控件传递一个包含纬度和经度值的强类型对象列表

目前，这是我的部分代码：

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

加载（“地图”，“2”）；
$（文件）.ready（初始化映射）；
函数初始化映射（）{
if（GBrowserIsCompatible（））{
var map=newgmap2（document.getElementById（'report\u map\u canvas'）；
地图设置中心（新格拉特林（51.5，-0.1167），2）；
map.addOverlay（新的GMarker（新的GLatLng（''，'），{title:'km/h'}））；
map.setUIToDefault（）；
}
}

通过在列表上循环并发出javascript，以这种方式动态创建javascript文件是否正确

---

有更好的方法吗？

在页面呈现时预加载数据没有什么错（这正是使用循环的有效方法，也许您可以在页面中输出json并编写一些javascript来评估它（这将减少重复字符，例如map.addOverlay…）

---

您只需查看模型中的无约束输出，您不希望以这种方式呈现1000000条记录

我不喜欢这种方式，因为如果您要添加许多项，您将为用户加载一个大文档。相反，我更喜欢以JSON的形式加载项，然后对它们进行迭代并使用google函数，例如：

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'}));
}

---

这将增加文档大小和页面负载

这是最漂亮的了

IMO更好的方法是这样做：

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

var位置=

在顶部，您的JavaScript将是纯JavaScript，没有嵌入C#东西

---

PS：为了做到这一点，您需要使用

ToJson

方法扩展

HtmlHelper

。

最终混合了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>

加载（“地图”，“2”）；
$（文档）.ready（初始化报表映射）；
函数initializeReportMap（）{
如果（GBrowserIsCompatible（））{
//将报告转换为JSON
风险值报告=
var map=newgmap2（document.getElementById（'report\u map\u canvas'）；
地图设置中心（新格拉特林（51.5，-0.1167），3）；
对于（变量i=0；i

看看这个项目（）。也许它可以帮助您创建一些帮助器来包装您想要的功能。

您认为在视图中生成数据JSON数组已经足够好了，还是应该以某种方式将其卸载到控制器？在这种情况下，我更愿意将其保留在视图中。

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