0

我们正在构建一个网页来配合托管一些数据的网络服务。该网页已在 Microsoft WebMatrix 中启动。它使用带有剃刀的cshtml文件，但不是MVC（据我了解）。

我没有使用 cshtml、javascript 或 ajax 的经验。实际上，我只是想修复我的团队成员的代码，因为他们的一般编程经验更少。我们必须在最多 6 到 7 天内找到某种解决方案，所以没有时间玩耍和习惯。

我需要帮助显示带有叠加层的 Google Maps 地图。覆盖应在单击按钮时更新。

必须通过用 C# 编写的基于 SOAP 的 Web 服务来提供在叠加层中形成正确类型标记的信息。它通过网络参考包含在内。

该 Web 服务中的方法为我们提供了一个特殊数据类型的数组，该数据类型是通过 Web 服务本身中的 DataContract 提供的。我们必须遍历这个数组来获取我们需要的信息。每个数组单元包含纬度、经度和某个 int 值（除其他内容外）。

现在我有一个这样的按钮（请告诉我更好的方法）

<button type="button" onclick="@{table = VisuTable.demandTestData(*INPUT*);}, javascript:refreshOverlay() ">
  <span style="color: #37439c;">
    Refresh
  </span>
</button>

table 是页面上存在的变量。这样，我希望在按下按钮时始终获取最新数据并用它刷新覆盖。

这是我现在位于 - 部分的 refreshOverlay 功能：

function refreshOverlay() {

        @for (var i = 0; i < table.Length; i++)

        {
        <text>
        var Cityfor = new google.maps.LatLng(@(table[i].Latitude),@(table[i].Longitude));
        var strengthfor = @(table[i].GsmSignalStrength);


        var myCity = new google.maps.Circle({
        center: Cityfor,
        radius: 100,
        strokeColor: "#00000",
        strokeOpacity: 1,
        strokeWeight: 2,
        fillColor: strengthtocolor(strengthfor),
        fillOpacity: 0.8});
        </text>
        }
    }

}

这不起作用，因为 javascript 是在客户端执行的，而 razor-code 中的变量“table”是基于服务器的。

首先：我在正确的轨道上吗？如果没有，我应该怎么做？

如果我在正确的轨道上：如何将我的数据输入 javascript？我听说 AJAX 能够做到这一点，但我完全不知道它是如何工作的。

请帮我。

此外，根据 Nick 的要求，完整的代码没有一些冗长、无趣的部分。

@using XMapService;
@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";
    string manutemp="";
    MeasuredDataTable[] table;
    string[] providers = {};
    string[] devices = {};
    byte[] networkTypes = {};
    int tableLength = 0;
    string provi;
    string manufacs;
    string modelle;
    float long1;
    float long2;
    float lat1;
    float lat2;
    int year1 = 2013;
    int year2 = 2013;
    int month1;
    int month2;
    int day1;
    int day2;
    int hour1;
    int hour2;
    int minutes1 = 0;
    int minutes2 = 0;
}




@section featured {

<section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@Page.Title.</h1>
             <h2>Hello, <a class="email" href="~/Account/Manage" title="Manage">@Authentication.CurrentUserName</a>!
                                <form id="logoutForm" action="~/Account/Logout" method="post">
                                    @AntiForgery.GetHtml()</h2></form>

        </hgroup>
     </div>
</section>
}

@if (Authentication.IsAuthenticated) {

<nav>
 <ul id="menu">
    <li><a href="~/Graph">Graph</a></li>
    <li><a href="~/Tabelle">Tabelle</a></li>
 </ul>
</nav>


<body>

<table> 
<tr>

<th>
    &nbsp
<h3>Provider</h3>
&nbsp
    <form name="provform" method="post">
        <select onchange="provi=this.form.provlist.options[this.form.provlist.selectedIndex].value" name="provlist" size="5" multiple>
            @{string[][] provider = Visualization.demandProvider();
              int n = provider.Length;}
            @for(int i=0; i<n; i++) {
            <option value="@provider[i][1]">@provider[i][1]</option>
            }
        </select>
    </form>
&nbsp
</th> 
    <th>&nbsp</th>
    <th>&nbsp</th>
    <th>&nbsp</th>
    <th>
&nbsp
<h3>Hersteller</h3>
&nbsp
    <form name="manuform" method="post">

        <select onchange="manufacs=this.form.manulist.options[this.form.manulist.selectedIndex].value" name="manulist" size="5" multiple>
            @{string[] device = Visualization.demandManufactorer();
              int m = device.Length;
              //
              }

              @for(int i=0; i<m; i++) {
            <option value="@device[i]">@device[i]</option>
            }
        </select>
    </form>
&nbsp

</th>

    <th>&nbsp </th>
    <th>&nbsp </th>
<th>&nbsp </th>

        <th>


   <h3>Modelle</h3>    
            &nbsp   
   <form name="modelform" method="post">
        <select onchange="modelle=this.form.modellist.options[this.form.modellist.selectedIndex].value" name="modellist" size="5" multiple>
            @for(int i=0; i<m; i++) {


                 <optgroup label="@device[i]" >
                 @{String[] mod = {device[i]};
                   String[][] models = Visualization.demandModels(mod);
                   int l = models.Length;
                 }
                 @for(int j=0; j<l; j++){
                    <option value="@models[j][1]">@models[j][1]</option>}
                 </optgroup> }

            }


        </select>
    </form>

