در این پست از وبسایت پرووید در رابطه با مرتبط کردن قسمت های مختلف اپلیکیشن ASP.NET MVC صحبت خواهیم کرد. معماری MVC از معمول ترین و پرکاربردترین معماری های ساخت وب اپلیکیشن ها می باشد.

در این آموزش از وب سایت پرووید قصد داریم در رابطه با مرتبط کردن یک Controller و یک View و یک Model که در قسمت های قبلی از این آموزش آنها را ایجاد کرده ایم صحبت کنیم.

بسته ی آموزش ویدئویی تبدیل شدن به یک توسعه دهنده Full-stack در دات نت سری دوم

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی تبدیل شدن به یک توسعه دهنده Full-stack در دات نت سری دوم نیز دیدن کنید.

اگر قسمت های قبلی این آموزش از وب سایت پرووید را دنبال کرده باشید میدانید که در برنامه ما در حال حاضر یک Controller با نام StudentController و یک Model Class با نام Student و یک View با نام Index.cshtml ایجاد شده است.

در کد زیر تعریف Model را مشاهده می کنید.

namespace MVC_BasicTutorials.Models
{
    public class Student
    {
        public int StudentId { get; set; }
        public string StudentName { get; set; }
        public int Age { get; set; }
    }
}

در کد زیر تعریف Controller را مشاهده می کنید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_BasicTutorials.Models;

namespace MVC_BasicTutorials.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
            return View();
        }
    }
}

در کد زیر تعریف View را مشاهده می کنید.


@model IEnumerable<MVC_BasicTutorials.Models.Student>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>

@Html.ActionLink("Create New", "Create")

<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.StudentName)
</th>
<th>
@Html.DisplayNameFor(model => model.Age)
</th>
<th></th>
</tr>

@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.StudentName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
@Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
</td>
</tr>

}
</table>

برای این که ما بتوانیم برنامه را اجرا کنیم باید این سه مولفه در معماری ASP.NET MVC با هم مرتبط و یا یکپارچه و اصطلاحاً Integrate بشوند. در رابطه با این سه Component در مطلب بررسی معماری MVC در ساخت وب اپلیکیشن ها قبلا صحبت کردیم.

به منظور درک هرچه بهتر معماری ASP.NET MVC استفاده از بسته ی آموزش ویدئویی مقدماتی ASP.NET MVC وبسایت پرووید را به شما توصیه میکنیم. همانطور که در قسمت های قبلی از این آموزش خدمت شما عرض شد کلاس Student که به عنوان Model مربوط به View انتخاب شده است باید بتواند از درون Controller به سمت View ارسال شود و در View رندر شود. منظور از Render کردن همان نشان دادن اطلاعات است.

همانطور که در قسمت قبلی دیدید ما می خواهیم یک List از Student ها را در View رندر کنید. این موضوع را توسط Scaffolding Template در پنجره ی Add View لحاظ کردیم. بنابراین کاری که باید انجام دهیم این است که از درون Action Method ای با نام Index که در StudentController تعریف شده است، یک IEnumerable از نوع Student را به View تحویل بدهید. این موضوع در کد زیر نشان داده شده است.

public class StudentController : Controller
{
    // GET: Student
    public ActionResult Index()
    {
        var studentList = new List<Student>{ 
                            new Student() { StudentId = 1, StudentName = "John", Age = 18 } ,
                            new Student() { StudentId = 2, StudentName = "Steve",  Age = 21 } ,
                            new Student() { StudentId = 3, StudentName = "Bill",  Age = 25 } ,
                            new Student() { StudentId = 4, StudentName = "Ram" , Age = 20 } ,
                            new Student() { StudentId = 5, StudentName = "Ron" , Age = 31 } ,
                            new Student() { StudentId = 4, StudentName = "Chris" , Age = 17 } ,
                            new Student() { StudentId = 4, StudentName = "Rob" , Age = 19 } 
                        };
        // Get the students from the database in the real application

        return View(studentList);
    }
}

همانطور که در کد بالا مشاهده می کنید ما یک List از نوع Student را ساخته ایم و آن را با Object هایی از کلاس Student پر کرده ایم. این موضوع فقط برای یک مثال مناسب می باشد. در یک پروژه ی واقعی این Object ها عملاً از یک دیتابیس و یا یک وب سرویس خوانده می شوند. توصیه می کنیم که حتما از بسته ی آموزش ویدئویی ساخت Web API با استفاده از ASP.NET Core وبسایت پرووید برای درک هرچه بهتر سرویس های تحت HTTP و کار کردن با Backend استفاده کنید.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET MVC و React

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن با ASP.NET MVC و React نیز دیدن کنید.

پس از ساختن این List که در درون آن Object هایی از نوع Model Class یا همان Student قرار گرفته اند، آن را به عنوان پارامتر ورودی متد View تنظیم می کنیم و Return می کنیم. متد View که در کلاس Controller که Base Class این Controller است تعریف شده است، به طور خودکار این List از Student ها را گرفته و تحویل View می دهد. اگر برنامه را اجرا کنید و به آدرسhttp://localhost/Student بروید تصویری که در قسمت زیر مشاهده می کنید را در مرورگر خود خواهید دید.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک MVC استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل توسعه وب اپلیکیشن با ASP.NET MVC مشاهده کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *