0

データをホストする Web サービスに付随する Web ページを作成しています。Web ページは Microsoft WebMatrix で開始されました。カミソリでcshtmlファイルを使用しますが、MVCではありません（私が理解している限り）。

cshtml、javascript、または ajax の経験がありません。実際、私はチーム メンバーのコードを修正しようとしているだけです。なぜなら、彼らは一般的なプログラミングの経験がさらに少ないからです。最長で 6 ～ 7 日以内になんらかの解決策を用意する必要があるため、いじって慣れる時間はありません。

オーバーレイ付きの Google マップ マップの表示についてサポートが必要です。オーバーレイは、ボタンをクリックすると更新されます。

オーバーレイで適切な種類のマーカーを形成するための情報は、C# で記述された SOAP ベースの Web サービスを介して提供する必要があります。これは、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はクライアント側で実行されるため、これは機能しません。

まず第一に：私は正しい軌道に乗っていますか？そうでない場合、代わりに何をすべきですか？

正しい方向に進んでいる場合: データを 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