מדריך שלב אחר צעד ליישום ארכיטקטורת Mvc ב Asp.net Core

ארכיטקטורת מודל-View-Controller (MVC) היא תבנית עיצובית שנוסקת זמן המפרידה חששות ביישום אינטרנט, מה שהופך אותו קל יותר לנהל מורכבות, רכיבי מבחן בבידוד, ותכונות בקנה מידה לאורך זמן. ב-ASP.NET Core, MVC הוא אזרח ברמה הראשונה, מתן מסגרת חזקה לבניית יישומים מודרניים, שמירה על תוכניות אינטרנט. זה הולך דרך כל שלב של יישום MVC ב-ASP.NET, מתקדם שיטות מתקדמות כדי לקדם את עצמה.

הבנת תבנית MVC ב Depth

לפני צלילה לקוד, חשוב להבין כיצד שלושת רכיבי הליבה של MVC משתפים פעולה כדי להתמודד עם בקשת משתמש.התבנית מגדירה אחריות ברורה:

• (FLT:0)ModelveFLT:1: מייצג את מבנה הנתונים ואת כללי העסקים.זה לא יודע על UI או איך הנתונים מוצגים.מודלים הם בדרך כלל כיתות C# פשוטות, אשר מבססות תכונות, לוגיקה אימות, וגישה נתונים (בדרך כלל באמצעות מסגרת אנטי).
• (FLT:0)ViewofLT:1; Renders ממשק המשתמש. in ASP.NET Core, נופים הם קבצי Razor ('.cshtml') המשלבים את סימן HTML עם קוד C# השרתים צריכים רק להציג נתונים, לא מכיל לוגיקה מורכבת.
• (ב) ,0)ControllerentiFLT:1: Acts as the intermediary.It מקבל בקשות HTTP, מחליט איזו מודל להשתמש, ובחירת הנוף המתאים להחזיר.

הבקשה הטיפוסית נכנסת ל-ASP.NET Core MVC: משתמש מנווט ל-URL (למשל, FLT:0), התוכנה הממוקדת מכוונת את הבקשה לפעולה של FLT:1, הפעולה אינטראקציה עם המודל (למשל, להביא מוצרים ממסד נתונים), אורזת את הנתונים לדגם, ועוברת את זה לתצוגה של ה-HTML.

Prerequisites

• (ב) ,0.10 SDKsFLT:1 (הגרסה 6.0 ואילך) הורד מ-FLT:2 dotnet.microsoft.comearFLT 3: 3.
• (ב) ,0) ,(הופנה מהדף (ב) ,2 ,2 ,Wal Studio CodeveFLT 3: 3, או כל עורך קוד מועדף.
• היכרות בסיסית עם C# ומושגים לפיתוח אינטרנט.

שלב 1: יצירת פרויקט חדש של ASP.NET Core MVC

אתה יכול להתחיל עם .NET CLI או Visual Studio. Both לספק תבנית פרויקט שמצמציקה את מבנה תיקיית MVC סטנדרטית.

שימוש בקו הפיקוד

פתח מסוף ורץ:

dotnet new mvc -n MyMvcApp

כך נוצר פרויקט בשם FLT 3: בתיקייה חדשה, המבנה שנוצר כולל את ה-FLT:4,FLT:5, FLT:6 ו-FLT 7 (עבור קבצים סטטיים).

שימוש ב- Visual Studio

ב- Visual Studio, בחר באפשרות (FLT:0) להציג פרויקט חדש של מיזם חדש של ההרחבה:2ASP.NET Core Web App (Model-View-Controller)OVAFLT 3) , להגדיר את שם הפרויקט ואת המיקום שלך לבחור גרסה .NET (למשל, .NET 8).

בדוק את הפרויקט פועל:

cd MyMvcApp
dotnet run

פתח את דף הבית של [[1924]]

שלב 2: הבנת מבנה הפרויקט

הפרויקט המושפע מכיל מספר פריטים עיקריים:

• (ב) ,0) ,ControllersalFLT:1: תיקיה ריקה שבה תוסיף שיעורי בקר C#.
• (ב) ,0) מדאלאס (Modelsph: Place for your domain Class and View Models).
• (ב) ויקרא י"ד: "ויש לו תלמוד ב', ו[[1924]] ו[[1924]], [[1924]]]], [[1924]], [[1924]]]]
• (FLT:0)Program.csFLT:1: יישום ההפעלה, שבו שירותים (כולל MVC) מוגדרים.

