首頁>ASP源碼>其他類別
下載

WebStodoApp201806

Netacademia“我的第一個網絡C＃項目：待辦事項應用程序”課程補充代碼之旅

Facebook上的dotnet Group：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

推薦課程

  • HTML製作令人印象深刻的網頁
  • HTTP網絡基本知識
  • git發現git！

創建我們的第一個Web應用程序

由於環境和開發工作流程對於這些類型的開發很複雜，因此它不是手動創建的，而是在Visula Studio模板的幫助下。

使用嚮導，我們創建ASP.NET MVC Web應用程序（.NET框架），如下：

創建一個新項目： 第一步：新項目

MVC應用程序選擇第二步：項目類型

創建和服務您自己的HTML頁面

如果我們在應用程序目錄中創建一個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請求由四個部分組成

  • 請求（地址+方法）
  • 內容
  • 標題
  • 最終狀態

我們對前兩個感興趣。

方法：例如獲取，發布，放置，刪除等。有關Wikipedia的詳細信息

同樣重要的是，HTTP協議不處理條件，因此請求是完全獨立的。

MVC：動態網頁的Web應用程序

如果您不想連續顯示靜態卡，但是：

  • 確定所有頁面的良好格式
  • 將您自己的數據匯總到網站的適當位置
  • 組織應用程序的相互作用

這是一項不錯的任務，ASP.NET MVC就是為此。

特定任務：TODO應用程序版本0（購物清單） 

 +-----------------+
|                 |
| Bevásárlólista  |
|                 |
+-----------------+
|                 |
| Só              |
|                 |
| Cukor           |
|                 |
| Spagetti        |
|                 |
| Marhahús        |
|                 |
| Paradicsom      |
|                 |
+-----------------+

在顯示的情況下

  • 數據與網站分開處理
  • 我們的網站應該很好

MVC應用的主要元素

是應用的重要部分

  • MVC：模型視圖控制器
    • 控制器是收到請求的對象，他的責任
      • 應要求，創建或委派答案，
      • 並將答案退還給請求者

問題：請求如何到達控制器？答：根據請求的標題。

例如： 

 GET http://localhost:39399/Home/About

這裡的標題上半年指向應用程序： 

 http://localhost:39399

標題的後半部分和該方法在應用程序中意味著某些內容： 

 GET /Home/About

處理此操作是路由的責任。在標題中，“/”是分離的標誌，即，可以將整個標題分解為有意義的部分，該部分可以通過應用程序處理。

根據ASP.NET MVC公約 - 該標題的第一部分是撥給控制器的（示例：Home）。控制器：控制器 - 第二部分是為請求服務的操作。動作：功能

這可以用來將每個請求組織到函數中，並將功能分解為控制單元。

重要的是，遵循前兩個單元（控制器/操作）的其餘標題將以某種形式包含請求的參數。

控制器（控制器）

  • 通常，由於透明度，我們將其放在應用程序控制器文件夾中。這是可選的，但建議使用。
  • 我們源自控制器類（強制性）（system.web.mvc.controller，這是用於Web應用程序，即生成Web頁面的控制類型）。
  • 班級名稱總是以控制器結尾，但在控制器之前，它不用於路由。

ASP.NET MVC框架在名稱約定上非常高度構建：每個元素的名稱在應用程序的操作中起決定性作用。

有兩個重要的路由規則： - 如果未指定操作，那就是索引。 - 如果未指定控制器，則為家/索引

視圖（視圖）

基於觀點：

  • MVC：模型視圖控制器
    • 視圖是一個原始的HTML文件，可以產生有意義的HTML文本。有自己的規則（剃須刀語言）為每個答案運行並生成最終的HTML

通常，控制器的視圖位於我們的Web應用程序的 Views文件夾中，每個控件分組，分組文件夾的名稱與控制器路由名稱相同。

例如：HomeController視圖位於視圖 Home文件夾中。

和：每個視圖文件的名稱與它們所屬的名稱控制器操作相同。

注意：可以打破此約定：您還可以為操作選擇特定的視圖。

也就是說，homecontroller.todolist（）動作的視圖自動屬於： views home todolist.chtml

您可以使用本教程編寫HTML代碼。

該視圖可以定義可行的數據模型的類型。

  • MVC：模型視圖控制器
    • 模型是包含在控制器和視圖之間傳遞數據的數據的對象

家庭作業

  • GitHub repo（註冊和自己的代碼庫）
  • 要了解您自己的項目的HTML，MVC和Github-Bal

從申請中為TODO元素提出CRUD申請

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> ）call parameters in Call parameTers in http://localhost:39399/Todo/Create?Tennival%C3%B3=agaadfgafgadf

獲取url querystring參數

   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------------------------->   |     |
