Die USTID mit JavaScript und Webforms automatisieren

Die EU wird aktuell (DSVGO oder GDPR) viel gescholten. Ein positiver Aspekt unserer Gemeinschaft ist, das der Handel zwischen Mitgliedsländern einfacher von statten geht, sofern man eine gültige USTID (Umsatzsteuer Identifikation) auf beiden Seiten besitzt. Lieferant kann so innergemeinschaftlich ohne den müßigen Vorsteuerabzug bzw. Einzug liefern. Diese ID wird vom Finanzamt vergeben und muss tagesaktuell geprüft werden, wofür ein EU Portal genannt VIES kostenfrei, bereit steht. Es gibt dort auch einen Webservice mit gutem alten SOAP Ansatz. Etwas was man sich mit JavaScript nicht antun will, um die Client Validierung auszuführen. Entsprechend beinhaltet die ASP.NET Lösung folgende Aufgaben ASP.NET Formular zur Eingabe der ID JavaScript Funktion für Lostfocus und Ajax Call ASP.NET Service der den SOAP Call kapselt JavaScript + Bootstrap um den Erfolg zu visualisieren Web Service hinzufügen Früher, da waren Webservices etwas sehr fixes und definierten die Verbindlichkeit (Contract) per Interface. Entsprechend lassen sich Proxy Klassen per Visual Studio –Add Service Reference- generieren, die als Zugriffsobjekte dienen. Dies allerdings nur wenn der Service per WSDL sich selbst beschreiben kann. Im Visual Studio Web Projekt werden so Verzeichnisse und Dateien angelegt, von denen man die Finger lassen sollte. Der Wizard macht schon. Ab in den Code. Mein Ziel ist ein Service der einen Service kapselt. Da wir nur true oder false auf die Frage “Ustid korrekt”, reicht es eine ASPX Webforms Seite anzulegen. Diese wird bis auf zwei Zeilen komplett geleert. Dies hat noch einen weiteren dramatischen Vorteil. 1: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="CheckUstid.aspx.vb" Inherits="CheckUstid" %> 2: <%@ OutputCache Duration="600" VaryByParam="ustid" %> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Wie der Kenner sehen kann, nutze ich hier Caching und reduziere damit die Requests zum EU Server dramatisch. In 600 Sekunden wird sich die Gültigkeit der USTID nicht ändern. Als Parameter wird der QueryString “ustid” übergeben. Im VB.NET Codebehind wird das Service Objekt instanziiert, der QueryString ausgelesen und zerlegt und dann an den EU Service per checkVat weiter gereicht. Die Rückgabe ist dann eine Zeichenkette true oder false. 1: Private Sub cachy_CheckUstid_Load(sender As Object, e As EventArgs) Handles Me.Load 2: Dim ws As New CheckVatServiceReference1.checkVatPortTypeClient 3: Dim ustid = Request.QueryString("ustid") 4: Dim isvalid As Boolean 5: Dim Name As String 6: Dim adresse As String 7: Dim land As String = Left(ustid, 2) 8: Dim id As String = ustid.Substring(2, ustid.Length - 2) 9: ws.checkVat(land, id, isvalid, Name, adresse) 10: Response.Write(isvalid) .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Im HTML Teil der ASPX Seite kommt das Bootstrap Framework in der Version 3 zum Einsatz. Um im Erfolgsfalle die Box grün und im Fehlerfall rot umrandet zu bekommen, hilft das div ustidform. Das Lostfocus Event in JavaScript nennt sich onblur. Dies sollte ausgelöst werden, wenn der Benutzer das Eingabefeld verlässt. Das kann häufiger sein, als man denkt, z.B. wenn vom Browserfenster in ein anderes Programm gewechselt wird. 1: <div id="ustidform"> 2: <label class="control-label col-md-1" for="ustid">USTID</label> 3: <div class="col-md-2"> 4: <input class="form-control" id="ustid" placeholder="Ustid" 5: onblur="CheckUSTID(this);"> 6: </div> 7: </div> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   Nun kommt der Sadomaso Teil: JavaScript. Wenn man den Code klein hält, geht das gerade noch. Um die ID eines ASP.NET Steuerelements, wie die Textbox, aus JavaScript auch sicher ansteuern zu können, hilft das Attribut ClientIDMode="Static".  Was hier nicht nötig ist, weil nur pur HTML Input Element. Der HTML Trick sind zwei CSS Klassen aus Bootstrap für Error und success. Diese werden dem DIV hinzugefügt, wenn der ASP.NET Webforms “Service” seine Antwort liefert. Das $ ist die Kurzform für die JQuery Bibliothek. 1: function CheckUSTID(input) { 2: $.ajax({ 3: url: "checkustid.aspx", 4: data: { "ustid": input.value }, 5: success: function (result) { 6: if (result == 'False') { 7: $('#ustidform').addClass("has-error"); 8: console.log("invalid ustid"); 9: } 10: else { 11: $('#ustidform').addClass("has-success"); 12: console.log("valid ustid"); 13: } 14: 15: } 16: }); 17: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } War doch nicht so schlimm. Benutzer tippt, verlässt das Feld mit Tab und tippt weiter und im Hintergrund findet die Prüfung statt, die im Erfolgsfall so aussieht oder so Dann muss die Rechnung mit MWst ausgestellt werden.