פתח את ה-FLT:13 ו- Note את השורות שמאפשרות MVC:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();
...
app.MapControllerRoute(
 name: "default",
 pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();

זהו קו ברירת מחדל הממפה כתובות URL כמו FLT:15 ל-FLT:16.

שלב 3: יצירת מודל

מודלים מייצגים את הנתונים שהיישום עובד איתם, החל מיצירת מודל של FLT:17 בתוך התיקיה של ה-FLT:18.

// Models/Product.cs
namespace MyMvcApp.Models;

public class Product
{
 public int Id { get; set; }
 public string Name { get; set; } = string.Empty;
 public decimal Price { get; set; }
 public string? Description { get; set; }
 public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
}

ניתן להעשיר מודלים עם סטיות נתונים עבור אימות:

using System.ComponentModel.DataAnnotations;

public class Product
{
 public int Id { get; set; }

 [Required(ErrorMessage = "Product name is required.")]
 [StringLength(100)]
 public string Name { get; set; } = string.Empty;

 [Range(0.01, 10000)]
 public decimal Price { get; set; }

 [MaxLength(500)]
 public string? Description { get; set; }

 [Display(Name = "Created")]
 public DateTime CreatedAt { get; set; }
}

ביישום אמיתי, בדרך כלל תוסיף קישור מסד נתונים (Entity Framework Core) למודלים מתמשכים.עבור מדריך זה אנו נשתמש בנתונים תוך-זיכרון כדי להמשיך להתמקד בזרימת MVC.

שלב 4: הוספת מפקח

הבקר מטפל בבקשות הנכנסות ועורך את התגובה, יוצר תיקייה של ההרחבה "FLT:21" בתוך התיקיה של ה-FLT:22.

// Controllers/ProductsController.cs
using Microsoft.AspNetCore.Mvc;
using MyMvcApp.Models;
using System.Collections.Generic;

namespace MyMvcApp.Controllers;

public class ProductsController : Controller
{
 // Simulate a data source
 private static List<Product> _products = new List<Product>
 {
 new Product { Id = 1, Name = "Laptop", Price = 999.99m },
 new Product { Id = 2, Name = "Smartphone", Price = 599.99m },
 new Product { Id = 3, Name = "Tablet", Price = 399.99m }
 };

 // GET: /Products
 public IActionResult Index()
 {
 return View(_products); // Pass list to the view
 }

 // GET: /Products/Details/5
 public IActionResult Details(int id)
 {
 var product = _products.Find(p => p.Id == id);
 if (product == null)
 return NotFound();
 return View(product);
 }

 // GET: /Products/Create
 public IActionResult Create()
 {
 return View();
 }

 // POST: /Products/Create
 [HttpPost]
 [ValidateAntiForgeryToken]
 public IActionResult Create(Product product)
 {
 if (ModelState.IsValid)
 {
 product.Id = _products.Max(p => p.Id) + 1;
 product.CreatedAt = DateTime.UtcNow;
 _products.Add(product);
 return RedirectToAction(nameof(Index));
 }
 return View(product);
 }
}

נקודות מפתח:

• (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• מפת שמות פעולה להשקפות בתיקיה בשם הבקר (FLT27).
• לפעולה יש שתי עומסים: אחת עבור GET (הציגה את הטופס) ואחד עבור POST (הגשת טופס יד).
• מגן מפני בקשה באתר הצלב.

שלב 5: יצירת תצוגות עם Razor Syntax

(ב) "התפיסות" (ב) הן ב[[1924]], [[1924]]

תצוגה - Display a list

יצירת:

@model IEnumerable<MyMvcApp.Models.Product>
@{
 ViewData["Title"] = "Product List";
}

<h2>@ViewData["Title"]</h2>

<table class="table table-striped">
 <thead>
 <tr>
 <th>@Html.DisplayNameFor(model => model.Id)</th>
 <th>@Html.DisplayNameFor(model => model.Name)</th>
 <th>@Html.DisplayNameFor(model => model.Price)</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 @foreach (var item in Model)
 {
 <tr>
 <td>@item.Id</td>
 <td>@item.Name</td>
 <td>@item.Price.ToString("C")</td>
 <td>
 <a asp-action="Details" asp-route-id="@item.Id">Details</a>
 </td>
 </tr>
 }
 </tbody>
</table>

<p>
 <a asp-action="Create" class="btn btn-primary">Create New Product</a>
</p>

(ב) ויקרא י"א: ויקרא י"ד: "ה' י"א י"א ויקרא י"ד ויקרא י"ד ויקרא י"ד , ויקרא י"ד , ויקרא י"ד , ויקרא י"ד ).

פרטים View

יצירתו של ה-FLT:37

@model MyMvcApp.Models.Product
@{
 ViewData["Title"] = "Product Details";
}

<h2>@Model.Name</h2>

<dl class="row">
 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.Id)</dt>
 <dd class="col-sm-10">@Model.Id</dd>

 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.Price)</dt>
 <dd class="col-sm-10">@Model.Price.ToString("C")</dd>

 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.Description)</dt>
 <dd class="col-sm-10">@Model.Description</dd>

 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.CreatedAt)</dt>
 <dd class="col-sm-10">@Model.CreatedAt</dd>
