WebesTodoApp201806
1.0.0
Netacademia "Mein erstes Web C# -Projekt: To-Do Application" Kurs Ergänzende Code-Tour
Allgemeine Dotnet -Gruppe auf Facebook: Dotnet Sharks
+------------------------+
| Desktop számítógép |
| |
| +-------------+ |
+---------------+ | | Alkalmazás | |
| | | | | |
| Felhasználó | | +-------------+ |
| | | |
| | | |
+---------------+ | |
+------------------------+
Hagyományos Desktop/Mobil alkalmazásfejlesztés
+--------------------------+
| Szerver számítógép |
+------------------------+ | |
| Desktop számítógép | | |
| Mobil eszköz | Hálózati | |
| | kapcsolat | +----------------------+ |
+---------------+ | | | | | |
| | | +-------------+ +---------------> | | Szerver alkalmazás | |
| Felhasználó | | | Alkalmazás | | | | (WebSzerveren futó | |
| | | | (Böngésző) | | <---------------+ | app) | |
| | | +-------------+ | | | | |
+---------------+ | | ^ | +----------------------+ |
+------------------------+ | | |
| | ^ |
^ | | | |
| | | | |
| | | | |
| | +--------------------------+
| | |
+ + +
HTML HTTP MVC
Webes Alkalmazásfejlesztés
Da der Umwelt- und Entwicklungs -Workflow für diese Art von Entwicklungen komplex ist, wird er nicht manuell von Hand, sondern mit Hilfe der Visula Studio -Vorlage.
Mit dem Assistenten erstellen wir die ASP.NET MVC -Webanwendung (.NET Framework) wie folgt:
Erstellen Sie ein neues Projekt: 
MVC -Anwendungsauswahl 
Wenn wir im Anwendungsverzeichnis eine HTML -Datei erstellen, wird sie von unserer ASP.NET -Anwendung standardmäßig. Das heißt, wenn der Browser nach dieser Datei fragt, sendet der Server ihn an ihn zurück:
Diese Anfrage (vom Browser zum Server):
GET http://localhost:39399/SajatHtmlOldal.html
(Der Server im Browser) Gibt die HTML -Seite (Website) zurück:
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< title > Ez a saját html oldalunk címe </ title >
</ head >
< body >
Ez pedig a saját html oldalunk tartalma, ezt fogja a böngésző megmutatni.
</ body >
</ html >Es funktioniert genauso, indem Sie die Datei aus dem Browser öffnen:
file:///D:/Repos/WebesTodoApp201806/TodoApp/TodoApp/SajatHtmlOldal.html
Es zeigt es immer noch genauso an.
Die Aufgabe des HTTP besteht darin, Anforderungen und das Format der Antworten zu beschreiben, wenn Sie einen Inhalt über das Netzwerk abfragen möchten.
Die HTTP -Anfrage besteht aus vier Teilen
Wir interessieren uns für die ersten beiden.
Methode: zB GET, POST, STEPT, LÖSCHEN usw. Details zu Wikipedia
Es ist auch wichtig, dass das HTTP -Protokoll den Zustand nicht behandelt, sodass die Anforderungen völlig unabhängig sind.
Wenn Sie keine statischen Karten hintereinander anzeigen möchten, sondern:
Es ist eine nette Aufgabe, das ASP.NET MVC ist dafür.
+-----------------+
| |
| Bevásárlólista |
| |
+-----------------+
| |
| Só |
| |
| Cukor |
| |
| Spagetti |
| |
| Marhahús |
| |
| Paradicsom |
| |
+-----------------+
Im Fall von Anzeige
Frage: Wie kommt die Anfrage zum Controller? Antwort: Basierend auf dem Titel der Anfrage.
Zum Beispiel:
GET http://localhost:39399/Home/About
Hier zeigt die erste Hälfte des Titels auf die Anwendung:
http://localhost:39399
Die zweite Hälfte des Titels und die Methode bedeuten etwas innerhalb der Anwendung:
GET /Home/About
Es liegt in der Verantwortung des Routings , dies zu verarbeiten. Im Titel "/" ist "/" ein Zeichen der Trennung, dh der gesamte Titel kann in sinnvolle Teile zerlegt werden , die von der Anwendung verarbeitet werden können .
Nach der ASP.NET -MVC -Konvention wird der erste Teil dieses Titels an den Controller gerichtet (im Beispiel: Home). Controller: Controller - Der zweite Teil ist die Aktion , die der Anfrage dient. Aktion: Funktion
Dies kann verwendet werden, um jede Anforderung in Funktionen und Funktionen in Kontrolleinheiten zu organisieren.
Es ist wichtig, dass der Rest des Titels, der den ersten beiden Einheiten (Controller/Aktion) folgt, die Parameter der Anforderung in irgendeiner Form enthalten.
Das ASP.NET -MVC -Framework ist äußerst in der Namenskonvention integriert: Der Name jedes Elements spielt eine entscheidende Rolle bei der Funktionsweise der Anwendung.
Es gibt zwei wichtige Routing -Regeln: - Wenn die Aktion nicht angegeben ist, ist dies der Index . - Wenn der Controller nicht angegeben ist, dann ist das Haus/der Index
Basierend auf der Ansicht:
Im Allgemeinen befinden sich die Ansichten für den Controller im Ordner Views unserer Webanwendung, gruppiert pro Steuerung. Der Name des Gruppierungsordners entspricht dem Namen Controller Routing.
Zum Beispiel: Homecontroller -Ansichten finden Sie im Ordner "Ansichten Home".
Und: Der Name jeder Ansichtsdatei ist der gleiche wie die Name der Namenscontroller, zu der sie gehören.
Hinweis: Diese Konvention kann unterbrochen werden: Sie können auch eine bestimmte Ansicht für eine Aktion auswählen.
Das heißt
Sie können dieses Tutorial verwenden, um den HTML -Code zu schreiben.
Die Ansicht kann die Art des Datenmodells definieren, an dem funktioniert.
CRUD: C Reate, R ead, U pdate, d Elet
Eine kurze Bildschirmskizze als Spezifikation:
+------------------------------------------------+
| |
| +------------------+---------+--------+ |
| | elem 1 | módosít | töröl | |
| +-------------------------------------+ |
| | elem 2 | módosít | töröl | |
| +-------------------------------------+ |
| | elem 3 | módosít | töröl | <-----------------------------+--+ Műveletek kezdeményezésére
| +------------------+---------+--------+ | | szolgáló elemek, amivel
| | | | | a felhasználó kezdeményezni
| +-------------------------------------+ | | tudja az adott műveletet
| | | | | (link, gomb, stb.)
| +-------------------------------------+ | |
| | | | |
| +-------------------------------------+ | |
| | | | |
| +-------------------------------------+ | |
| | |
| | |
| | |
| +-----------------+ +----------+ | v
| | beviteli mező | | rögzítés | <---------------------------------+
| +-----------------+ +----------+ |
| |
| |
+------------------------------------------------+
Der Index ist eine Anfrage für die Übersichtsansicht des Controller und wurde von hier nach benannt. Das heißt, unsere erste Übersichtsansicht, die Indexaktion, muss ergriffen werden. Daraus folgt, dass wir die aktuelle umbenannt haben.
<form></form> to this - you need a <input /> that has a name ( <input name="valami megnevezés"/> ) - need a button (or <input type="submit" /> or <button></button> >) Input field contents in the call parameters, so: http://localhost:39399/Todo/Create?Tennival%C3%B3=agaadfgafgadf 
Folyamat:
1. /Todo/Create paraméter nélkül feladja a Create nézetet
2. /Todo/Create paraméterrel rögzíti az adatot és átirányít az Index-re
Sajnos az adatok mindig inicializálódnak, azt még meg kell oldani.
De a legnagyobb elvi baj ezzel, hogy az adatok felküldése GET metódust használ, ami (mivel adatmódosítás történik) nem szabványos.
Helyette POST kell.
Um eine Eingabeseite auf der Indexseite verfügbar zu machen (Link: http: // localhost: 39399/todo/create) Konzept für die relative Adresse CAN
Testdaten, die zwischen Anfragen bestehen
Die Programmierdateneingabe mit dem Post -Die Daten werden als Formularparameter geliefert:
Amit a Model Binder segítségével ugyanúgy függvény paraméterként tudunk átvenni az Action definícióban:
GET: URL paraméter Model binding:név alapján egyeztet
+----------------------------------------------+ (Query string) +-----+
| Böngésző | ^ +---------------> | |
+----------------------------------------------+ | | | Alkalmazás
| | | | | +--------------+
| | | | | | |
| +------------------+ | | | | | |
| | Adat1=érték1 | | +-------> | | Adatok | |
| | | | | | +-----> | |
| +------------------+ | | | | |
| | Adat2=érték2 | | +-------> | | | |
| | | | | | | | |
| +------------------+ | | | | | |
| | | | | | |
| | | | | +--------------+
| | | | |
| | | POST: Form data | |
| | v-------------------------> | |
| | | |
| | | |
| | +-----+
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------+
Irgendwie sollten die Anweisungen beim Servieren der Daten/der Ansicht getrennt werden. Das heißt,
Indexeingangsfeld Theorem und Programmiereingabe
Microsoft SQL Server ist mit schokoladigem installiert. Diese Pakete sind installiert:
cinst sql-server-express
cinst sql-server-management-studio
Für die Schokoladeninstallation muss dieser Befehl aus einer Befehlszeile der Administrator ausgeführt werden:
@"%SystemRoot%System32WindowsPowerShellv1.0powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin"
So erstellen Sie eine Datenbank:
Untersuchung der Fehleroptionen für Single
var item = db . TodoItems . FirstOrDefault ( x => x . Name . Contains ( "a" ) ) ;
if ( item == null )
{ // ha nincs ilyen elem
}
else
{ // ha megvan
} var item = db . TodoItems . SingleOrDefault ( x => x . Id == id ) ;
if ( item == null )
{ // ha nincs ilyen elem
}
else
{ // ha megvan
}Finden Sie den Unterschied in der
<input id="isDone" name="isDone" type="checkbox" value="true" >Letzteres erzeugt Folgendes:
<input name="isDone" id="isDone" type="checkbox" value="true">
<input name="isDone" type="hidden" value="false">
Es funktioniert nach CheckBox erfolgt nur FormData, wenn es angekreuzt wird . Wenn nicht, sendet der Browser ihn einfach nicht auf . In diesem Fall stammt (wenn es keine Zecke gibt) das versteckte Feld vom Browser, was false wert ist, als wäre das Kontrollkästchen nicht angekreuzt. Und wenn die Zecke da ist, werden beide Werte auftreten , ein true und ein false und der Modelbinder wählt den ersten anhand ihrer Bestellung aus true
+--------------------------------+ +---------------------------------+ +----------------------------------+
| | | | | |
| | | EntityFramework | | |
| Alkalmazás | | Code First | | Adatbázis |
| | | | | |
| | | | | +---------------+ |
| | | 1. A kód alapján kitalálja | | | TodoItems | |
| | | hogy hogy lenne jó | | | | |
| Adatok osztályba | | +-> adatbázisba írni az +-> | +------> | | TodoItem | |
| szervezve | | | adatokat | | | TodoItem | |
| (TodoItem) | | | | | | TodoItem | |
| | | | | | | ... | |
| +---> | +> | +-> | | | | |
| + | | | | | | |
| Adatelérési osztály | | | <-----------------+ | |
| (DbContext) | | 2. Ha pedig adatot akarok | | | | ^ | |
| DbSet<TodoItem> | | lekérdezni, akkor a Linq | v | | | | |
| TodoItems <-----------------+ felületen keresztül | <+ | +---------------+ |
| | | fogadja a kérést és | | ^ |
| | | SQL lekérdezéssé alakítja| | + |
| db.TodoItems.Single() +----------------> a visszakapott adatokat | +-------------> SELECT |
| | | pedig betölti a TodoItems| | Id, Name, Done |
| | | DbSet-be | | WHERE |
| | | | | Id == @id |
| | | | | |
+--------------------------------+ +---------------------------------+ +----------------------------------+
HTML und CSS produzieren handfreien Kurs
Mit Styles können Sie mit der HTML -Beschreibung style in alle HTML -Mitglieder eingeben. Dabei können Sie die Einstellungen zum Färben, Formatieren und Ort eingeben. Mehr auf der Seite W3schools ist es wert, sich angesehen zu haben.
Verwenden Sie für CSS einheitliche Stile für CSS: Die Stile sind vom HTML -Code getrennt, HTML ist Inhalt, CSS ist eine Definition von Form. Sie können sich diese Seite im Detail ansehen.
CSS -Einstellungen können in Browsern getestet werden, indem Entwicklertools (F12) aufgerufen werden.
Ein Webpaket aus den Grafikern von Twitter und einem seiner Programmierer, das eine bestimmte Website anzeigen kann (automatisch an unterschiedliche Größen angepasst). Das Paket ist hier verfügbar, sein Quellcode befindet sich im GitHub.
Eine der Grundlagen der Bootstrap ist das Gittersystem.
Das andere Prinzip besteht darin, verschiedene Anzeigelemente zu erstellen, indem der class ohne andere CSS und JavaScript -Kenntnisse bereitgestellt werden. Eine Liste jeder Komponente.
Schritte zum Generieren der HTML -Seite:
@ {
Layout = null ;
}<head></head> geladen werden, und das JavaScript wird am Ende des Abschnitts <body></body> verwendet. @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
Im HTML -Rahmen vermissen Sie zwei Orte:
@RenderBody() gibt den Teil an, in dem die Ansicht durch die Aktion bestimmt wird.<body></body> ab, lassen sie davon heraus @RenderSection ( "scripts" , required : false )Am Ende wird Javascripts aus Ihrem eigenen Bundle geladen:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
Servieren einer Anforderung: Aktion Ausgewählt Ansicht, sie wählt Layout aus, generieren Sie den Inhaltsteil des HTML -Codes basierend auf der Ansicht, generieren Sie die HTML -Seite basierend auf dem Layout -Code, und die per Ansicht generierte Ansicht wird auf die gesamte Seite erweitert.