Neuerungen in jQuery 3.0

Die lang erwartete Version 3.0 ist endlich da und bringt bessere Performance, neue Features, zahlrei [Mehr]

HTML5 - Web Workers

Ich dachte mir, dass es doch keine schlechte Idee ist, euch mal einen kleinen Einblick in die Welt d [Mehr]

In SharePoint eine Spaltenüberschrift ausblenden

Über die View Einstellungen kann in SharePoint leicht eine Spalte ausgeblendet werden. Möchte man aber nur gezielt eine Spaltenüberschrift ausblenden, fehlen die Einstellungen. Allerdings ist das leicht mit ein wenig JavaScript Code zu erledigen. Zunächst müssen wir uns den Aufbau der HTML Seite ansehen. Am einfachsten ist die mit den Developertools von Google Chrome zu erledigen. Einfach die Seite im Browser laden und danach F12 drücken. Im rechten Bereich des Chrome-Fensters werden nun die Developer Tools eingeblendet, die einen “Selector” für ein HTML Element haben. (links oben im Developer Tool Fenster)   Wählt man den Selector an, kann nun mit dem Cursor ein Element innerhalb der HTML Seite ausgewählt werden. Ich möchte in diesem Beispiel die “Company” Spaltenüberschrift ausblenden. Also wähle ich die auch aus: Sobald mit diesem Tool das Element ausgewählt wurde, erscheint im Developer Tools Fenster der entsprechende HTML Code. In diesem können wir erkennen, dass die Spaltenüberschrift als <DIV> Element mit dem Namen “Company” angelegt wurde: Nachdem wir diese Informationen zusammengetragen haben, können wir das JavaScript schreiben. Wir werden die Visibility dieses DIV-Elementes auf “hidden” setzen. Der Befehl dafür: document.getElementsByName("Company")[0].style.visibility="hidden"; Die JavaScript Funktion “getElementsByName” liefert eine Collection, aller Elemente mit dem Namen “Company”. Das erste gefundene, ist das richtige DIV Element und von diesem setzen wir die “Visibility”. Allerdings dürfen wir den Befehl erst ausführen nachdem die gesamte Seite in den Browser geladen wurde. In JQuery gibt es eine Document-Ready Funktion. Wenn man jedoch innerhalb einer SharePoint Seite ist, sollte die SharePoint Funktion “_spBodyOnLoadFunctionNames” verwendet werden: _spBodyOnLoadFunctionNames.push("hideColumn"); mit dieser werden JavaScript Funktionen zu einer Aufrufliste hinzugefügt. Alle in der Liste befindlichen Funktionen werden aufgerufen, sobald die Seite fertig geladen ist. Das gesamte Script sieht dann so aus: 1 <script type="text/javascript"> 2 _spBodyOnLoadFunctionNames.push("hideColumn"); 3 function hideColumn(){ 4 document.getElementsByName("Company")[0].style.visibility="hidden"; 5 } 6 </script>   Dieses Script müssen wir nun, ohne den Zeilennummern, in die Seite einbetten, in der die Spaltenüberschriften ausgeblendet werden sollen. SharePoint bietet mit dem “Script Editor”- Webpart eine einfache Möglichkeit um Scripts in eine Seite einzubetten. Das Webpart finden sie im Bereich “Media and Content”. Fügen Sie dieses Webpart wie jedes andere in die Seite ein: Sobald das WebPart eingefügt wurde, finden sie den Link “EDIT SNIPPET”. Wenn sie darauf klicken erscheint ein Editor, in den sie das Script einfügen: Nachdem Sie die Seite gespeichert haben, wird nun bei jedem Laden der Seite das Script ausgeführt und das DIV Element mit dem Namen “Company” ausgeblendet. Das Ergebnis sieht nun wie folgt aus:

