WebesTodoApp201806
1.0.0
Netacademia "My First Web C# Project: TOD-DO Aplicación" Curso de Código Suplementario Tour
Grupo general de Dotnet en 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
Debido a que el flujo de trabajo del medio ambiente y el desarrollo es complejo para este tipo de desarrollos, no se crea manualmente a mano, sino con la ayuda de la plantilla de Visula Studio.
Con el asistente creamos la aplicación web ASP.NET MVC (.NET Framework), de la siguiente manera:
Crea un nuevo proyecto: 
Selección de aplicaciones MVC 
Si creamos un archivo HTML en el directorio de aplicaciones, es predeterminado por nuestra aplicación ASP.NET. Es decir, si el navegador solicita este archivo, el servidor se lo enviará:
Esta solicitud (desde el navegador hasta el servidor):
GET http://localhost:39399/SajatHtmlOldal.html
(El servidor en el navegador) Devuelve la página HTML (sitio 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 >Funciona de la misma manera abriendo el archivo desde el navegador:
file:///D:/Repos/WebesTodoApp201806/TodoApp/TodoApp/SajatHtmlOldal.html
Todavía lo muestra de la misma manera.
La tarea del HTTP es describir las solicitudes y el formato de las respuestas si desea consultar un contenido a través de la red.
La solicitud HTTP consta de cuatro partes
Estamos interesados en los dos primeros.
Método: por ejemplo, obtener, publicar, poner, eliminar, etc. Detalles sobre Wikipedia
También es importante que el protocolo HTTP no maneje la condición, por lo que las solicitudes son completamente independientes.
Si no desea mostrar tarjetas estáticas seguidas, pero:
Es una buena tarea, el ASP.NET MVC es para eso.
+-----------------+
| |
| Bevásárlólista |
| |
+-----------------+
| |
| Só |
| |
| Cukor |
| |
| Spagetti |
| |
| Marhahús |
| |
| Paradicsom |
| |
+-----------------+
En el caso de la pantalla
Pregunta: ¿Cómo llega la solicitud al controlador? Respuesta: Basado en el título de la solicitud.
Por ejemplo:
GET http://localhost:39399/Home/About
Aquí la primera mitad del título apunta a la aplicación:
http://localhost:39399
La segunda mitad del título y el método significan algo dentro de la aplicación:
GET /Home/About
Es responsabilidad del enrutamiento procesar esto. En el título, "/" es un signo de separación, es decir, todo el título se puede desmontar en partes significativas que la aplicación puede procesar .
Según la Convención ASP.NET MVC: la primera parte de este título se dirige al controlador (en el ejemplo: Inicio). Controlador: Controlador: la segunda parte es la acción que atiende la solicitud. Acción: función
Esto se puede usar para organizar cada solicitud en funciones y las funciones en las unidades de control.
Es importante que el resto del título, que sigue las dos primeras unidades (controlador/acción), contenga los parámetros de la solicitud de alguna forma.
El marco ASP.NET MVC está extremadamente altamente construido en la convención de nombre: el nombre de cada elemento juega un papel decisivo en la operación de la aplicación.
Hay dos reglas de enrutamiento importantes: - Si la acción no se especifica, entonces ese es el índice . - Si no se especifica el controlador, entonces es el hogar/índice
Basado en la visión:
En general, las vistas para el controlador se encuentran en la carpeta Vistas de nuestra aplicación web, agrupada por control, el nombre de la carpeta de agrupación es el mismo que el nombre de enrutamiento del controlador.
Por ejemplo: las vistas de Homecontroller están en la carpeta Vistas Home.
Y: el nombre de cada archivo de vista es el mismo que la acción del controlador de nombre, a la que pertenecen.
Nota: Esta convención se puede romper: también puede seleccionar una vista específica para una acción.
Es decir, la vista del homecontroller.todolist () acción pertenece automáticamente a: Views home Todolist.chtml
Puede usar este tutorial para escribir el código HTML.
La vista puede definir el tipo de modelo de datos en el que funciona.
Crud: c reate, r ead, u pdate, d elet
Un boceto de pantalla corta como especificación:
+------------------------------------------------+
| |
| +------------------+---------+--------+ |
| | 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 | <---------------------------------+
| +-----------------+ +----------+ |
| |
| |
+------------------------------------------------+
El índice es una solicitud para la vista general del controlador, y desde aquí lleva el nombre. Es decir, se debe tomar nuestra vista de descripción general inicial, la acción del índice. Se deduce que renombramos el actual.
<form></form> a esto: necesita un <input /> que tiene un nombre ( <input name="valami megnevezés"/> ) - Necesita un botón (o <input type="submit" /> o <button></button> ) contenido de campo de entrada en los parámetros de llamadas, entonces: 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.
Para que una página de entrada esté disponible en la página de índice (enlace: http: // localhost: 39399/todo/create) concepto para la dirección relativa puede
Datos de prueba que permanecen entre las solicitudes
Programación de datos de datos con POST Los datos vienen como un parámetro de formulario:
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-------------------------> | |
| | | |
| | | |
| | +-----+
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------+
De alguna manera, las instrucciones deben separarse al servir los datos/vista. Eso es,
Teorema del campo de entrada de índice y entrada de programación
Microsoft SQL Server está instalado con chocolate, estos paquetes están instalados:
cinst sql-server-express
cinst sql-server-management-studio
Y para la instalación de chocolate, este comando debe ejecutarse desde una línea de comando de administrador:
@"%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"
Para crear una base de datos:
Examinar opciones de error para un solo
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
}Encuentra la diferencia en el
<input id="isDone" name="isDone" type="checkbox" value="true" >Este último genera esto:
<input name="isDone" id="isDone" type="checkbox" value="true">
<input name="isDone" type="hidden" value="false">
Funciona con la casilla de verificación solo se le ocurre FormData si está marcado . Si no, el navegador simplemente no lo envía . En este caso, (si no hay marca), el campo oculto proviene del navegador, lo cual vale false pena, al igual que si la casilla de verificación no hubiera marcado. Y si la garrapata está allí, ambos valores aparecerán , un true y un false , y el ModelBinder elige el primero en función de su pedido 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 |
| | | | | |
+--------------------------------+ +---------------------------------+ +----------------------------------+
Curso sin mano de fabricación HTML y CSS
Usando estilos, la lengua de descripción HTML le permite ingresar style para todos los miembros de HTML. En esto, puede ingresar la configuración de coloración, formato y ubicación. Vale la pena mirar más en la página W3Schools.
Use estilos uniformes para esto para CSS: los estilos están separados del código HTML, HTML es contenido, CSS es una definición de forma. Puede ver este sitio en detalle.
La configuración de CSS se puede probar en los navegadores llamando a las herramientas de desarrollador (F12).
Un paquete web de los artistas gráficos de Twitter y uno de sus programadores, que es capaz de mostrar un sitio web en particular (adaptado automáticamente a diferentes tamaños). El paquete está disponible aquí, su código fuente está en el GitHub.
Una de las bases de la bootstrap es el sistema de cuadrícula.
El otro principio es crear diferentes elementos de visualización proporcionando el parámetro class , sin ningún otro conocimiento CSS y JavaScript. Una lista de cada componente.
Pasos para generar la página HTML:
@ {
Layout = null ;
}<head></head> , y el JavaScript se usa al final de la sección <body></body> . @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
En el marco HTML, pierde dos lugares:
@RenderBody() indica la parte donde la vista está determinada por la acción.<body></body> , lo dejamos fuera de esto @RenderSection ( "scripts" , required : false )Al final, Javascrips se cargará desde su propio paquete:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
Por lo tanto, servir una solicitud: Action Selecciona la vista, selecciona el diseño, genere la parte de contenido del código HTML en función de la vista, genere la página HTML en función del código de diseño y la vista generada por la vista se extiende a toda la página.
