首页>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向导生成完全正确的Bootstrap视图和向导。

家庭作业

  • 创建一个新的数据类
  • 与DB.CS联系
  • 创建手控制和对Crud的看法
  • 创建一个向导控制器并查看
  • 比较代码并证明差异合理。
  • 例如
    • 汽车（颜色，车牌，类型等）
    • 计算机
展开
附加信息
相关应用
为您推荐
相关资讯 全部