</th> 


<th></th>
<th>&nbsp </th> 



<td>
<h4>Koordinaten</h4>
<input name="Längendgrad1" onchange="long1=this.value" type="text" width="1"  value="Längendgrad1">
<input name="Längendgrad2" onchange="long2=this.value"type="text" size="10" maxlength="15" value="Längendgrad2">
<input name="Breitengrad1" onchange="lat1=this.value"type="text" size="10" maxlength="15" value="Breitengrad1">
<input name="Breitengrad2" onchange="lat2=this.value"type="text" size="10" maxlength="15" value="Breitengrad2"></td>



    <th>&nbsp </th> 
    <th>&nbsp</th>

    <th>*DECLARATIONS OF FIELDS TO CHOOSE DATE AND TIME*<th>

  <button type="button" onclick="@{table = VisuTable.demandTestData(*INPUT*);}, javascript:refreshOverlay() ">
      <span style="color: #37439c;">
        Refresh
      </span>
    </button>
</th>


*BUTTON TRIES*   

<th><button type="button" onclick="alert(provi+manufacs+modelle+long1+long2+lat1+lat2), @{table = VisuTable.demandTestData(from,to,provi,modelle,networkTypes,long1,long2,lat1,lat2,Authentication.CurrentUserName,true); }, javascript:refreshOverlay() "><span style="color: #37439c;">Refresh</span></button></th>



@*<th><button type="button" onclick="@{table = VisuTable.demandTestData(new DateTime(), new DateTime(), providers, devices, networkTypes, (float)0.0, (float)0.0, (float)0.0, (float)0.0, 1, true); tableLength = table.Length;}"><span style="color: #37439c;">Refresh</span></button></th>*@


*/BUTTON TRIES*
</tr>
</table>


</body>








    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=*************************************&sensor=false">
    </script>

    <script type="text/javascript">

    var City = new google.maps.LatLng(52.27445232932608, 10.527868866920471);
    var strength = (-113);

          function strengthtocolor(strength) {

            switch (strength) {

                *DEFINING COLORS FOR OVERLAY*
            }
            return color;
        }

        var map;

    function initialize() {
        var mapProp = {
            center: City,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("googleMap"), mapProp);   



*TEST CODE*
        /*
        for(var i=-7;i<7;i++){

        var Cityfor = new google.maps.LatLng(52.27445232932608 + 0.01 *i, 10.527868866920471- 0.01 * i);
        var strengthfor = (-113 + 4 * (i+7));

         var myCity = new google.maps.Circle({
            center: Cityfor,
            radius: 100,
            strokeColor: "#00000", //hier kommt noch ne funktion für den Rand hin
            strokeOpacity: 1,
            strokeWeight: 2,
            fillColor: strengthtocolor(strengthfor), //für innere Farbe
            fillOpacity: 0.8,
        });
        */
*/TEST CODE*


        myCity.setMap(map);
    };



    google.maps.event.addDomListener(window, 'load', initialize);

    </script>




    function refreshOverlay() {

            @for (var i = 0; i < table.Length; i++)

            {
                <script type="text/javascript">
            <text>
            var Cityfor = new google.maps.LatLng(@(table[i].Latitude),@(table[i].Longitude));
            var strengthfor = @(table[i].GsmSignalStrength);


            var myCity = new google.maps.Circle({
            center: Cityfor,
            radius: 100,
            strokeColor: "#00000", //hier kommt noch ne funktion für den Rand hin
            strokeOpacity: 1,
            strokeWeight: 2,
            fillColor: strengthtocolor(strengthfor), //für innere Farbe
            fillOpacity: 0.8});
            </text>
                </script>
            }
        }

    }

</script>



    <div id="googleMap" style="width: 700px; height: 380px;">
    </div>




}
else
{


    <h3>
        Erst einmal einloggen...
    </h3>

}

我知道，这是一些乱七八糟的垃圾。如果我知道我在做什么，我就不需要帮助了。

4

0 回答 0