Archiv für den Monat Februar 2013

Tools die ich beim Entwickeln von ASP.NET Webseiten verwende


Das Schreiben von .NET Programmen macht mir prinzipiell so viel spaß, da es Coole Tools gibt die einem das Leben einfacher machen. Dazu gehört für mich immer die aktuellste Version von Visual Studio mit den dazu passenden Plugins.

Dabei habe ich mein Visual Studio nicht mit Plugins “vollgekracht” sondern, hier reichen schon ein paar wenige Plugins aus um einem das Leben leichter zu machen.

0. Team Foundation Server Anbindung im VS

Selbst im privaten Bereich habe ich all meine Projekte/Testprojekte inzwischen in der Quellcodeverwaltung liegen, da man hier von überall zugreifen kann und sie nahtlos ins VS integriert ist. Ich verwende aktuell z.B. Codeplex um meine Projekte abzulegen, was kostenlos ist und wunderbar funktioniert. Die Projekte sind hier aber immer öffentlich zugänglich. Wenn man mehr auf die Privatsphäre wert legt gibt es noch die Möglichkeit auf den Team Foundation Service zurückzugreifen. Hier kann man Projekte mit bis zu 5 Personen kostenlos verwalten.

1. Resharper

Resharper ist für mich mit das wichtigste Tool, um Visual Studio zu einem wirklich guten Werkzeug aufzustocken. Wer einmal einen Monat damit gearbeitet hat und sich dann an ein Visual Studio setzt ohne Resharper, denkt man man ist wieder in der Steinzeit angekommen. Resharper stellt dabei viele nützliche Funktionen zur Verfügung, was z.B. das Refactoring und das Hinzufügen von Verweisen und das Schreiben von normalen Code angeht. Ist leider nicht ganz günstig, aber wie ich finde jeden Cent wert.

2. VS10x Code Map v2

VS10x ist ein Plugin, welches einem im Codefenster noch zusätzliche alle Properties, Funktionen und Region anzeigt, filtert oder farblich einfärbt. Vor allem sehr nützlich wenn Klassen mehr wie 500 Zeilen Code enthalten und man evtl. leicht den Überblick verlieren könnte wo man zuletzt gewesen ist. Dieses Tool ist auch nicht Kostenlos, aber wie ich finde schon um einiges günstiger wie Resharper zu haben und es lohnt sich.

image

3. Javascript Parser

Der Javascript Parser stellt quasi eine ähnliche Funktionalität wie VS10x Codemap zur Verfügung, nur für JavaScript Code in Javascript Dateien oder Scriptblöcken in cshtml Dateien und ist dazu noch kostenlos.

image

4. Web Essentials

Da ich sehr viel Privat und auch auf Arbeit mit Webprojekten zu tun habe, finde ich Web Essentials sehr nützlich als Plugin, was einem das Arbeiten mit Less Dateien und auch Javascript vereinfacht.

5. Firefox mit Firebug oder Chrome

Hierbei handelt es sich zwar nicht um ein Plugin für Visual Studio, aber für Webentwickler sind das nicht einfach nur Browser, sondern es sind Tools um z.B. Javascript zu debuggen, HTML Code und CSS anzupassen, die Requests auszulesen uvm. Die Browser lassen sich hier sehr gut “pimpen” und ich debugge meinen Javascript Code lieber direkt im Browser als im VS, da ich hier immer irgendwelche Probleme habe um auch den Javascript Code debuggen zu können.

 

Wenn jemand noch weitere Coole Tools im Angebot hat, dann einfach in den Kommentaren melden und ich werde mit das mal anschauen.

Advertisements

jQueryUi und moment.js aus Rangeslider wird ein Timeslider


Da ich für ein privates Projekt einen Zeitslider benötigte habe, habe ich mich einfach bei dem bereits vorhandenen Slider von jqueryUi bedient und diesen dementsprechend angepasst, das dieser jetzt die Uhrzeit “anzeigt”. Das ganze sieht dann z.B. mit Twitter Bootstrap folgendermaßen aus:

