Forum: AJAX |
Thema:
AW: AW: AW: Artikel aus der ASP.Net Proffesional |
Von:
Thomas Jäger (
08.02.2008 14:54) |
Wäre nett Deine Lösung mal komplett zu sehen! Ich habe es inzwischen mit der JSON - Variante wie folgt gelöst:
Plzservice.asmx.vb:
===================
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class PLZService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetOrtByPlz(ByVal CountryCode As String, ByVal Plz As String) As String
If CountryCode = "" Then CountryCode = "DE"
Dim strSearch As String = "http://ws.geonames.org/postalCodeLookupJSON?postalcode=" & Plz & "&country=" & CountryCode & "&style=SHORT"
Dim request As WebRequest = WebRequest.Create(strSearch)
' Get the response.
Dim response As HttpWebResponse = CType(request.GetResponse(), HttpWebResponse)
' Get the stream containing content returned by the server.
Dim dataStream As Stream = response.GetResponseStream()
' Open the stream using a StreamReader for easy access.
Dim reader As New StreamReader(dataStream)
' Read the content.
Dim responseFromServer As String = reader.ReadToEnd()
reader.Close()
dataStream.Close()
response.Close()
Return responseFromServer
End Function
Geonamestest.aspx:
==================
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="geonamestest.aspx.vb" Inherits="geonamestest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Unbenannte Seite</title>
<style>
#suggestBoxElement {border: 1px solid #8FABFF; visibility:hidden; text-align: left; white-space: nowrap; background-color: #eeeeee;}
.suggestions { font-size: 14;background-color: #eeeeee; }
.suggestionMouseOver { font-size: 14;background: #3333ff; color: white; }
</style>
<script language="javascript" type="text/javascript">
// Globale Variable postalcodes wird gefüllt nach JSON callback und
// wird verwendet zum generieren des HTMLs der SuggestBox und deren Maus-Event-Handlern
var postalcodes;
// Hier erfolgt der eigentliche Aufruf des WebServices
// Bis Ergebnisse eintreffen, wird eine kleine Meldung angeziegt
function LookupOrt() {
document.getElementById('suggestBoxElement').style.visibility = 'visible';
document.getElementById('suggestBoxElement').innerHTML = '<small><i>Suche Ort(e) ...</i></small>';
result = PLZService.GetOrtByPlz("", document.getElementById("TBPlz").value, onComplete, onTimeOut, onError);
}
// der WebService-Aufruf war erfolgreich und die Daten
// leigene als Jason-String vor
function onComplete(result)
{
// JSON-Data-Object initialisieren
var jData = eval("(" + result + ")")
// jData sollte nun ein Array mit postalcode Objekten enthalten, ansonsten ist
// etwas schiefgelaufen und es wird abgebrochen
if (jData == null) { return; }
// Ortsnamenarray in 'postalcodes' ablegen um es für die MouseEvents verfügbar zu machen
postalcodes = jData.postalcodes;
if (postalcodes.length > 1)
{
// Wenn mehrere Orte gefunden wurden, muss die SuggestBox sichtbar gemacht
// und gefüllt werden
document.getElementById('suggestBoxElement').style.visibility = 'visible';
var suggestBoxHTML = '';
// Suggestbox Inhalt aufbereiten
for (i=0;i< jData.postalcodes.length;i++)
{
// - für jeden Postalcodeeintrag ein html_div erzeugen
// - jedes div bekommt eine id anhand des array index für spätere Zugriffe
// - definition der Mauseventhandlers zum markieren des ausgewählten Ortes bei mouseover
// und zum selektieren enes Ortes beim Anklicken
// - alle Events erhalten den postalcode - Arrayindex als Inputparameter
suggestBoxHTML += "<div class='suggestions' id='pcId" + i + "' onmousedown='suggestBoxMouseDown(" + i +")' onmouseover='suggestBoxMouseOver(" + i +")' onmouseout='suggestBoxMouseOut(" + i +")'> " + postalcodes[i].postalcode + ' ' + postalcodes[i].placeName +'</div>';
}
// Wartemeldung ausblenden und Suggestbox mit Ortsnamen füllen
document.getElementById('suggestBoxElement').innerHTML = suggestBoxHTML;
}
else
{
if (postalcodes.length == 1)
{
// Falls nur ein Ort gefunden wurde, die Textbox
// direkt ausfüllen, Suggestbox Anzeige wird nicht benötigt!
var placeInput = document.getElementById("TBOrt");
placeInput.value = postalcodes[0].placeName;
}
closeSuggestBox();
}
}
function onTimeOut() {
//alert("TimeOut!");
closeSuggestBox();
}
function onError() {
//alert("Error!");
closeSuggestBox();
}
function closeSuggestBox() {
document.getElementById('suggestBoxElement').innerHTML = '';
document.getElementById('suggestBoxElement').style.visibility = 'hidden';
}
// Ortsname wurde in der SuggestBox angeklickt
function suggestBoxMouseDown(obj) {
closeSuggestBox();
var placeInput = document.getElementById("TBOrt");
placeInput.value = postalcodes[obj].placeName;
}
// css für Mauseover event festlegen
function suggestBoxMouseOver(obj) {
document.getElementById('pcId'+ obj).className = 'suggestionMouseOver';
}
// css zuücksetzen bei Mouseout event
function suggestBoxMouseOut(obj) {
document.getElementById('pcId'+ obj).className = 'suggestions';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="PLZService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<div>
<asp:Label ID="Label4" runat="server" AssociatedControlID="TBPlz" CssClass="label" >Plz - Ort:</asp:Label>
<asp:TextBox ID="TBPlz" runat="server" CssClass="txt" Width="40" MaxLength="5" Onblur="LookupOrt();" ></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="ftbe1" runat="server" TargetControlID="TBPlz" FilterType="Numbers" />
<div style="position: relative; z-index: 10000; display:inline;" >
<asp:TextBox ID="TBOrt" runat="server" CssClass="txt" Width="140" onblur="closeSuggestBox();" ></asp:TextBox>
<span style="position: absolute; top: 20px; left: 0px; z-index:10000;visibility: hidden;" id="suggestBoxElement"></span>
</div>
</div>
</div>
</form>
</body>
</html>
MfG, Thomas
Betreff |
Von |
Datum |
|
|
AW: AW: AW: AW: Artikel aus der ASP.Net Proffesional
Hallo Thomas,<br>ich war da nicht so elegant :-( sondern habe es direkt in die Seite gebaut mit einem VB Cod:<br>Default.aspx:<br>-------------------------<br><%@ Page Language="VB" AutoEventWireup="true"... |
|
|
|
|
|
Thomas
Scherner
|
13.02.2008 11:57 |
|
|
Antworten
Vorsicht bei der Eingabe: Die Zeichen ' oder -- sind nicht erlaubt!