سایر نوشته های من

 

 


آموزش MVC
Model - View - Controller

MVC3 آخرین تکنولوژی مایکروسافت در زمینه تولید صفحات وب (تا این لحظه ، یعنی مارچ 2011) می باشد که کم کم جایگزین روش قبلی تولید صفحات وب (Web Forms) می شود و جالب اینجاست که به شدت از سوی مایکروسافت تبلیغ می شود و منابع آن به سرعت انتشار می یابند. این تکنولوژی که در حال حاضر نسخه 3 آن منتشر شده است دارای مزیتهای زیر نسبت به تکنولوژی قبلی (Web Forms) می باشد(در واقع موارد ذیل مشکلات وب فرمها هستند).

  • در وب فرمها ، برنامه نویس کنترل زیادی روی خروجی HTML تولید شده توسط ASP.NET ندارد و اگر شما سورس کد صفحه را ببینید ، شاهد کد HTML شلوغی هستید که مشکل می توانید از آن سر در بیاورید
  • در وب فرمها با رد و بدل شدن ViewState در هنگام ارسال به سرور ، حجم آن زیاد می شود و صفحه به اصطلاح پف می کند 
  • ایجاد واحد تست (Unit Test) در وب فرمها مشکل است 
  • چرخه رد و بدل شدن فایل بین کلاینت و سرور پیچیده است

 تکنولوژی MVC تمام مشکلات فوق را حل می کند و مزایایی نیز دارد از جمله :

  • Method Request است یعنی شما می توانید به جای فراخوانی کل یک صفحه ، یک متد را فراخوانی کنید
  • Partly Open Source است . یعنی بخشی از کدهای اصلی آن "باز" است و می توانید تحت استاندارد نرم افزارهای متن باز ، آن را ویرایش کنید

من در ابتدا تصمیم داشتم که در 5 الی 6 مقاله کل مبحث را خلاصه کنم ولی ترجیح دادم تا به جای آن ، بصورت گام به گام یک پروژه MVC را شروع کنم و در طی آن مطالب جدید را بیان کنم. اما قبل از شروع :

- نصب برنامه :

 MVC2 در ویژال استودیو 2010 نگارش Ultimate از پیش نصب شده است ولی اگر بدنبال نصب MVC3 هستید ، از آدرس http://www.microsoft.com/web  ابزار WebMatrix را نصب کنید. این ابزار پس از نصب ، پنجره Web Platform Installer 3 را در اختیار شما می گذارد که نه تنها می توانید MVC3 را نصب کنید ، بلکه می توانید برنامه های مفید دیگه ، مثل تنظیمات توصیه شده مایکروسافت برای IIS7 یا موتور (engine) بسیاری از CMS های معروف مثل DotNetNuke ، Drupal , Joomla , Umbarco را نیز نصب کنید (یکی به عجایب هفت گانه دنیا اضافه شده !!!)

- مبانی MVC:

من چون نمی خواهم خیلی وارد مباحث تئوریک شوم بصورت خلاصه توضیح می دهم و زمانی که پروژه را شروع کردیم ، خودتان این مفاهیم را بهتر متوجه می شوید . برای شروع از MVC2 آغاز می کنیم و پس از طرح مباحث اصلی MVC3 را نیز شرح می دهم .

در MVC سه جزء اصلی وجود دارد :

  • Model
  • Controller
  • View

Model کلاسهایی برای ارتباط با دیتابیس و استفاده از تکنیک هایی مثل Linq و Entity Framework هستند

Controller قلب MVC است و کنترل کننده درخواستهای کاربر است ، کلاسهایی هستند که در آنها ، متدهای (اکشن های) مختلف جهت پاسخگویی به درخواست کاربر و انتخاب Model و یا View (خروجی) مناسب ، وجود دارد.

View رابط کاربری است یعنی آنچه کاربر باید ببیند را در آن نمایش می دهیم.

- ایجاد پروژه جدید : برای ایجاد پروژه جدید مطابق معمول از منوی File ویژال استودیو ، گزینه New و سپس Project را انتخاب کنید و سپس یکی از قالبهای زیر را انتخاب کنید :

  • ASP.NET MVC2 Web Application
  • ASP.NET MVC2 Empty Web Application

