WebesTodoApp201806
1.0.0
NetAcademia "Tur Kode Tambahan Kursus Web C# saya: Aplikasi To-Do"
General Dotnet Group di Facebook: Hiu 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
Karena alur kerja lingkungan dan pengembangan sangat kompleks untuk jenis perkembangan ini, itu tidak secara manual dibuat dengan tangan, tetapi dengan bantuan template studio Visula.
Dengan wizard kami membuat aplikasi web ASP.NET MVC (.NET Framework), sebagai berikut:
Buat proyek baru: 
Pemilihan aplikasi MVC 
Jika kami membuat file HTML di direktori aplikasi, itu default oleh aplikasi ASP.NET kami. Yaitu, jika browser meminta file ini, server akan mengirimkannya kembali kepadanya:
Permintaan ini (dari browser ke server):
GET http://localhost:39399/SajatHtmlOldal.html
(server di browser) Mengembalikan halaman HTML (situs 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 >Ini bekerja dengan cara yang sama dengan membuka file dari browser:
file:///D:/Repos/WebesTodoApp201806/TodoApp/TodoApp/SajatHtmlOldal.html
Itu masih menampilkannya dengan cara yang sama.
Tugas HTTP adalah untuk menggambarkan permintaan dan format jawaban jika Anda ingin menanyakan konten melalui jaringan.
Permintaan HTTP terdiri dari empat bagian
Kami tertarik pada dua yang pertama.
Metode: Misalnya Get, Post, Put, Delete, dll. Detail di Wikipedia
Penting juga bahwa protokol HTTP tidak menangani kondisi tersebut, sehingga permintaan sepenuhnya independen.
Jika Anda tidak ingin menampilkan kartu statis secara berturut -turut, tetapi:
Ini tugas yang bagus, ASP.NET MVC adalah untuk itu.
+-----------------+
| |
| Bevásárlólista |
| |
+-----------------+
| |
| Só |
| |
| Cukor |
| |
| Spagetti |
| |
| Marhahús |
| |
| Paradicsom |
| |
+-----------------+
Dalam hal tampilan
PERTANYAAN: Bagaimana permintaan sampai ke pengontrol? Jawaban: Berdasarkan judul permintaan.
Misalnya:
GET http://localhost:39399/Home/About
Di sini paruh pertama judul menunjuk ke aplikasi:
http://localhost:39399
Paruh kedua dari judul dan metode ini berarti sesuatu dalam aplikasi:
GET /Home/About
Adalah tanggung jawab perutean untuk memproses ini. Dalam judul, "/" adalah tanda pemisahan, yaitu, seluruh judul dapat dibongkar menjadi bagian -bagian yang bermakna yang dapat diproses dengan aplikasi .
Menurut Konvensi ASP.NET MVC - Bagian pertama dari judul ini ditujukan kepada pengontrol (dalam contoh: rumah). Controller: Controller - Bagian kedua adalah tindakan yang melayani permintaan. Tindakan: Fungsi
Ini dapat digunakan untuk mengatur setiap permintaan ke dalam fungsi dan fungsi menjadi unit kontrol.
Penting bahwa sisa judul, yang mengikuti dua unit pertama (pengontrol/tindakan), akan berisi parameter permintaan dalam beberapa bentuk.
Kerangka kerja ASP.NET MVC sangat sangat dibangun di atas Konvensi Nama: Nama masing -masing elemen memainkan peran yang menentukan dalam pengoperasian aplikasi.
Ada dua aturan perutean yang penting: - Jika tindakan tidak ditentukan, maka itu adalah indeksnya . - Jika pengontrol tidak ditentukan, maka adalah rumah/indeks
Berdasarkan Viewsion:
Secara umum, tampilan untuk pengontrol ada di folder views aplikasi web kami, dikelompokkan per kontrol, nama folder pengelompokan sama dengan nama routing pengontrol.
Misalnya: Tampilan HomeController ada di folder Home Views Home.
Dan: Nama setiap file tampilan sama dengan tindakan pengontrol nama, yang mereka miliki.
Catatan: Konvensi ini dapat dipecahkan: Anda juga dapat memilih tampilan tertentu untuk suatu tindakan.
Yaitu, pandangan tindakan homecontroller.todolist () secara otomatis menjadi milik: views home todolist.chtml
Anda dapat menggunakan tutorial ini untuk menulis kode HTML.
Tampilan dapat menentukan jenis model data yang berfungsi.
Crud: c reate, r ead, u pdate, d eLet
Sketsa layar pendek sebagai spesifikasi:
+------------------------------------------------+
| |
| +------------------+---------+--------+ |
| | 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 | <---------------------------------+
| +-----------------+ +----------+ |
| |
| |
+------------------------------------------------+
Indeks adalah permintaan untuk tampilan tinjauan pengontrol, dan dari sini dinamai. Artinya, tampilan tinjauan awal kami, tindakan indeks, harus diambil. Oleh karena itu kami berganti nama menjadi yang saat ini.
<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.
Untuk membuat halaman input tersedia di halaman indeks (tautan: http: // localhost: 39399/todo/create) konsep untuk alamat relatif dapat
Uji data yang tersisa di antara permintaan
Input data pemrograman dengan POST data hadir sebagai parameter formulir:
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-------------------------> | |
| | | |
| | | |
| | +-----+
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------+
Entah bagaimana arah harus dipisahkan saat melayani data/tampilan. Yaitu,
Teorema bidang input indeks dan input pemrograman
Microsoft SQL Server diinstal dengan cokelat, paket -paket ini diinstal:
cinst sql-server-express
cinst sql-server-management-studio
Dan untuk instalasi cokelat, perintah ini harus dijalankan dari baris perintah administrator:
@"%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"
Untuk membuat database:
Memeriksa opsi kesalahan untuk tunggal
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
}Temukan perbedaan dalam
<input id="isDone" name="isDone" type="checkbox" value="true" >Yang terakhir menghasilkan ini:
<input name="isDone" id="isDone" type="checkbox" value="true">
<input name="isDone" type="hidden" value="false">
Ini berfungsi dengan kotak centang hanya muncul dengan formdata jika dicentang . Jika tidak, browser tidak mengirimkannya . Dalam hal ini, (jika tidak ada kutu) bidang tersembunyi berasal dari browser, yang false bernilai seolah -olah kotak centang tidak dicentang. Dan jika kutu ada, kedua nilai akan muncul , true dan false , dan Modelbinder memilih yang pertama berdasarkan pesanan mereka 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 dan CSS memproduksi kursus bebas tangan
Menggunakan gaya lidah deskripsi html memungkinkan Anda untuk memasukkan parameter style untuk semua anggota HTML. Dalam hal ini, Anda dapat memasukkan pengaturan untuk mewarnai, memformat, dan lokasi. Lebih banyak di halaman W3Schools layak untuk dilihat.
Gunakan gaya seragam untuk ini untuk CSS: Gaya dipisahkan dari kode HTML, HTML adalah konten, CSS adalah definisi bentuk. Anda dapat melihat situs ini secara detail.
Pengaturan CSS dapat diuji di browser dengan memanggil alat pengembang (F12).
Paket web dari seniman grafis Twitter dan salah satu pemrogramnya, yang mampu menampilkan situs web tertentu (secara otomatis disesuaikan dengan ukuran yang berbeda). Paket tersedia di sini, kode sumbernya ada di github.
Salah satu fondasi bootstrap adalah sistem grid.
Prinsip lainnya adalah membuat elemen tampilan yang berbeda dengan menyediakan parameter class , tanpa pengetahuan CSS dan JavaScript lainnya. Daftar setiap komponen.
Langkah -langkah untuk menghasilkan halaman HTML:
@ {
Layout = null ;
}<head></head> , dan JavaScript digunakan di ujung bagian <body></body> . @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
Dalam bingkai HTML, Anda merindukan dua tempat:
@RenderBody() menunjukkan bagian di mana tampilan ditentukan oleh tindakan.<body></body> , tinggalkan dari ini @RenderSection ( "scripts" , required : false )Pada akhirnya, javascrips akan dimuat dari bundel Anda sendiri:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
Jadi melayani permintaan: Tindakan memilih tampilan, memilih tata letak, menghasilkan bagian konten dari kode HTML berdasarkan tampilan, menghasilkan halaman HTML berdasarkan kode tata letak, dan tampilan yang dihasilkan oleh tampilan diperluas ke seluruh halaman.
