WebesTodoApp201806
1.0.0
Netacademia "My First Web C# Project : TO-DO Application"코스 보충 코드 투어
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 Template의 도움을 받아 생성됩니다.
마법사를 사용하면 다음과 같이 ASP.NET MVC 웹 응용 프로그램 (.NET Framework)을 만듭니다.
새 프로젝트 만들기 : 
MVC 응용 프로그램 선택 
Application Directory에서 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 요청은 네 부분으로 구성됩니다
우리는 처음 두에 관심이 있습니다.
방법 : 예 : Get, Post, Put, Delete 등 Wikipedia에 대한 세부 정보
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 컨벤션에 따르면 -이 타이틀의 첫 번째 부분은 컨트롤러 (예 : 홈)로 해결됩니다. 컨트롤러 : 컨트롤러 - 두 번째 부분은 요청을 제공하는 조치 입니다. 행동 : 기능
이를 사용하여 각 요청을 기능으로 구성하고 기능을 제어 장치로 구성하는 데 사용할 수 있습니다.
처음 두 단위 (컨트롤러/액션)를 따르는 나머지 제목에는 요청의 매개 변수가 어떤 형태로 포함되어야합니다.
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 name="valami megnevezés"/> )이있는 <input /> 가 필요합니다 - <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">
Checkbox의 작동은 틱이있는 경우에만 작동합니다. 그렇지 않다면 브라우저는 단순히 그것을 보내지 않습니다 . 이 경우 (진드기가없는 경우) 숨겨진 필드는 브라우저에서 나옵니다. 마치 확인란이 틱되지 않은 것처럼 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 설명 혀를 사용하면 모든 HTML 멤버에게 style 매개 변수를 입력 할 수 있습니다. 이에서는 채색, 서식 및 위치에 대한 설정을 입력 할 수 있습니다. W3Schools 페이지에 대한 자세한 내용은 살펴볼 가치가 있습니다.
CSS의 경우 균일 한 스타일을 사용하십시오. 스타일은 HTML 코드에서 분리되며 HTML은 콘텐츠이며 CSS는 모양의 정의입니다. 이 사이트를 자세히 볼 수 있습니다.
CSS 설정은 개발자 도구 (F12)를 호출하여 브라우저에서 테스트 할 수 있습니다.
트위터의 그래픽 아티스트와 프로그래머 중 하나의 웹 패키지로 특정 웹 사이트를 표시 할 수 있습니다 (자동으로 다른 크기로 조정). 패키지는 여기에서 사용할 수 있으며 소스 코드는 Github에 있습니다.
부트 스트랩의 기초 중 하나는 그리드 시스템입니다.
다른 원칙은 다른 CSS 및 JavaScript 지식없이 class 매개 변수를 제공하여 다른 디스플레이 요소를 만드는 것입니다. 각 구성 요소의 목록.
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")
따라서 요청을 제공합니다. Action Select view, 레이아웃을 선택하고,보기를 기반으로 HTML 코드의 컨텐츠 부분을 생성하고, 레이아웃 코드를 기반으로 HTML 페이지를 생성하며, View에 의해 생성 된 뷰는 전체 페이지로 확장됩니다.