(البته اگر MVC3 را نصب کرده باشید ، MVC3 را هم می بینید) تفاوت دو قالب فوق در این است که اولی شامل یک سری الگوهای آماده ، مثل Membership دات نت فریم ورک ، مراجع Jquery ، کلاسهای CSS از پیش ساخته شده است ولی دومی (Empty) اینها را ندارد و خودتان باید آنها را اضافه کنید برای شروع ، قالب اول را انتخاب کنید، نام و مسیر مناسبی برای آن انتخاب کنید و پروژه را ایجاد نمایید ، از شما سوال می شود که آیا تمایلی به ایجاد واحد تست دارید یا خیر (که من برای شروع خیر را انتخاب می کنم، توی شکل زیر Yes انتخاب شده !) :



پس از ایجاد باید شکل Solution Explorer شما به صورت زیر باشد :



 همانطور که می بینید پوشه های مجزایی برای هر دسته از فایلها وجود دارد : مثل Controller , View , Model , ... پوشه Script شامل فایلهای جاوا اسکریپت و Jquery و MicrosoftAjax است . پوشه Conetnt هم محلی برای نگهداری فایلهای CSS و تصاویر است. اگر برنامه را اجرا کنید (F5) باید صفحه ای آبی رنگ با پیام Welcome to ASP.NET MVC! مشاهده کنید.

برای شروع کار فایل HomeController.cs از فولدر Controllers را باز کنید . کدهای زیر را در آن می بینید :

namespace _30Sharp_com_MVC.Controllers
{
    public class HomeController : Controller
    {
        [HandleError]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewData["Message"] = "Welcome to ASP.NET MVC!";

                return View();
            }

            public ActionResult About()
            {
                return View();
            }
        }

    }
}

نکاتی که از کد فوق برداشت می کنیم :

هر فایل از نوع Controller با کلمه دلخواهی شروع می شود و بدنبال آن کلمه Controller می آید و این نام دلخواه در URL سایت تاثیر می گذارد . قالب URL در MVC به فرم زیر است :

Web site address/Controller/Action

اکشن / کنترلر / آدرس اصلی سایت

برای مثال برنامه را اجرا کنید ، روی لینک About  کلیک کنید و URL صفحه را ببینید ، چیزی شبیه این می بینید (به جز شماره پورت که متفاوت است)

http://localhost:34256/Home/About

به متدها و رخدادهای صفحه در ام وی سی ، Action می گویند و در هر کنترلر می توانید چندین اکشن بیاورید و یا Overload کنید خروجی اکشن ها ، به صورت پیش فرض ActionResult است ولی می تواند هر نوع دیگری باشد (مثلا string) . در یک کنترلر شما ممکن است چندین اکشن داشت که برای هر اکشن یک View ایجاد می کنید و در آن ، مشخص می کنید که کاربر چه خروجی را باید مشاهده کند . برای مثال زیر اکشن About ، من اکشن دیگری به نام Contact ایجاد می کنم و در آن اطلاعات خود را در Message ذخیره می کنم :

public ActionResult Contact()
{
    ViewData["Message"] = "My Email : Amir.Madadi@hotmail.com and My Contact is 0422760153";
    return View();
}


توضیح اینکه شئی ViewData از نوع دیکشنری است که در آن می توانید کلید تعریف کنید و به آن مقدار دهید که من در اینجا کلیدی یه نام Message تعریف کرده ام و اطلاعات تماس را درون آن ریخته ام .

حال باید برای این اکشن یک View ساخت تا مشخص کنیم کاربر چه چیزی را ببیند. برای این کار روی اکشن کلیک راست می کنیم و گزینه Add View را انتخاب می کنیم :

سپس پنجره زیر ظاهر می شود :

در مورد امکانات این پنجره بعدا صحبت می کنیم ، فعلا پیش فرضها را قبول کنید و روی Add کلیک کنید . خواهید دید که فایلی به نام Contact.aspx در فولدر View ایجاد می شود . در تگ Asp:Contect id="Content2" خط زیر را اضافه کنید :

