WebesTodoApp201806
1.0.0
Netacademia "My First Web C # Project: To-Do Application" Course Code Supplémentaire Code
Groupe dotnet général sur Facebook: Sharks Dotnet
+------------------------+
| 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
Parce que le flux de travail de l'environnement et du développement est complexe pour ces types de développements, il n'est pas créé manuellement à la main, mais à l'aide du modèle de studio Visula.
Avec l'assistant, nous créons l'application Web ASP.NET MVC (.NET Framework), comme suit:
Créer un nouveau projet: 
Sélection d'application MVC 
Si nous créons un fichier HTML dans le répertoire des applications, il est par défaut par notre application ASP.NET. Autrement dit, si le navigateur demande ce fichier, le serveur le renverra:
Cette demande (du navigateur vers le serveur):
GET http://localhost:39399/SajatHtmlOldal.html
(Le serveur du navigateur) renvoie la page HTML (site Web):
<!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 >Cela fonctionne de la même manière en ouvrant le fichier à partir du navigateur:
file:///D:/Repos/WebesTodoApp201806/TodoApp/TodoApp/SajatHtmlOldal.html
Il l'affiche toujours de la même manière.
La tâche du HTTP est de décrire les demandes et le format des réponses si vous souhaitez interroger un contenu via le réseau.
La demande HTTP se compose de quatre parties
Nous sommes intéressés par les deux premiers.
Méthode: par exemple, obtenir, publier, mettre, supprimer, etc. Détails sur Wikipedia
Il est également important que le protocole HTTP ne gère pas la condition, donc les demandes sont complètement indépendantes.
Si vous ne voulez pas afficher des cartes statiques dans une ligne, mais:
C'est une belle tâche, le MVC ASP.NET est pour cela.
+-----------------+
| |
| Bevásárlólista |
| |
+-----------------+
| |
| Só |
| |
| Cukor |
| |
| Spagetti |
| |
| Marhahús |
| |
| Paradicsom |
| |
+-----------------+
Dans le cas de l'affichage
Question: Comment la demande se rend-elle au contrôleur? Réponse: Basé sur le titre de la demande.
Par exemple:
GET http://localhost:39399/Home/About
Ici, la première moitié du titre pointe vers l'application:
http://localhost:39399
La seconde moitié du titre et la méthode signifient quelque chose dans l'application:
GET /Home/About
Il est de la responsabilité du routage de traiter ceci. Dans le titre, "/" est un signe de séparation, c'est-à-dire que l'ensemble du titre peut être démonté en parties significatives qui peuvent être traitées par l'application .
Selon la convention ASP.NET MVC - la première partie de ce titre est adressée au contrôleur (dans l'exemple: Home). Contrôleur: Contrôleur - La deuxième partie est l' action qui sert la demande. Action: fonction
Cela peut être utilisé pour organiser chaque demande en fonctions et les fonctions en unités de contrôle.
Il est important que le reste du titre, qui suit les deux premières unités (contrôleur / action), contienne les paramètres de la demande sous une certaine forme.
Le cadre ASP.NET MVC est extrêmement fortement construit sur la convention de nom: le nom de chaque élément joue un rôle décisif dans le fonctionnement de l'application.
Il existe deux règles de routage importantes: - Si l'action n'est pas spécifiée, alors c'est l' index . - Si le contrôleur n'est pas spécifié, alors est la maison / l'index
Basé sur les vues:
Généralement, les vues pour le contrôleur sont dans le dossier Views de notre application Web, regroupées par contrôle, le nom du dossier de regroupement est le même que le nom de routage du contrôleur.
Par exemple: les vues HomeController sont dans le dossier View Home.
Et: le nom de chaque fichier de vue est le même que l'action du contrôleur de nom, à laquelle ils appartiennent.
Remarque: Cette convention peut être rompue: vous pouvez également sélectionner une vue spécifique pour une action.
Autrement dit, la vue de l'action HoMeController.todolist () appartient automatiquement à: Views home todolist.chtml
Vous pouvez utiliser ce tutoriel pour écrire le code HTML.
La vue peut définir le type de modèle de données sur lequel fonctionne.
Crud: c reat, read , u pdate, d elet
Un court croquis d'écran comme spécification:
+------------------------------------------------+
| |
| +------------------+---------+--------+ |
| | 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 | <---------------------------------+
| +-----------------+ +----------+ |
| |
| |
+------------------------------------------------+
L'index est une demande de vue d'ensemble du contrôleur, et à partir d'ici elle a été nommée d'après. Autrement dit, notre vue de vue d'ensemble initiale, l'action d'index doit être prise. Il s'ensuit que nous avons renommé celui actuel.
<form></form> à ceci - Vous avez besoin d'un <input /> qui a un nom ( <input name="valami megnevezés"/> ) - Besoin d'un bouton (ou <input type="submit" /> ou <button></button> >) Contenu du champ dans les paramètres de l'appel, 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.
Pour rendre une page d'entrée disponible sur la page d'index (lien: http: // localhost: 39399 / todo / création) concept pour l'adresse relative peut
Tester les données qui restent entre les demandes
PROGRAMMATION ENTRÉE DE DONNÉES AVEC POST Les données sont disponibles en tant que paramètre de formulaire:
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-------------------------> | |
| | | |
| | | |
| | +-----+
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------+
D'une manière ou d'une autre, les instructions doivent être séparées lors du service des données / vue. C'est,
Théorème de champ de saisie d'index et entrée de programmation
Microsoft SQL Server est installé avec Chocolatey, ces packages sont installés:
cinst sql-server-express
cinst sql-server-management-studio
Et pour l'installation chocolatée, cette commande doit être exécutée à partir d'une ligne de commande administratrice:
@"%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"
Pour créer une base de données:
Examiner les options d'erreur pour unique
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
}trouver la différence dans le
<input id="isDone" name="isDone" type="checkbox" value="true" >Ce dernier génère ceci:
<input name="isDone" id="isDone" type="checkbox" value="true">
<input name="isDone" type="hidden" value="false">
Il fonctionne par Checkbox ne propose FormData que s'il est coché . Sinon, le navigateur ne l'envoie tout simplement pas . Dans ce cas, (s'il n'y a pas de tic), le champ caché provient du navigateur, ce qui vaut false comme si la case à cocher n'était pas cochée. Et si la coche est là, les deux valeurs apparaîtront , une true et une false , et le ModelBinder choisit le premier en fonction de son ordre 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 et CSS fabriquent un cours sans main
Utilisation de styles La langue de description HTML vous permet de saisir style à tous les membres HTML. En cela, vous pouvez saisir les paramètres de coloration, de formatage et d'emplacement. Plus d'informations sur la page W3Schools méritent d'être examinées.
Utilisez des styles uniformes pour cela pour CSS: les styles sont séparés du code HTML, HTML est contenu, CSS est une définition de forme. Vous pouvez regarder ce site en détail.
Les paramètres CSS peuvent être testés dans les navigateurs en appelant les outils du développeur (F12).
Un package Web des graphistes de Twitter et l'un de ses programmeurs, qui est capable d'afficher un site Web particulier (automatiquement adapté à différentes tailles). Le package est disponible ici, son code source est sur le github.
L'une des fondations du bootstrap est le système de grille.
L'autre principe est de créer différents éléments d'affichage en fournissant le paramètre class , sans autre connaissance CSS et JavaScript. Une liste de chaque composant.
Étapes pour générer la page HTML:
@ {
Layout = null ;
}<head></head> , et le JavaScript est utilisé à la fin de la section <body></body> . @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
Dans le cadre HTML, vous manquez deux endroits:
@RenderBody() indique la partie où la vue est déterminée par l'action.<body></body> , laissez-le de côté @RenderSection ( "scripts" , required : false )À la fin, Javascrips sera chargé de votre propre paquet:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
Ainsi, servant une demande: Action Sélectionne la vue, il sélectionne la mise en page, génère la partie de contenu du code HTML en fonction de la vue, génèrent la page HTML en fonction du code de mise en page et la vue générée par vue est étendue à la page entière.
