WebesTodoApp201806
1.0.0
Netacademia "私の最初のWeb C＃プロジェクト：To-Do Application"コース補足コードツアー
Facebookの一般的なDotnetグループ：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 Webアプリケーション（.NETフレームワーク）を作成します。
新しいプロジェクトを作成します： 
MVCアプリケーションの選択
アプリケーションディレクトリにHTMLファイルを作成すると、ASP.NETアプリケーションによってデフォルトです。つまり、ブラウザがこのファイルを要求した場合、サーバーはそれを彼に送り返します。
このリクエスト（ブラウザからサーバーへ）：
GET http://localhost:39399/SajatHtmlOldal.html
（ブラウザ内のサーバー）はHTMLページ（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 >ブラウザからファイルを開くことで同じように機能します。
file:///D:/Repos/WebesTodoApp201806/TodoApp/TodoApp/SajatHtmlOldal.html
それでも同じように表示されます。
HTTPのタスクは、ネットワークを介してコンテンツを照会する場合は、リクエストと回答の形式を説明することです。
HTTP要求は4つの部分で構成されています
最初の2つに興味があります。
方法：たとえば、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コンベンションによると、このタイトルの最初の部分はコントローラーに宛てられています（例：Home）。コントローラー：コントローラー - 2番目の部分は、リクエストを提供するアクションです。アクション：関数
これを使用して、各要求を関数に整理し、関数を制御単位に整理できます。
最初の2つのユニット（コントローラー/アクション）に続くタイトルの残りの部分に、何らかの形でリクエストのパラメーターが含まれることが重要です。
ASP.NET MVCフレームワークは、名前の慣習に非常に高度に構築されています。各要素の名前は、アプリケーションの操作において決定的な役割を果たします。
2つの重要なルーティングルールがあります。-アクションが指定されていない場合、それがインデックスです。 - コントローラーが指定されていない場合、ホーム/インデックスです
見解に基づく：
一般に、コントローラーのビューは、コントロールごとにグループ化されたWebアプリケーションの Viewsフォルダーにあり、グループ化フォルダーの名前はコントローラールーティング名と同じです。
たとえば、HomeControllerビューはビュー 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になり、モデルバインダーは順序に基づいて最初の値を選択します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）を呼び出すことにより、ブラウザでテストできます。
Twitterのグラフィックアーティストとそのプログラマーの1人からのWebパッケージ。特定のWebサイトを表示できます（さまざまなサイズに自動的に適応します）。パッケージはこちらから入手できます。そのソースコードはgithubにあります。
ブートストラップの基礎の1つはグリッドシステムです。
もう1つの原則は、他のCSSやJavaScriptの知識なしにclassパラメーターを提供することにより、異なる表示要素を作成することです。各コンポーネントのリスト。
HTMLページを生成する手順：
@ {
Layout = null ;
}<head></head>セクションにロードする必要があり、javaScriptは<body></body>セクションの最後に使用されます。 @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
HTMLフレームでは、2つの場所を見逃しています。
@RenderBody()行は、アクションによってビューが決定される部分を示します。<body></body>の最後に配置し、これから除外します @RenderSection ( "scripts" , required : false )最後に、Javascripsはあなた自身のバンドルからロードされます：
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
したがって、リクエストの提供：アクションビューを選択し、レイアウトを選択し、ビューに基づいてHTMLコードのコンテンツ部分を生成し、レイアウトコードに基づいてHTMLページを生成し、ビューによって生成されたビューはページ全体に拡張されます。
