WebesTodoApp201806
1.0.0
Netacademia "My First Web C# Project: To-Do Application" Tour Code Code Code Code Code Tour
General Dotnet Group บน 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
เนื่องจากเวิร์กโฟลว์สิ่งแวดล้อมและการพัฒนานั้นซับซ้อนสำหรับการพัฒนาประเภทนี้จึงไม่ได้ถูกสร้างขึ้นด้วยมือด้วยตนเอง แต่ด้วยความช่วยเหลือของเทมเพลต Visula Studio
ด้วยตัวช่วยสร้างเราสร้างแอปพลิเคชันเว็บ ASP.NET MVC (. NET Framework) ดังนี้:
สร้างโครงการใหม่: 
การเลือกแอปพลิเคชัน MVC 
หากเราสร้างไฟล์ HTML ในไดเรกทอรีแอปพลิเคชันจะเป็นค่าเริ่มต้นโดยแอปพลิเคชัน ASP.NET ของเรา นั่นคือถ้าเบราว์เซอร์ขอไฟล์นี้เซิร์ฟเวอร์จะส่งกลับมาให้เขา:
คำขอนี้ (จากเบราว์เซอร์ไปยังเซิร์ฟเวอร์):
GET http://localhost:39399/SajatHtmlOldal.html
(เซิร์ฟเวอร์ในเบราว์เซอร์) ส่งคืนหน้า HTML (เว็บไซต์):
<!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 >มันใช้งานได้ในลักษณะเดียวกันโดยการเปิดไฟล์จากเบราว์เซอร์:
file:///D:/Repos/WebesTodoApp201806/TodoApp/TodoApp/SajatHtmlOldal.html
มันยังคงแสดงในลักษณะเดียวกัน
งานของ HTTP คือการอธิบายคำขอและรูปแบบของคำตอบหากคุณต้องการสอบถามเนื้อหาผ่านเครือข่าย
คำขอ HTTP ประกอบด้วยสี่ส่วน
เราสนใจสองคนแรก
วิธีการ: เช่นรับ, โพสต์, ใส่, ลบ ฯลฯ รายละเอียดเกี่ยวกับวิกิพีเดีย
นอกจากนี้ยังเป็นสิ่งสำคัญที่โปรโตคอล HTTP ไม่ได้จัดการกับเงื่อนไขดังนั้นคำขอจึงเป็นอิสระอย่างสมบูรณ์
หากคุณไม่ต้องการแสดงการ์ดคงที่ในแถว แต่::
มันเป็นงานที่ดี ASP.NET MVC มีไว้สำหรับสิ่งนั้น
+-----------------+
| |
| Bevásárlólista |
| |
+-----------------+
| |
| Só |
| |
| Cukor |
| |
| Spagetti |
| |
| Marhahús |
| |
| Paradicsom |
| |
+-----------------+
ในกรณีของการแสดงผล
คำถาม: คำขอไปที่คอนโทรลเลอร์ได้อย่างไร? คำตอบ: ขึ้นอยู่กับชื่อของคำขอ
ตัวอย่างเช่น:
GET http://localhost:39399/Home/About
ที่นี่ครึ่งแรกของชื่อชี้ไปที่แอปพลิเคชัน:
http://localhost:39399
ครึ่งหลังของชื่อและวิธีการหมายถึงบางสิ่งบางอย่างภายในแอปพลิเคชัน:
GET /Home/About
มันเป็นความรับผิดชอบของ การกำหนดเส้นทาง ในการประมวลผลสิ่งนี้ ในชื่อเรื่อง "/" เป็นสัญลักษณ์ของการแยกนั่นคือชื่อทั้งหมดสามารถถอดออกเป็นส่วน ที่มีความหมาย ซึ่งสามารถประมวลผลได้โดยแอปพลิเคชัน
ตามอนุสัญญา ASP.NET MVC - ส่วนแรก ของชื่อนี้ถูกส่ง ไปยังคอนโทรลเลอร์ (ในตัวอย่าง: Home) คอนโทรลเลอร์: คอนโทรลเลอร์ - ส่วนที่สองคือ การกระทำ ที่ให้บริการคำขอ การดำเนินการ: ฟังก์ชั่น
สิ่งนี้สามารถใช้ในการจัดระเบียบแต่ละคำขอเป็นฟังก์ชั่นและฟังก์ชั่นลงในหน่วยควบคุม
เป็นสิ่งสำคัญที่ส่วนที่เหลือของชื่อซึ่งเป็นไปตามสองหน่วยแรก (คอนโทรลเลอร์/การกระทำ) จะมีพารามิเตอร์ของคำขอในบางรูปแบบ
เฟรมเวิร์ก ASP.NET MVC ถูกสร้างขึ้นอย่างมากในการประชุมชื่อ: ชื่อของแต่ละองค์ประกอบมีบทบาทเด็ดขาดในการทำงานของแอปพลิเคชัน
มีกฎการกำหนดเส้นทางที่สำคัญสองประการ: - หากไม่ได้ระบุการกระทำนั่นคือ ดัชนี - หากไม่ได้ระบุคอนโทรลเลอร์จะเป็น บ้าน/ดัชนี
ขึ้นอยู่กับมุมมอง:
โดยทั่วไปมุมมองสำหรับคอนโทรลเลอร์อยู่ในโฟลเดอร์ Views ของเว็บแอปพลิเคชันของเราจัดกลุ่มต่อการควบคุมชื่อของโฟลเดอร์การจัดกลุ่มจะเหมือนกับชื่อเส้นทางคอนโทรลเลอร์
ตัวอย่างเช่น: มุมมอง Homecontroller อยู่ในโฟลเดอร์ Views Home
และ: ชื่อของแต่ละไฟล์มุมมองนั้นเหมือนกับการกระทำของตัวควบคุมชื่อซึ่งเป็นของ
หมายเหตุ: การประชุมนี้อาจเสีย: คุณสามารถเลือกมุมมองเฉพาะสำหรับการดำเนินการ
นั่นคือมุมมองของ homecontroller.todolist () การกระทำโดยอัตโนมัติเป็นของ: views home todolist.chtml โดยอัตโนมัติ
คุณสามารถใช้บทช่วยสอนนี้เพื่อเขียนรหัส HTML
มุมมองสามารถกำหนดประเภทของแบบจำลองข้อมูลที่ใช้งานได้
crud: c reate, r ead, u pdate, d elet
ภาพร่างหน้าจอสั้นเป็นข้อมูลจำเพาะ:
+------------------------------------------------+
| |
| +------------------+---------+--------+ |
| | 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 | <---------------------------------+
| +-----------------+ +----------+ |
| |
| |
+------------------------------------------------+
ดัชนีเป็นคำขอสำหรับมุมมองภาพรวมของคอนโทรลเลอร์และจากที่นี่มันได้รับการตั้งชื่อตาม นั่นคือมุมมองภาพรวมเริ่มต้นของเราจะต้องดำเนินการดัชนี มันตามมาว่าเราเปลี่ยนชื่อเป็นปัจจุบัน
<form></form> ไปยังสิ่งนี้ - คุณต้องใช้ <input /> ที่มีชื่อ ( <input name="valami megnevezés"/> ) - ต้องการปุ่ม (หรือ <input type="submit" /> หรือ <button></button> 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.
เพื่อให้หน้าอินพุตพร้อมใช้งานในหน้าดัชนี (ลิงก์: http: // localhost: 39399/todo/create) แนวคิดสำหรับที่อยู่สัมพัทธ์สามารถ
ทดสอบข้อมูลที่ยังคงอยู่ระหว่างคำขอ
อินพุตข้อมูลการเขียนโปรแกรมพร้อมโพสต์ข้อมูลมาเป็นพารามิเตอร์แบบฟอร์ม:
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-------------------------> | |
| | | |
| | | |
| | +-----+
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------+
อย่างใดทิศทางควรแยกออกเมื่อให้บริการข้อมูล/มุมมอง นั่นคือ
ทฤษฎีฟิลด์อินพุตดัชนีและอินพุตการเขียนโปรแกรม
Microsoft SQL Server ติดตั้งด้วยช็อคโกแลตแพ็คเกจเหล่านี้ติดตั้ง:
cinst sql-server-express
cinst sql-server-management-studio
และสำหรับการติดตั้งช็อคโกแลตคำสั่งนี้จะต้องเรียกใช้จากบรรทัดคำสั่งผู้ดูแลระบบ:
@"%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"
เพื่อสร้างฐานข้อมูล:
การตรวจสอบตัวเลือกข้อผิดพลาดสำหรับเดี่ยว
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
}ค้นหาความแตกต่างในไฟล์
<input id="isDone" name="isDone" type="checkbox" value="true" >หลังสร้างสิ่งนี้:
<input name="isDone" id="isDone" type="checkbox" value="true">
<input name="isDone" type="hidden" value="false">
มันใช้งานได้โดยช่องทำเครื่องหมายจะมาพร้อมกับ formdata เท่านั้นหาก มีการทำเครื่องหมาย ถ้าไม่ เบราว์เซอร์ก็ไม่ได้ส่ง ในกรณีนี้ (ถ้าไม่มีเห็บ) ฟิลด์ที่ซ่อนอยู่นั้นมาจากเบราว์เซอร์ซึ่งเป็นสิ่งที่ false เหมือนกับว่าช่องทำเครื่องหมายไม่ได้ทำเครื่องหมาย และถ้าเห็บอยู่ที่นั่น ค่าทั้งสองจะเกิดขึ้น true และ false และ ModelBinder เลือกอันแรกตามคำสั่งซื้อของพวก 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 และ CSS ผลิตหลักสูตรฟรีมือ
การใช้สไตล์ลิ้นคำอธิบาย HTML ช่วยให้คุณสามารถป้อนพารามิเตอร์ style ให้กับสมาชิก HTML ทั้งหมด ในสิ่งนี้คุณสามารถเข้าสู่การตั้งค่าสำหรับการระบายสีการจัดรูปแบบและตำแหน่ง เพิ่มเติมเกี่ยวกับหน้า W3Schools นั้นคุ้มค่าที่จะดู
ใช้สไตล์ที่สม่ำเสมอสำหรับสิ่งนี้สำหรับ CSS: Styles ถูกแยกออกจากรหัส HTML, HTML คือเนื้อหา, CSS เป็นคำจำกัดความของรูปร่าง คุณสามารถดูเว็บไซต์นี้โดยละเอียด
การตั้งค่า CSS สามารถทดสอบได้ในเบราว์เซอร์โดยเรียกเครื่องมือนักพัฒนา (F12)
แพ็คเกจเว็บจากศิลปินกราฟิกของ Twitter และหนึ่งในโปรแกรมเมอร์ซึ่งสามารถแสดงเว็บไซต์เฉพาะ (ปรับให้เข้ากับขนาดที่แตกต่างกันโดยอัตโนมัติ) แพ็คเกจพร้อมใช้งานที่นี่ซอร์สโค้ดอยู่ใน GitHub
หนึ่งในรากฐานของ bootstrap คือระบบกริด
หลักการอื่น ๆ คือการสร้างองค์ประกอบการแสดงผลที่แตกต่างกันโดยการจัดหาพารามิเตอร์ class โดยไม่มีความรู้ CSS และ JavaScript อื่น ๆ รายการของแต่ละองค์ประกอบ
ขั้นตอนในการสร้างหน้า HTML:
@ {
Layout = null ;
}<head></head> และใช้ JavaScript ที่ส่วนท้ายของส่วน <body></body> @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
ในเฟรม HTML คุณพลาดสองแห่ง:
@RenderBody() ระบุส่วนที่มุมมองถูกกำหนดโดยการกระทำ<body></body> ทิ้งไว้จากสิ่งนี้ @RenderSection ( "scripts" , required : false )ในตอนท้าย JavaScrips จะถูกโหลดจากชุดของคุณเอง:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
ดังนั้นการให้บริการคำขอ: การดำเนินการเลือกมุมมองมันเลือกเลย์เอาต์สร้างส่วนเนื้อหาของรหัส HTML ตามมุมมองสร้างหน้า HTML ตามรหัสเค้าโครงและมุมมองที่สร้างโดยมุมมองจะขยายไปถึงหน้าทั้งหมด
