WebesTodoApp201806
1.0.0
Netacademia "أول مشروع الويب الخاص بي C#: جولة التعليمات الإضافية
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 من أربعة أجزاء
نحن مهتمون في الأولين.
الطريقة: على سبيل المثال ، GET ، POST ، PUT ، DELETE ، إلخ. تفاصيل عن ويكيبيديا
من المهم أيضًا ألا يتعامل بروتوكول 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 موجودة في المجلد المنزلي.
و: اسم كل ملف عرض هو نفسه إجراء وحدة تحكم الاسم ، التي ينتمون إليها.
ملاحظة: يمكن كسر هذه الاتفاقية: يمكنك أيضًا تحديد طريقة عرض محددة لإجراء ما.
وهذا يعني أن عرض الإجراء 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 الوصف إدخال معلمة style لجميع أعضاء HTML. في هذا ، يمكنك إدخال إعدادات التلوين والتنسيق والموقع. المزيد على صفحة W3Schools يستحق النظر إليه.
استخدام أنماط موحدة لهذا لـ CSS: يتم فصل الأنماط عن رمز 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 استنادًا إلى رمز التخطيط ، ويتم تمديد العرض الذي تم إنشاؤه بواسطة العرض إلى الصفحة بأكملها.