ASP.NET WebForms - Check for JavaScript

Zunächst mal ein kleines Vorwort. Natürlich unterstütz heutzutage jeder Vernünftige Browser JavaScript und erlaubt dieses auch auszuführen. Jedoch sollte man die Zahl an ‘uralt’ PC’s/Browsern oder Usern welche JavaScript von Hand deaktivieren nicht unterschätzen. Besondern sollte man sich dabei zu helfen wissen. Nun zur Lösung des Problems. Der Ansatz ist eig. schon vorhanden aber seht selbst… Einfach im Page_Load… 1: if (Request.Browser.JavaScript == false) 2: } 3: Response.Redirect("~/NoJS.aspx"); 4: } … und die Sache sollte funktionieren. Falsch gedacht. Das JavaScript Property sagt nur aus ob der Browser JavaScript unterstützt, nicht ob es erlaubt wird auszuführen. Diese Variante würde sich also nicht dazu eignen herauszufinden, ob der User das Ausführen von JS-Code von Hand deaktiviert hat. Man braucht also einen anderen Lösungsansatz… Zunächst einmal, alle Wege (oder viele davon) führen nach Rom. Einen davon werden wir im Folgenden betrachten. Ich habe mich für die URL-Parameter Variante entschieden, wobei hier natürlich der Nutzer sein Unwesen treiben kann. Dazu habe ich folgenden JavaScript Code eingefügt: 1: window.location = "/?js=true"; Dies hat zur Folge, dass ein Redirect geschieht und der entsprechende Parameter der URL hinzugefügt wird. Jetzt könnten wir zwar ganz einfach bereits herausfinden, ob der Redirect erfolgreich war oder eben nicht. Aber falls JS aktiviert ist wird nun jedes Mal beim Ausführen dieser Zeile ein Redirect durchgeführt und es entsteht eine klassische Endlosschleife :-) Um das zu verhindern fügen wir folgende Abfrage hinzu: 1: if ('<%: tokenExists()%>' == 'false') { 2: window.location = "/?js=true"; 3: } *(1) *(2) In der Methode ‘tokenExists’ welche wir hier aufrufen… 1: public bool tokenExists() 2: { 3: if (Request["js"] != null) 4: { 5: return true; 6: } 7: return false; 8: } …überprüfen liefern wir true zurück, falls der Parameter bereits gesetzt sein sollte, ansonsten false. Je nach dem was nun zurück gegeben wird und JavaScript aktiviert sein sollte wird nun erfolgt nun eben der Redirect, es wird erneut überprüft und nun wird true zurück geliefert wenn JavaScript enabled ist und andernfalls false. Nun haben wir schon mal die Überprüfung ob JavaScript enabled ist oder eben nicht, jetzt fehlt noch die Reaktion darauf. Hier auch wieder ‘alle Wege führen nach Rom’. Ob man nun ein Label einblendet mit der entsprechenden Warnung/Hinweis oder den Nutzer über ein Response.Redirect() auf eine NoneJS.aspx weiterleitet oder was auch immer ist dem Entwickler natürlich überlassen. Dazu könnte man folgendermaßen z. B. im Page_Load abfragen: 1: if (Request["js"] == null) 2: { 3: Response.Redirect("~/NoJS.aspx"); 4: } Und schon sind wir fertig. Diese Methode könnte man noch etwas sicherer gestalten, indem man Sessions mit einbringt, da der Nutzer die URL manipulieren bzw. an andere weiterleiten kann. Einfach zum Beispiel in der tokenExists() Methode noch zusätzlich eine Session-Variable erzeugen, falls diese nicht bereits existiert und somit wäre auch dies kein Problem mehr. zu *(1): hier ist noch wichtig zu wissen, dass der Aufruf von tokenExists() trotzdem ausgeführt wird, selbst wenn JS deaktiviert sein sollte. Da dies beim Rendern der Seite geschieht. zu *(2): der Rückgabewert von tokenExists() wird als String interpretiert, d. h. man muss diesen selbstverständlich auch mit einem String vergleichen deswegen ‘false’