0

次の Web サービスが動作しています。

[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public List<ServerRoomDisplay> GetData(List<string> urls)
{
List<ServerRoomDisplay> returnList = new List<ServerRoomDisplay>();
foreach (var uri in urls)
{
    XDocument xdoc = XDocument.Load(uri);
    IEnumerable<XElement> serv = xdoc.Elements();

    string ur = "";
    string room = "";
    string temp = "";
    string hum = "";
    string dew = "";
    foreach (var ser in serv)
    {
        room = ser.Attribute("host").Value;
        ur = "http://" + ser.Attribute("address");
        temp = ser.Descendants("devices").Descendants("device").Descendants("field").Where(x => (string)x.Attribute("key").Value == "Temp").FirstOrDefault().Attribute("value").Value.ToString();
        hum = ser.Descendants("devices").Descendants("device").Descendants("field").Where(x => (string)x.Attribute("key").Value == "Humidity").FirstOrDefault().Attribute("value").Value.ToString();
        dew = ser.Descendants("devices").Descendants("device").Descendants("field").Where(x => (string)x.Attribute("key").Value == "Dewpt").FirstOrDefault().Attribute("value").Value.ToString();
        returnList.Add(new ServerRoomDisplay
            {
                RoomName = room,
                Url = ur,
                Temperature = temp,
                Humidity = hum,
                DewPoint = dew,
            });             
    }
}
return returnList;
}

次に、ajax 呼び出しを介してパラメーターを渡します。このメソッドは、div 内のデータを更新するために再帰的に実行されることに注意してください... eTrade の株式ティッカーなどのように。

(function poll() {
        var pageUrl = '<%=ResolveUrl("~/Reporting/GetXMLData.asmx")%>'
        var urls = ["http://aaa/data.xml", "http://bbb/data.xml", "http://ccc/data.xml"];
        var jsonText = JSON.stringify({ urls: urls });
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: pageUrl + "/GetData",
            data: jsonText,
            success: function (msg) {
                var res = msg.d;
                $.each(res, function (i, item) {
                    $('#<%=lblOutput.ClientID%>').html(res[i].RoomName);
                });
            },
            dataType: "json",
            complete: poll,
            timeout: 3000
        });
    })();

次に、次の応答が生成されます。

[{"__type":"ServerRoomDisplay",
 "Url":"http://address=\"aaa\"",
 "RoomName":"aaa MDF Room 500",
 "Temperature":"74.99",
 "Humidity":"38",
 "DewPoint":"47.65",
 "AlarmOne":null,
 "AlarmTwo":null,
 "AlarmThree":null,
 "AlarmFour":null
 },
 {"__type":"ServerRoomDisplay",
 "Url":"http://address=\"bbb\"",
 "RoomName":"bbb Room 298",
 "Temperature":"77.73",
 "Humidity":"39",
 "DewPoint":"50.79",
 "AlarmOne":null,
 "AlarmTwo":null,
 "AlarmThree":null,
 "AlarmFour":null
 },
 {"__type":"ServerRoomDisplay",
 "Url":"http://address=\"ccc\"",
 "RoomName":"ccc Room 601",
 "Temperature":"75.32",
 "Humidity":"49",
 "DewPoint":"54.83",
 "AlarmOne":null,
 "AlarmTwo":null,
 "AlarmThree":null,
 "AlarmFour":null
 }];

ご覧のとおり、json 応答で返される 3 つの完全なオブジェクトです。次に、データを配置する出力 div があります

<div>
    <asp:Label ID="lblOutput" runat="server" />
</div>

上記のjqueryから、「RoomName」のみをdivにリストしようとしてテストしています。私がそうすると、「ccc Room 601」である最後のアイテムのみが印刷され、それがdiv内の唯一のものです。

すべてのオブジェクトを一覧表示し、変更されたデータのみを更新できるように誰か助けてもらえますか? 基本的に、lblOutput を再度書き直して、温度、湿度、および露点情報のみを変更する必要があります。ただし、3 つのオブジェクトすべてを出力する必要があります。つまり、次のようになるはずです (現時点では RoomName のみ)。

aaa MDF Room 500
bbb Room 298
ccc Room 601

これで十分に説明できたと思います。前もって感謝します。

4

3 に答える 3

3

すべての新しい html を単一の文字列に連結し、一度に追加する必要があります。

        success: function (msg) {
            var res = msg.d;
            var outhtml = "";
            $.each(res, function (i, item) {
                outhtml+=res[i].RoomName;
            });
            $('#<%=lblOutput.ClientID%>').html(outhtml);
        },

現在の方法では、反復ごとに出力 div の html コンテンツを上書きするだけです。これが、最後の反復のみが最後に表示される理由です。

于 2013-10-02T20:34:52.557 に答える
1

あなたが間違っていることを言っている2つの答えですが、私はあなたにもっと簡単な方法を示す機会を得ます:

JsRender の使用: http://www.jsviews.com/#home

ページ内 (または外部ファイル経由) で、JsRender ファイルが既に読み込まれている場合:

<script id="serversTemplate" type="text/x-jsrender">
    <li>
        <h3><a href="{{:Url}}" target"_blank">{{:RoomName}}</a></h3>
        <ul>
            <li>{{:Temperature}}<span>Temperature</span></li>
            <li>{{:Humidity}}<span>Humidity</span></li>
            <li>{{:DewPoint}}<span>DewPoint</span></li>
            <li>...</li>
        </ul>
    </li>
</script>

ASP.NET コントロールをドロップして、次のようなものがあると仮定します。

<ul id="lblOutput"></ul>

ajaxsuccess呼び出しは次のようになります。

success: function (msg) {
    $("#lblOutput").html(
        $("#serversTemplate").render(msg.d);
    );
}

JsBin での ajax 呼び出しのない単純なデモ: http://jsbin.com/aPILewe/1/

コメントから、小さな更新

<li class="{{if Temperature < 75}}good{{else}}bad{{/if}}">

デモは現在http://jsbin.com/aPILewe/2/にあります。

于 2013-10-02T20:52:44.147 に答える