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

【问题标题】：What is the correct way to create dynamic javascript in ASP.net MVC2?在 ASP.net MVC2 中创建动态 javascript 的正确方法是什么？
【发布时间】：2010-05-09 09:01:27
【问题描述】：

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

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

<%@ 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文件是否正确？

有没有更好的方法？

【问题讨论】：

标签： javascript jquery asp.net-mvc google-maps asp.net-mvc-2

【解决方案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'}));

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

【讨论】：

您认为在视图中生成数据 JSON 数组是否足够好，或者我应该以某种方式将其卸载到控制器？
在这种情况下，我更喜欢将其保留在视图中。

【解决方案2】：

它已经很漂亮了。

IMO 会做这样的事情稍微好一点：

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

在顶部，然后您的 JavaScript 将是没有嵌入 C# 内容的纯 JavaScript。

PS：您需要使用 ToJson 方法扩展 HtmlHelper 才能做到这一点。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在渲染页面时预加载数据没有任何问题（这实际上是您对循环所做的事情，也许您可以在页面中输出 json 并编写一些 javascript 来评估它（这将减少重复字符即 map.addOverlay ...) 您只需要注意模型的无约束输出，您不会希望以这种方式呈现 1 000 000 条记录

【讨论】：

【解决方案5】：

看看这个项目 (Google map control for aspnet mvc)。也许它可以帮助您创建一些包装您想要的功能的助手。

【讨论】：