image

Mit dem Slider kann die jeweils passende Uhrzeit ausgewählt werden und auch über die “Plus” und “Minus” Symbole an den jeweiligen enden lässt sich die Zeit einstellen. Die Uhrzeit wird in zwei getrennten Textboxen angezeigt und entsprechend aktualisiert.

Damit ich mich nicht groß um das Umrechnen und Anzeigen der Uhrzeit kümmern muss habe ich hier noch auf das NuGet Package von “moment.js” zurückgegriffen. Es wird außerdem die aktuellste Version von jQuery und jQueryUi inkl. der passenden jQueryUiStyles benötigt.

Das folgende HTML Konstrukt dient als Grundlage für den JavaScriptCode

<label for="amount">Timerange: </label>
<input id="StartTime" readonly="readonly" class="text-box single-line input-mini uneditable-input"
    type="time" value="07:00" name="StartTime" data-val="true">
bis
<input id="EndTime" readonly="readonly" class="text-box single-line input-mini uneditable-input"
     type="time" value="16:00" name="EndTime" data-val="true">
Uhr

    <div style="margin-top: 5px; height: 23px;" class="well">
        <div class="row">
            <div class="span11">
                <div id="slider-range"></div>
            </div>
            <div class="row">
                <div style="padding-left: 20px;" class="span1">
                    <i id="addOneStart" class="icon-plus"></i>
                    <i id="subOneStart" class="icon-minus"></i>
                </div>
                <div class="span9"></div>
                <div style="margin-right: -10px" class="span1 pull-right">
                    <i id="subOneEnde" class="icon-minus"></i>
                    <i id="addOneEnde" class="icon-plus"></i>
                </div>
            </div>
        </div>
    </div>

Den Slider definierten und die Startwerte in den Textboxen auslesen. Unter “values” werden im Slider die Standardstartwerte angegeben in Minuten. Außerdem ist der “max” wert mit 1440 belegt, was 24 Stunden * 60 Minuten entspricht und die Minuten für einen Ganzen Tag ergibt. Die Stepsize kann extra definiert werden, da wir auf diese später noch zugreifen.

var stepSize = 5; //anzahl der Minuten die gesetzt werden sollen

//Slider definieren
var slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 1440,
    step: stepSize,
    values: [420, 900],
    slide: function (event, ui) {
        //Die Start und Endezeit des Sliders ermitteln die gerade ausgeählt sind.
        var start = moment("HH:mm", "00:00").minutes(ui.values[0]),
            ende = moment("HH:mm", "00:00").minutes(ui.values[1]);
        $("#StartTime").val(start.format("HH:mm"));
        $("#EndTime").val(ende.format("HH:mm"));
    }
});

//Beim Start des Programm die passende Start und Endezeit in die Textboxen eintragen.
var start = moment("HH:mm", "00:00").minutes($("#slider-range").slider("values", 0)),
    ende = moment("HH:mm", "00:00").minutes($("#slider-range").slider("values", 1));
$("#StartTime").val(start.format("HH:mm"));
$("#EndTime").val(ende.format("HH:mm"));

Hinzufügen unserer Click Eventhandler für die “Plus” und “Minus” Zeichen am Slider. Diese rufen die jeweils passende Funktion zum setzten des Linken bzw. Rechten Sliders auf.

 //Eventhandler erstellen für die + und - Bilder zum setzten der passenden Zeiten
 $("#addOneStart").on("click",function () {
     setSliderStart(0, '#StartTime', stepSize);
 });
 
 $("#subOneStart").on("click", function () {
     setSliderStart(0, '#StartTime', -1 * stepSize);
 });
 
 $("#addOneEnde").on("click", function () {
     setSliderEnde(1, '#EndTime', stepSize);
 });

 $("#subOneEnde").on("click", function () {
     setSliderEnde(1, '#EndTime', -1 * stepSize);
 });

