ويعد هيكل مصمم " نموذج - فيو " نمط تصميم مجرب زمنيا يفصل الشواغل في إطار تطبيق على شبكة الإنترنت، مما يسهل إدارة التعقيدات، ومكونات الاختبار في عزلة، وملامح النطاق بمرور الوقت، وفي إطار برنامج " إس إس إس إن تي " ، تعد وزارة العلوم والتكنولوجيا من أوائل المواطنين، وتوفر إطارا قويا لبناء تطبيقات شبكية حديثة وقابلة للاستمرار، ويسير هذا الدليل في تنفيذ كل خطوة من الممارسات الأولية في مجال تكنولوجيا المعلومات والاتصالات في مجالا.

فهم نمط MVC في ديبث

قبل أن يغزو الرمز، من الضروري معرفة كيف أن المكونات الأساسية الثلاثة لـ "إم في سي" تتعاون لمعالجة طلب المستخدم، النمط يحدد المسؤوليات الواضحة:

  • Model]: يمثل هيكل البيانات وقواعد العمل، ولا يعرف عن القيد غير الرسمي أو كيف تظهر البيانات، وعادة ما تكون النماذج هي فصول واضحة من نوع C# تستوعب الممتلكات، ومنطق التصديق، ووصول البيانات (في كثير من الأحيان عن طريق إطار الكيان).
  • View]: Renders the user interface. In ASP.NET Core, views are Razor files ( 'cshtml`) that combine HTML markup with server-side C# code. Views should only display data, not contain complex sense.
  • المراقب المالي ]: يعمل كوسيط، ويتلقى طلبات من شركة HTTP، ويقرر أي نموذج يستخدم ويختار وجهة النظر المناسبة للعودة.() ويتضمن المراقبون أساليب عمل تحدد مسارات محددة.

The typical request flow in ASP.NET Core MVC: a user navigates to a URL (e.g., ), the routing middleware directs the request to the action, the action interacts with the model (e.g., fetches products from a database),packs the data into a view model, and passes it

الشروط المسبقة

  • .NET SDK] (الترجمة 6 أو فيما بعد).
  • Visual Studio], ], visual Studio Code, or any preferred code editor.
  • :: الإلمام الأساسي بمفاهيم التنمية في إطار الفئة " جيم " و " الويب " .

الخطوة 1: إنشاء مشروع جديد لشبكة المعلومات الاستراتيجية (ASP.NET)

يمكنك البدء إما بـ "الإنتي سي إل" أو "استديو الافتراضي" كلاهما يقدم نموذج مشروع يصف هيكل الملف القياسي لـ "إم في سي"

استخدام خط القيادة

افتحوا محطة طرفية وركضوا

dotnet new mvc -n MyMvcApp

This creates a project named in a new folder. The generated structure includes , , , and , and (for static files).

استخدام استديو الافتراضي

In Visual Studio, choose ] Create a new project] ⁇ select ASP.NET Core web App (Model-View-Controller) ⁇ configure your project name and location ⁇ choose.NET version (e. 8, ET automatically).

التحقق من سير المشروع:

cd MyMvcApp
dotnet run

يفتح لرؤية الصفحة الرئيسية.

الخطوة 2: فهم هيكل المشروع

ويتضمن المشروع المطوّل عدة بنود رئيسية:

  • المراقبون ]: ملف فارغ حيث ستضيف دروساً للسيطرة C#.
  • موديلات ]: مكان لفصولك وعارضات النظر.
  • Views]: Has a and folder by default, plus a layout.
  • Program.cs]: Application startup, where services (including MVC) are configured.

يفتح ويحيط علماً بالخطوط التي تمكن لجنة الخيارات التقنية المعنية ببروميد الميثيل من:

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

This sets up the default route that maps URLs like to .

الخطوة 3: إنشاء فئة نموذجية

النماذج تمثل البيانات التي يعمل بها تطبيقك، بدءاً من إنشاء نموذج داخل الملف .

// 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; }
}

في التطبيق الحقيقي، كنت عادةً تضيف سياق قاعدة البيانات (إطار عمل الحي) إلى النماذج المستمرة، لهذا الدليل سنستخدم البيانات الافتراضية لإبقاء التركيز على تدفق المركبات المتعددة الكلورات.

الخطوة 4: إضافة مراقب

ويعالج المراقبان الطلبات الواردة وينسقان الاستجابة.

// 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);
 }
}