</dl>

<a asp-action="Index">Back to List</a>

צור תצוגה עם טופס

יוצרי את ה-FLT:39

@model MyMvcApp.Models.Product
@{
 ViewData["Title"] = "Create Product";
}

<h2>Create</h2>

<form asp-action="Create">
 <div asp-validation-summary="ModelOnly" class="text-danger"></div>

 <div class="form-group">
 <label asp-for="Name"></label>
 <input asp-for="Name" class="form-control" />
 <span asp-validation-for="Name" class="text-danger"></span>
 </div>

 <div class="form-group">
 <label asp-for="Price"></label>
 <input asp-for="Price" class="form-control" />
 <span asp-validation-for="Price" class="text-danger"></span>
 </div>

 <div class="form-group">
 <label asp-for="Description"></label>
 <textarea asp-for="Description" class="form-control"></textarea>
 </div>

 <button type="submit" class="btn btn-primary">Create</button>
 <a asp-action="Index" class="btn btn-secondary">Cancel</a>
</form>

@section Scripts {
 @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

עוזרי תג רזאור כמו FLT:41 ליצור שדות טופס עם מודלים המחייבים ואימות.

שלב 6: הוספת נתיבי רוסינג ו- Custom

MVC משתמשת בקידוד מבוסס על חסימה כברירת מחדל.התוואי במפות (FLT:44 ).You יכול גם להוסיף תכונת מחיקה עבור יותר שליטה.

[Route("products")]
public class ProductsController : Controller
{
 [Route("")] // matches /products
 [Route("index")] // matches /products/index
 public IActionResult Index() { ... }

 [Route("{id:int}")] // matches /products/5
 public IActionResult Details(int id) { ... }
}

גישה זו מועילה ל- RESTful APIs בשילוב עם ההרחבה "HypLT:46".

שלב 7: שימוש ב- ViewModels for Complex Data

לעתים קרובות אתה צריך לעבור יותר מאובייקט נתונים אחד לתצוגה, או לכלול תכונות נוספות (כמו רשימות נבחרות, כותרות דף) שם מודלים של תצוגה באים.

namespace MyMvcApp.Models.ViewModels;

public class ProductIndexViewModel
{
 public IEnumerable<Product> Products { get; set; }
 public string SearchString { get; set; } = string.Empty;
 public decimal MaxPrice { get; set; } = 10000;
}

לאחר מכן, התאימו את פעולת הבקר כדי למפות את מודל התצוגה ולהעביר אותו לתצוגה.

שלב 8: יישום אימות

(א) .NET Core MVC מספק אימות בצד השרת והלקוח באמצעות אנטנות נתונים (תוספת FLT:50), ,FLT:51, FLT:52, ותכונות מותאמות אישית.

(הופנה מהדף לוגיקה רפורמציה אישית, יישום לוגיקה ,FLT:56) במודל שלך או ליצור מעמד אימות נפרד.הרש"ל:0ASP.NET Core אימות תיעוד של ההרחבה 1 מכסה את הדפוסים האלה בפירוט.

שלב 9: פיזור תלות בבקר

במקום נתונים קשיחים, אתה יכול להזריק שירותים (כמו קישור מאגר או מסד נתונים) לתוך בונה בקר.זה מקדם הפיכה ומבחן רופפת.

public class ProductsController : Controller
{
 private readonly IProductRepository _repository;

 public ProductsController(IProductRepository repository)
 {
 _repository = repository;
 }

 public IActionResult Index()
 {
 var products = _repository.GetAll();
 return View(products);
 }
}

שם הספר בלועזית : The Repository in the FLT:58

builder.Services.AddScoped<IProductRepository, ProductRepository>();

(הופנה מהדף ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

שלב 10: עבודה עם לייפוס ודעות חלקית

(למשל, FLT:61) מגדיר את מבנה העמוד הכולל.לתאים אישית, לשנות את ה-FLT:62 ב-FLT:63 ניתן להגדיר חלקים, או להשתמש בנוף חלקי לרכיבי UI הניתנים להחלפה כגון ניווט, רגלים או כרטיסי אשראי של מוצרים.

דוגמה חלקית (FLT:64)

@model Product
<div class="card">
 <div class="card-body">
 <h5 class="card-title">@Model.Name</h5>
 <p class="card-text">Price: @Model.Price.ToString("C")</p>
 <a asp-action="Details" asp-route-id="@Model.Id" class="btn btn-primary">Details</a>
 </div>
</div>

בכל מקרה, בכל מובן שהוא, ב-66.

שלב 11: שגיאות ידות וקודי סטטוס

בקרים צריכים לטפל בשגיאות בחסד (FLT:67 בלוקים או מטפל יוצא דופן גלובלי באמצעות קודים של סטטוס HTTP מתאים:

• « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « «
• (ב) ,69
• (ב) ,7) עבור שגיאות שרת.

ניתן להוסיף גם השקפה טעונית: FLT:71 כבר נכללת בתבנית. Set:72 ב-FLT:73 כדי להפנות את החריגים בייצור.

שלב 12: בדיקת יישום MVC

בדיקה היא קריטית לשימוש ב-xUnit וב-FLT:74 חבילות לכתיבה של בדיקות אינטגרציה.

public class ProductsControllerTests : IClassFixture<WebApplicationFactory<Program>>
{
 private readonly HttpClient _client;

 public ProductsControllerTests(WebApplicationFactory<Program> factory)
 {
 _client = factory.CreateClient();
 }

 [Fact]
 public async Task Index_ReturnsSuccessAndCorrectContentType()
 {
 var response = await _client.GetAsync("/products");
 response.EnsureSuccessStatusCode();
 Assert.Equal("text/html; charset=utf-8",
 response.Content.Headers.ContentType.ToString());
 }
}

יחידה בודקת את הבקר עם שירותים מטוגנים לבודד את ההיגיון:0 (ASP.NET Core Testing DocumentsFLT:1) מספקת דוגמאות נרחבות.

שיטות טובות וטיפים מתקדמים

• (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• (FLT:0) ראוות מודלים של FLT:1: להימנע ממודלים דומיין ישירות להשקפות; השתמש במודלים ייעודיים כדי לעצב נתונים במידת הצורך.
• (ב) ויקרא י"א): "ה' יֹאמַר: "וַיָּבְתָּבוּ לָכֶם" (בראשית כ"ד).
• (ב) ,0) ,ל"ד: "החלל" (ב) ,"ב)" (ב"ב) ,"ב) ,"ב[[1924]] , [15]
• (ב) ,0) פעולות חנינה: 1 עבור פעולות I/O-bound:80 עם FLT:81
• (ב) ,0) , עיין בבקשותיך: תמיד השתמש ב- HTTPS, בסימון אנטי-זרידי על צורות POST, ואישור מבוסס-תפקיד באמצעות FLT:82

מסקנה

יישום ארכיטקטורת MVC ב-ASP.NET Core נותן לך בסיס מוצק לבניית יישומי אינטרנט מאורגנים, ניסיוניים, וקיים. על ידי הפרדת מודלים, השקפות, ובקרים, אתה יכול לעבוד על כל רכיב באופן עצמאי ולהגדיל את היישום שלך עם ביטחון.הצעדים במדריך זה מספקים הליכה מלאה מיצירה לייצור תבניות מוכנות.com עם פרויקט פשוט, ולאחר מכן להוסיף מסד נתונים, אימות מתקדם, תכונות של 1F.