Dann fehlen noch unsere beiden Funktionen die die jeweiligen “Plus” und “Minus” Operationen für den Linken und Rechten Slider ausführen. Wir benötigen in beiden Funktionen immer die aktuelle Start- und Endezeit des Sliders, damit wir überprüfen können ob der Slider auch nicht zu weit nach rechts oder links bewegt wird und damit ein ungültiger Zustand entsteht.

Für das Setzten des linken Sliders wird die Funktion “slider.slider(‘values’, 0, startMinutes + diff);” verwendet und für das Setzten des rechten Sliders wird die Funktion “slider.slider(‘values’, 1, startMinutes + diff);” verwendet (ich übergebe hier den passenden ‘index’).

//Den Startzeitslider setzten
function setSliderStart(index, timeId, diff) {
    //Auslesen der aktuellen Oberflächenwerte
    var startTime = $("#StartTime").val(),
    endTime = $("#EndTime").val(),
    ende = moment(endTime, "HH:mm"),
    start = moment(startTime, "HH:mm"),
        //die passenden Start und Endeminuten berechnen die aktuell angezeigt werden.
    startMinutes = start.hours() * 60 + start.minutes(),
    endMinutes = ende.hours() * 60 + ende.minutes();
    //Prüfen das die Slider sich nicht "vertauschen" Min und Max Value prüfen
    if ((startMinutes + diff) <= endMinutes && (startMinutes + diff) >= 0) {
        //http://stackoverflow.com/questions/2833396/jquery-ui-slider-setting-programatically
        //der Index gibt an welcher Slider gesetzt werden soll der für Min oder Max
        slider.slider("values", index, startMinutes + diff);
        //Prüfen ob die Minuten addiert oder Subtrahiert werden sollen
        if (diff < 0) {
            $(timeId).val(start.subtract("m", stepSize).format("HH:mm"));
        } else {
            $(timeId).val(start.add("m", stepSize).format("HH:mm"));
        }
    }
}

//Den Endezeitslider setzten
function setSliderEnde(index, timeId, diff) {
    var startTime = $("#StartTime").val(),
    endTime = $("#EndTime").val(),
    ende = moment(endTime, "HH:mm"),
    start = moment(startTime, "HH:mm"),
    startMinutes = start.hours() * 60 + start.minutes(),
    endMinutes = ende.hours() * 60 + ende.minutes();
    if (startMinutes <= (endMinutes + diff) && (endMinutes + diff) < 1440) {
        slider.slider("values", index, endMinutes + diff);
        if (diff < 0) {
            $(timeId).val(ende.subtract("m", stepSize).format("HH:mm"));
        } else {
            $(timeId).val(ende.add("m", stepSize).format("HH:mm"));
        }
    }
}

Leider funktioniert der Slider noch nicht auf Touchgeräten, daher habe ich auch die “Plus” und “Minus” Zeichen eingefügt. Es sollte auch kein Problem darstellen das Projekt zu erweitern und die Textfelder bearbeitbar zu machen für Touchgeräte.

Quellen:

http://stackoverflow.com/questions/2833396/jquery-ui-slider-setting-programatically

http://jqueryui.com/slider/#range

Codeplex:

Dann unter “Source Code” –> “Browse” –> “Testprojekte” –> “Mvc4WebApiKoTb” hier dann die Wichtigste Datei im Webprojekt unter “Views/Home/TimeSlider.cshtml”. Das Projekt sollte auch so lauffähig sein.

C# WebClient Klasse


Um einfache Webanfragen zu erstellen ist die WebClient Klasse von C# hervorragend geeignet. Denn mit Ihr kann man z.B. Problemlos Formulardaten absenden oder Webseiten herunterladen.

1. Versenden von POST Daten

Die benötigten Formulardaten die man für den Post Prozess benötigt, kann man sehr einfach mit Firefox und Firebug auslesen unter dem Tab “Netzwerk”. Hier kann man für einen POST sehr einfach die benötigten Parameter auslesen.

image

Mit diesen Daten füllt man eine “NameValueCollection” und kann dann die Daten per POST absenden mit Hilfe der WebClient Klasse.