<h2><%: ViewData["Message"%>h2>

کد صفحه Contact.aspx شما باید شبیه این باشد :



حال برنامه را اجرا کنید و بعد از شماره پورت تایپ کنید : Home/Contact/ یعنی چیزی شبیه این :

http://localhost:34256/home/contact

اگر متن تایپ شده را در صفحه می بینید، به خود تبریک بگویید ، چون اولین صفحه وب خود را با تکنولوژی MVC ساخته اید.

قبل از پایان ، نگاهی به ساب فولدرهای View بیندازید ، خواهید دید که به ازای هر Controller یک فولدر وجود دارد که در آن View های مربوطه نگهداری می شوند (در حال حاضر باید Account ، Home و Shared را ببینید) که فولدر Shared برای ذخیره کردن اجزای مشترک مثل Master Page ها استفاده می شود.

خب تا اینجای کار یک پروژه جدید MVC ایجاد کردیم ، کمی در مورد ساختار MVC صحبت کردیم و یک View جدید به پروژه اضافه کردیم . در مقاله بعدی صفحاتی با کارایی بیشتر ایجاد می کنیم، تا آن موقع مروری بر دانسته های خود درباره Linq to SQL داشته باشید ، چرا که بزودی از آن در صفحات Model استفاده می کنیم

 

------

 بخش اول نحوه ایجاد یک پروژه MVC ، ساختار آن و نحوه اضافه کردن یک اکشن به یک کنترلر توضیح داده شد. و اما ادامه کار :

- چرخه کار MVC :

به طور کلی فرآیند درخواست و پاسخ بین کلاینت و سرور در MVC به صورت زیر می باشد :

  1.  یک درخواست از طرف کاربر ( کلاینت ) به سرو ارسال می شود (مثل مشاهده یک صفحه یا یک رویداد خاص مثل Button_click)
  2. بخشی از MVC که به آن موتور مسیر یاب ( Routing Engine ) می گویند، کنترلر متناسب با آن درخواست را پیدا می کند .
  3. اکشن متناسب با درخواست اجرا ( Invoke ) می شود و در صورت لزوم داده ها را از Model مناسب می خواند.
  4.  View متناسب با اکشن ، به همراه داده های خوانده شده از Model به سمت کاربر ارسال می شود .

پس به زبان ساده تر :

اگر قصد دارید در برنامه خود رویدادی مثل Button_Click  را فراخوانی کنید ، باید اول در کنترلر خود ، اکشنی را برای آن ایجاد کنید که این اکشن ممکن است داده ها را از کلاس ها یا از Model مربوطه بخواند. سپس برای این اکشن یک صفحه ( View ) مناسب ایجاد کنید. برای هر رویداد دیگری باید همین مراحل را تکرار کنید، یعنی صفحه ای که مثلا 5 دکمه دارد، باید یک کنترلر که درون آن 5 اکشن است و 5 view متناظر با آن داشته باشد و این به شما کمک می کند تا صفحات اختصاصی  ، کاراتر و خلوت تری داشته باشید.

 برای اینکه قالبی که Routing Engine از آن استفاده می کند را ببینید ، فایل Global.asax.cs را از درون Solution Explorer خود باز کنید و به بخش RegisterRoutes آن توجه نمایید. قالب URL  و اینکه کدام پارامترها اختیاری ( Optional ) هستند ( در اینجا id ) مشخص شده است :

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default"// Route name
        "{controller}/{action}/{id}"// URL with parameters
        new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );

}

اما مثالهای عملی :

مثال اول: در این مثال ، چند اکشن مختلف با پارامتر و بدون پارامتر آورده شده تا تاثیر آن را در URL صفحه ببینید. در این مثال چون خروجی اکشن ها از نوع string است نیازی  به ساختن View نیست . برای اینکار با کلیک راست روی فولدر Controller یک کنترلر جدید به نام SecondController ایجاد کنید : 

سپس در این کنترلر ، سه اکشن زیر را ایجاد کنید :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace _30Sharp_com_MVC.Controllers
{
    public class SecondController : Controller
    {
        //          // GET: /Second/ 
        public string Index()
        {
            string message = "hello !";
            return Server.HtmlEncode(message);
        }
        public string testAction(string id)
        {
            string message = "Hello " + id;
            return Server.HtmlEncode(message);
        }
        public string SayHello(string name)
        {
            string message = "Say hello to: " + name + " " + Server.HtmlEncode(Request.QueryString["family"]);
            return Server.HtmlEncode(message);
        }
    }
}

