2013-05-04 100 views
1

我正在构建一个asp.net MVC 3应用程序。我有一个存储数据的SQL Server数据库,我使用实体框架中的架构优先模型。我知道如何从数据库中获取数据,但是对于MVC我还是比较新的,我不知道从存储在我的数据库中的坐标向地图添加图钉的人。任何人都可以通过举例来帮助我。在ASP.net中添加图钉到bing地图视图MVC3

预先感谢您

+0

你打算与阿贾克斯7.0 HTTP做到这一点:?//msdn.microsoft.com/en-us/library/gg427604.aspx – clamchoda 2013-08-16 19:24:37

+0

是我。任何使用它的经验?以及我能够完成任务的任何版本的Ajax都非常好。 – 2013-08-21 14:22:43

回答

2

首先,你需要一些服务器端代码到你的脚的数据加载到从SqlServer的。

在你的c#代码后面,你可以在Page_Load中填入一些pin纬度/经度变量,以便在你的javacsript端使用。

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Script.Serialization; 
public partial class _Default : System.Web.UI.Page 
{ 
    protected string[] pinLat; 
    protected string[] pinLong; 

    public static class JavaScript 
    { 
     public static string Serialize(object o) 
     { 
      JavaScriptSerializer js = new JavaScriptSerializer(); 
      return js.Serialize(o); 
     } 
    } 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     // Populate your latiude and longitude from SQL Server into our arrays to be used in javascript 
     pinLat = new string[3] { "55.342575", "15.342575", "25.342575" }; 
     pinLong = new string[3] { "-55.342570", "-55.342570", "-55.342570" }; 
    } 
} 

使用JavaScript.Serialize,请通过Brian提供通过每个到c#阵列JavaScript数组和循环转换和将其固定在地图。

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
<script type="text/javascript" language="javascript"> 

    // Serialize our c# array into javascript array 
    var pinLatitude = <%=JavaScript.Serialize(this.pinLat) %>; 
    var pinLogitude = <%=JavaScript.Serialize(this.pinLong) %>; 


     function loadPins() { 
       try { 
        for (var i = 0; i < pinLatitude.length; i++) { 

         var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(pinLatitude[i], pinLogitude[i]),{ draggable: true }); 
         pushpin.setOptions({ visible: true }); 
         map.entities.push(pushpin); 

        } 
       } 
       catch (err) { 
       alert(err) 
       } 
      } 

    function GetMap() { 
       // Initialize the map 
       try { 
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: 'heyhey', mapTypeId: Microsoft.Maps.MapTypeId.road }); 
        loadPins(); 
       } 
       catch (err) { 
        alert(err.message); 
       } 
      } 


</script> 
</asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <body onload="GetMap();"> 
     <div id='mapDiv' style="position:relative; width:750px; height:500px;"></div> 
    </body> 
</asp:Content> 
+0

非常感谢你 – 2013-08-22 16:57:18

+0

@OrvillePatterson随时! – clamchoda 2013-08-22 18:07:40