|                                              |                                       |     |
|                                              |                                       |     |
|                                              |                                       +-----+
|                                              |
|                                              |
|                                              |
|                                              |
|                                              |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+

  • 在服務數據/視圖時，應以某種方式分開說明。那是，

    • 將會有一個功能，可以為創建導航提供服務，並放棄表單（獲取todo/create）[httpget]屬性以使操作僅獲取請求。
    • 將會有一個功能可以接受數據（post todo/create）[httppost]屬性以製作一個只有post post請求的函數。如果沒有屬性過濾器，則默認情況下，路由僅按名稱選擇，每個方法都是每個請求的一個操作。函數的簽名：函數名稱和Parmeter列表（Sorren中的類型列表，例如Create（String，String，int））。簽名不包括返回值。具有不同簽名的相同功能名稱被認為是不同的函數，可以創建。這是C＃基本功能。

  • 索引輸入字段定理和編程輸入

家庭作業

  • 嘗試自己的進氣頁
  • 前瞻性思維：如何解決刪除和修改？

任務

  • 製作自己的修改（編輯）表格
    • 看一看
    • 採取行動，因為我們更改了現有數據，因此我們需要確定適當的項目，因此：
      • 或者我按名稱找到該項目
      • 或者我做了一種“查找”方法。所有列表項目都必須識別。也就是說，只有在其他地方未列出的項目上有一個數據。這稱為唯一ID。這是需要改變的。這應該是一個數字，這是一個序列號。注意：創建時還必須完成ID！
    • 後操作（put表示可重複的更改：1次，2次，... 10倍相同的結果），不幸的是，HTTP使用put，但HTML表單不是，因此我們只能在get和post之間進行選擇。也就是說，此操作將獲得帖子。
  • 製作自己的刪除（刪除）表格
    • 看一看
    • 採取行動
    • 刪除行動中的動作
  • 製作自己的觀點（詳細信息）表格
    • 看一看
    • 採取行動
  • 從索引方面解決這些

數據庫管理

Microsoft SQL Server已安裝了巧克力，這些軟件包已安裝：

  • Microsoft SQL Server Express 
     cinst sql-server-express
  • SQL Server Management Studio： 
     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"

創建一個數據庫：

  • EntityFramework Nuget軟件包安裝
  • DB.CS類創建
  • DBContext的描述
  • 創建DBSET <>類型的預備（這將在數據庫中創建數據表）
  • 所有數據表必須具有唯一的ID（鍵）

家庭作業

  • 檢查單身錯誤選項

    • “序列包含多個元素”：如果多個元素的濾波器條件為真，例如： 
       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" >
    • 和 @html.checkbox（“ ISDONE”）。

後者產生了以下方式： 

 <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是形狀的定義。您可以詳細查看此網站。

    可以通過召集開發人員工具（F12）在瀏覽器中測試CSS設置。

引導程序

Twitter的圖形藝術家及其程序員之一的Web包，能夠顯示特定網站（自動適應不同尺寸）。該軟件包可在此處可用，其源代碼位於GitHub上。

引導程序的基礎之一是網格系統。

另一個原則是通過提供class參數來創建不同的顯示元素，而無需任何其他CSS和JavaScript知識。每個組件的列表。

ASP.NET HTML發電機結構

生成HTML頁面的步驟：

  1. 〜 views_viewstart.chtml（通常是設置佈局）
  2. 續集取決於指定的佈局，並且可能有一個以上的佈局頁面。我也可以禁用： 
    @ {
    Layout = null ;
}
  3. 佈局Olda包含HTML框架。 （例如：〜 views shared_layout.chtml）
  4. 在這裡，除了HTML生成外，它還還會決定網站填充的CSS和JavaScript文件。
  • CSS必須加載在<head></head>部分中，並且JavaScript在<body></body>部分的末端使用。
  • 這些文件被組織成軟件包（捆綁包），從而參考它們。 
     @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

  1. 在HTML框架中，您錯過了兩個地方：

    • @RenderBody()行指示視圖由操作確定的部分。
    • 我們將腳本代碼放在<body></body>的末尾，將其排除在外
       @RenderSection ( "scripts" , required : false )
      啤酒

    到最後，JavasCrips將從您自己的捆綁包中加載： 

     @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

因此，請求請求：操作選擇視圖，選擇佈局，基於視圖生成HTML代碼的內容部分，基於佈局代碼生成HTML頁面，並且視圖生成的視圖擴展到整個頁面。

我可以從巫師那裡得到什麼

  • 如果您使用EntityFramework並很好地生成了數據模型，則可以使用兩次單擊的Visual Studio Controler嚮導生成完全正確的Bo​​otstrap視圖和嚮導。

家庭作業

  • 創建一個新的數據類
  • 與DB.CS聯繫
  • 創建手控制和對Crud的看法
  • 創建一個嚮導控制器並查看
  • 比較代碼並證明差異合理。
  • 例如
    • 汽車（顏色，車牌，類型等）
    • 電腦
展開
附加信息
相關應用
爲您推薦
相關資訊 全部