در هنگام نوشتن اکشن ها به خروجی اکشن و پارامترهای آن توجه کنید. در اکشن Index فقط یک متن ساده نوشته شده است. در اکشن دوم، متغیر id از ورودی خوانده می شود و به همراه پیام نمایش داده می شود . در اکشن سوم علاوه بر متغیر name متغیر دیگری از طریق QueryString خوانده می شود.

 در اینجا چون خروجی یک رشته ساده است ، View برای آن تعریف نمی کنیم و خروجی آن را از طریق خط آدرس URL مشاهده می کنیم ( به ترتیب خروجی اکشن اول تا سوم )

( فالب آدرس را که فراموش نکرده اید : ControllerName/ActionName/Parameter )

نکته : در این مورد چون نام اکشن Index است ( پیش فرض ) ، نیازی به تایپ آن نیست

مثال 2 : در این مثال چگونگی انتقال یک list از نوع string را به View ( خروجی ) خواهیم دید. برای این کار ابتدا مانند مثال قبل یک Controller جدید به نام ThirdCintroller ایجاد کنید و درون آن لیستی از نوع string ایجاد کنید و مقدار دهی کنید :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace _30Sharp_com_MVC.Controllers
{
    public class ThirdController : Controller
    {
        //          // GET: /Third/  
  
        public ActionResult Index()
        {
            List<string> StudentName = new List<string> { "Houman""Amir""Neda" };
            ViewData["SName"] = StudentName.ToList();
            return View();
        }
    }
}

سپس برای آن یک View جدید ایجاد کنید ، یعنی روی نام اکشن ( Index ) کلیک راست کنید و Add view را انتخاب و گزینه های پیش فرض را بپذیرید :

سپس در صفحه ایحاد شده ، کد زیر را وارد کنید :

<asp:content id="Content2" contentplaceholderid="MainContent" runat="server">
        <h2>Indexh2>
              <% foreach (var s in (IEnumerable)ViewData["Sname"]) { %>
                    <%: s%> 
                    <br />  
              <% } %>  
asp:content>

همانگونه که مشاهده می کنید ، در کد فوق ، یک حلقه foreach وجود دارد که لیست ذخیره شده در متغیر Sname را می خواند ، آن را به نوع IEnumerable تبدیل می کند و چاپش می کند .

توضیح اینکه علامت :%> را وفتی بکار می بریم که بخواهیم مقداری را چاپ کنیم ( در اینجا مقدار s ) . خروجی بصورت زیر خواهد بود :

3- خب برای تمرین مطالب بیان شده ، مثال بعدی را خودتان بنویسید . سعی کنید در یک کنترلر جدید ، با مقدار دادن به یک متغیر از نوع list در هنگام چاپ ، طول رشته را هم چاپ کنید .

در این جلسه با کنترلر ها بیشتر آشنا شدیم و نحوه پیمایش یک لیست را در خروجی دیدیم. در جلسه بعد ، با Model آشنا می شویم و نحوه انتقال مقادیر را از بانک اطلاعاتی به خروجی خواهیم دید.

 لطفا برای ارتقای کیفی این سری از مقالات ، نظرات خود را ارسال فرمایید.

 

---

در بخش دوم درباره چگونگی نوشتن چند اکشن در یک کنترلر و ارتباط آن با

در بخش دوم درباره چگونگی نوشتن چند اکشن در یک کنترلر و ارتباط آن با URL صفحه دیدید، در این بخش درباره Model و نحوه استفاده از آن صحبت می کنیم.

- Model

مدل در MVC  ، محلی برای ایجاد کلاسهای مرتبط با بانک اطلاعاتی است. در مدل ها نیز می توانید از تمام الگوهای ارتباط با بانک اطلاعاتی مثل Linq یا Entity Framework استفاده کنید.

برای اینکه بتوانیم مثالی از Model  ها بیاوریم ، ابتدا یک بانک اطلاعاتی SQL  با یک جدول ساده شامل فیلدهایی مثل نام ، فامیل و سن ایجاد کنید ، یعنی باید جدولی به فرم زیر داشته باشیم :

سپس برای ارتباط با بانک اطلاعاتی یک DataContex از نوع Linq to SQL ایجاد می کنیم . برای این کار روی Solution خود کلیک راست کرده و از قسمت Data گزینه Linq to SQL را انتخاب کنید :

سپس جدول ساخته شده در بانک اطلاعاتی را به داخل آن Drog&Drop کنید :