النقاط الرئيسية:

  • IActionResult] هو نوع العودة، ويمكن أن يكون ، ، ، الخ.
  • Action names map to views in a folder named after the controller ().
  • The action has two overloads: one for GET (display the form) and one for POST (handle form submission).
  • يحمي من طلب التزوير عبر الموقع.

الخطوة 5: وضع آراء مع رازور سينتاكس

Views live in . The shared layout is in .

الرقم القياسي فيو - عرض القائمة

Create :]

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

Razor tips]: Use ] to shift from HTML to C#, and ]/] tag helpers to generate URLs.

التفاصيل

Create :]

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

Create View with Form

Create :

@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");}
}

Razor tag helpers like generate form fields with model binding and validation. The ] loads client-side validation scripts.

الخطوة 6: إضافة طرق الرسوب والعادة

تستخدم شركة (MVC) مسارات قائمة على الاتفاقية عن طريق التقصير، والطريق في خرائط ، ويمكنكم أيضاً إضافة مسارات مُعَدَّدة لزيادة السيطرة، مثلاً في جهاز التحكم:

[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) { ... }
}

وهذا النهج مفيد للمبادرات التطبيقية المستديمة عند الجمع بين .

الخطوة 7: استخدام نماذج الفيديو للبيانات المعقدة

غالباً ما تحتاج إلى أن تُعطي أكثر من شيء واحد من البيانات إلى وجهة نظر أو أن تُدرج ممتلكات إضافية (مثل القوائم المختارة، وكتابات الصفحات)

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: تنفيذ التقييم

ASP.NET Core MVC provides both server-side and client-side validation via data annotations. Add , , , and custom attributes. In the view, the [FLPO:54] displays mistake messages.

For custom validation logical, implement on your model or create a separate validation class. ASP.NET Core validation documentation] covers these patterns in detail.

الخطوة 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);
 }
}

سجل مستودع :

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

طريقة تسجيلات بالفعل لأجهزة التحكم في دي. هذا النمط يجعل تطبيقك أكثر نظافة وأكثر قابلية للاستمرار.

الخطوة 10: العمل مع العيون والآراء الجزئية

(ه) تحديد هيكل الصفحات العام (]) لتكييف وتعديل في ويمكنك تحديد الأقسام أو استخدام الآراء الجزئية لعناصر اليورانيوم القابلة لإعادة الاستخدام مثل الملاحة أو الأقدام أو إصدار بطاقات المنتجات.

مثال جزئي :

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

Include it in any view with .]

الخطوة 11: مدونة معالجة الأخطاء والوضع

وينبغي للمراقبين أن يتعاملوا مع الأخطاء بشكل مخلص.

  • for 404
  • for 400
  • لخطأ الخادم.

ويمكنكم أيضاً إضافة رأي خاطئ حسب الطلب: ] مدرج بالفعل في النموذج.

الخطوة 12: اختبار تطبيقات المركبات المتعددة الكلور

الاختبارات حاسمة، استخدام الفرنكوفونيت وحزمة ] لكتابة اختبارات الاندماج.

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());
 }
}

وتختبر الوحدة جهاز التحكم بخدمات متحركة لعزل المنطق، وتقدم ASP.NET Core testing documentation أمثلة واسعة.

أفضل الممارسات والأعباء المتقدمة

  • Keep controllers little]: منطق الأعمال ينتمي إلى الخدمات/المستودعات، وليس إلى أساليب العمل.
  • Usese view models]: Avoid passing domain models directly to views; use dedicated view models to shape data as needed.
  • Leverage tag helpers]: They make HTML clean and reduce errors in form binding.
  • Enable client-side validation]: Include and bundles (already in ).
  • Use async actions] for I/O-bound operations: with .
  • ضمان تطبيقك ]: استخدام نظام HTTPS، والعلامات المضادة للانفجار في استمارات POST، والإذن القائم على الدور عن طريق .

خاتمة

(أ) إن تنفيذ هيكل MVC في ASP.NET Core يوفر لك أساساً متيناً لبناء تطبيقات على الشبكة تكون منظمة وقابلة للاختبار ويمكن الحفاظ عليها، ويمكنك، بفصل النماذج والآراء والمراقبين، العمل على كل عنصر على حدة، وتوسيع نطاق تطبيقك بثقة، وتتيح الخطوات الواردة في هذا الدليل تمشي كامل من إنشاء المشاريع إلى أنماط قراءتها للإنتاج، بدءاً بمشروع بسيط، ثم إضافة ملامح قاعدة بيانات متطورة.