WebClient web = new WebClient();
//Wenn es sich z.B. um eine Seite mit WindowsAuthentifizierung handelt im lokalen Netzwerk,
//dann kann man hier die DefaultCredentials verwenden
//web.Credentials = CredentialCache.DefaultCredentials;

//Die POST Parameter erstellen die mit übergeben werden müssen, lassen sich z.B: sehr leicht per Firebug ermitteln
NameValueCollection param = new NameValueCollection();
param.Add("submit", "Anmelden");
param.Add("send", "send");
param.Add("sid", "");
param.Add("l_username", "yourUserName");
param.Add("l_password", "YourPassword");

string url = "http://www.mycsharp.de/wbb2/login.php";
byte[] responsebytes = web.UploadValues(url, "POST", param);
//Der ResponseStream enthält die Webseite die nach dem Login aufgerufen bzw. angezeigt wird.
string responsebody = System.Text.Encoding.Default.GetString(responsebytes);
Console.Write(responsebody);

2. Herunterladen von Bildern

Genauso einfach wie man Formulardaten absenden kann ist es die Bilder einer Webseite herunterzuladen. Hier muss als erstes die Webseite als HTML Gerüst heruntergeladen werden und mit Hilfe der Codeplex Bibliothek Html Agility Pack kann die HTML Seite ganz einfach mit Hilfe von XPath Ausdrücken geparst werden. Mit dem passenden XPath Ausdruck suchen wir uns einfach alle “img” Elemente der Webseite heraus und laden diese herunter und speichern diese lokal ab.

//z.b. Alle Bilder von einem Meiner Blogeinträge herunterladen
string url = "https://squadwuschel.wordpress.com/2012/08/09/ef5-model-first-datenbank-updates-vs-2012/";
WebClient downloadHtml = new WebClient();
//Erst das HTML Gerüst der Webseite herunterladen und in einen String Umwandeln
byte[] htmlpage = downloadHtml.DownloadData(url);
string content = System.Text.Encoding.Default.GetString(htmlpage);

//Das HTML Agilit Pack verwenden um den HTML Code zu parsen
//http://htmlagilitypack.codeplex.com/
HtmlDocument document = new HtmlDocument();
document.LoadHtml(content);

//Mittels XPath Ausdruck alle Images auf der Seite heraussuchen
foreach (HtmlNode img in document.DocumentNode.SelectNodes("//img/@src"))
{
    //Den Pfad für das Bild ermitteln.
    string path = img.Attributes["src"].Value;
    Uri link = new Uri(path);
    try
    {
        //Direkter Download der Datei
        downloadHtml.DownloadFile(path, string.Format("c:\\Temp\\image-{0}.png", ++Counter));
    }
    catch (Exception exception)
    {
        Console.WriteLine("Das Bild mit der Adresse '{0}' konnte nicht heruntergeladen werden.", link);
    }
}


Console.WriteLine("Download Fertig");
Console.ReadLine();

3. Webseiten Status mit WebRequest prüfen

Prüfen ob eine Webseite erreichbar ist mit Hilfe von WebRequest und HttpWebResponse

//Prüfen ob mein Blog erreicht werden kann
string url = "https://squadwuschel.wordpress.com/2012/08/09/ef5-model-first-datenbank-updates-vs-2012/";
try
{
    //Prüfen ob die Webseite erreicht werden kann.
    WebRequest request = WebRequest.Create(url);
    HttpWebResponse response = (HttpWebResponse)request.GetResponse();
    if (response.StatusCode == HttpStatusCode.OK)
    {
        Console.WriteLine("STATUS - OK");
        return true;
    }
    else
    {
        Console.WriteLine("Aktueller Status '{0}'", response.StatusCode);
    }

}
catch (Exception exception)
{
    Console.Write(exception);
}

return false;

Codeplex:

Dann unter “Source Code” –> “Browse” –> “Testprojekte” –> “WebClientTest”, dabei handelt es sich um eine einfache Konsolenanwendung.