و Solution را Build کنید.

حال در Solution Explorer روی Controllers کلیک راست کرده و یک کنترلر جدید ایجاد می کنیم و نام آنرا PersonController می گذاریم و کد زیر را درون آن وارد می کنیم:

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

namespace _30Sharp_com_MVC.Controllers
{
    public class PersonController : Controller
    {
     
        MVCDataContexDataContext db = new MVCDataContexDataContext();
        public ActionResult Index()
        {
            var list = (from m in db.Persons select m ).ToList();
            return View(list);
        }

    }
}

همانطور که می بینید در این کنترلر یک نمونه از شئی Data Context با نام db ایجاد کرده ایم و سپس با استفاده از Linq to Sql لیست کلیه سطرهای جدول Person را استخراج کرده ایم . توجه نمایید که خروجی اکشن از نوع ActionResult() است که لیستی از جدول Person را به View ارسال می کند ( اگر در مفاهیم Linq to Sql مشکل دارید ، توصیه می شود که قبل از ادامه این مبحث آن را مطالعه کنید)

پس تا اینجا نتایج را به View ی مربوطه انتقال دادیم . خب زمان آن رسیده که View مناسب برای نمایش این فیلدها ایجاد کنیم . با کلیک راست روی اکشن Index گزینه Add view را انتخاب می کنیم و آنرا Index نام می نهیم. در هنگام ایجاد View به پارامترهایی که با فلش مشخص شده اند توجه فرمایید.

 کد View بصورت زیر ایجاد می شود :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Indexh2>
    <table>
        <tr>
            <th>
            th>
            <th>
                ID
            th>
            <th>
                Name
            th>
            <th>
                Family
            th>
            <th>
                Age
            th>
        tr>
        <% foreach (var item in Model)
           { %>
        <tr>
            <td>
                <%: Html.ActionLink("Edit""Edit"new { id=item.ID }) %>
                |
                <%: Html.ActionLink("Details""Details"new { id=item.ID })%>
                |
                <%: Html.ActionLink("Delete""Delete"new { id=item.ID })%>
            td>
            <td>
                <%: item.ID %>
            td>
            <td>
                <%: item.Name %>
            td>
            <td>
                <%: item.Family %>
            td>
            <td>
                <%: item.Age %>
            td>
        tr>
        <% } %>
    table>
    <p>
        <%: Html.ActionLink("Create New""Create"%>
    p>
asp:Content>

همانگونه که مشاهده می کنید ، در کد فوق ، یک حلقه foreach وجود دارد که لیست ذخیره شده را چاپ می کند . اما چند نکته در مورد View فوق :

  1.  در خط اول می بینید که در Inherit نام جدول Person آورده شده و منظور این است که از Model استفاده شده در این صفحه از نوع Person می باشد. این خط به این دلیل ایجاد شده که در هنگام ایجاد این View ، در قسمت View data class گزینه _30Sharp_com_MVC.Person را انتخاب کرده ایم . اگر دیدید که چنین گزینه ای وجود ندارد ، دلیلش آن است که پروژه را Build نکرده اید.
  2.  در هنگام اضافه کردن View در قسمت View Content گزینه های دیگری مثل Create ، Delete ، Edit وجود دارد که با انتخاب هر کدام ، کد تولید شده در View متفاوت خواهد بود.
  3.  پس از اجرا برای دیدن خروجی به آدرس زیر بروید : 
    Localhost:0000/Person/index
    که به جای 0000 شماره پورتی که ویژال استودیو از آن استفاده می کند قرار می گیرد.
  4.  وقتی برنامه را اجرا کنید ، متوجه خواهید شد که لیست سطرهای جدول نمایش داده می شود ولی لینکهای Edit /Details/ Delete / و همچنین Create New کار نمی کند. چرا؟ چون هنوز Action متناظر با آنها ایجاد نشده است .
  5. کلاس Html دارای متدهای مختلفی است از جمله ActionLink که برای لینک دادن بکار میرود . و دارای 10 حالت مختلف ( Overload ) است که در این حالت یعنی :
<%: Html.ActionLink("Create New""Create"%>

پارامتر اول متن لینک و پارامتر دوم نام Action ی است که اجرا می کند.

در این جلسه با ایجا

/ 0 نظر / 14 بازدید