سلام کاربران عزیز و گرامی امیدوارم که روز خوبی داشته باشید میخوام آموزشی در مورد mvc داشته باشم امیدوارم که
این آموزش برایتان مفیدواقع گردد.ما در این آموزش در مورد MVC صحبت می کنیم. برای روز اول ما یک برنامه ی ساده ی Hello World می سازیم که می تواند داده ها را بین کنترلرها و ویوها (Controllers and Views) جابجا کند. همچنین به بررسی HTML Helper Class ها می پردازیم. در مورد MVC Models صحبت می کنیم. و صفحه ی ساده ای که داده های مربوط به مشتری ها را دریافت می کند را ایجاد می کنیم. بعد از اون MVC را با Webforms و با ASP.NET مقایسه می کنیم. خیلی از توسعه دهنده ها فکر می کنند که ASP.NET نسبت به MVC متفاوت است اما واقعا باید بگوییم که هر دوی این ها یکی هستند. ASP.NET یک چارچوب تحت وب منتشر شده توسط مایکروسافت است و MVC یک الگوی کدنویسی در ویژوال استودیو است که برای نوشتن کد هایی استفاده میشه که می خواهیم از معماری MVC استفاده کنیم.
از این پس صفحات ASP.NET قدیمی را “ASP.NET Webforms”می نامیم. بنابراین “ASP.NET Webforms” یعنی همان ASP.NET قدیمی که Code Behind داشت و MVC چیز جدیدی است. پس هر دوتای این ها از چارچوب ASP.NET استفاده می کنند. پس اجازه بدهید خیلی راحت بگوییم که ASP.NET یک چارچوب است در حالی که MVC و Webform شیوه های کد نویسی هستند. MVC چیز جدیدی است و Webform همان شیوه ی کدنویسی قدیمی است که شامل Code Behind بود.
پس چرا MVC و چرا MVC بهتر از Webform است؟
به عنوان یک توسعه دهنده Webform، وقتی که با MVC کار می کنید بسیاری از روش های Webform را از دست می دهید. مثلاً درMVC مواردی مثل Code Behind ،Server Control ،ViewState و Page Life Cycle خیلی چیزهای دیگر وجود ندارد. پس احتمالاً در نگاه اول این عقیده را که MVC بهتر از Webform باشد را رد خواهید کرد. ولی باید بگوییم که در واقع تصور شما اشتباه است و برای درستی این باور که MVC بهتر ازWebform است. به احتمال زیاد برای متقاعد کردن شما در مورد برتری MVC نسبت به ASP.NET Webforms مطلبی را به سایت پرووید اضافه خواهیم کرد.
پیش نیازهای لازم برای MVC
قبل از اینکه شروع به کار کنیم باید مطمئن شویم که تمام ابزارهای لازم برای تولید یک برنامه MVC را داریم.
MVC اکنون ورژن های متفاوتی دارد مثل MVC 5 , MVC 4 , MVC 3 , MVC 2. بنابراین بر اساس اینکه کدام نسخه از ویژوال استودیو را دارید امکان دارد که ورژن های متفاوتی از MVC را نیاز داشته باشید. اگر می خواهید MVC 5 را کار کنید به ویژوال استودیو VS 2013نیاز دارید. اگر می خواهید با ۳ MVC و ۴ کار کنید به VS 2012 نیاز دارید. و برای MVC 2 شما به VS 2010 و ۲۰۰۸ نیاز خواهید داشت.
بنابراین وقتی این پیش نیازها را دارید می توانید آزمایش اول را شروع کنید.
آزمایش ۱ : ایجاد یک برنامه ساده Hello World با ASP.NET MVC
در این آزمایش، ما می خواهیم یک برنامه ی ساده ی Hello World را با استفاده از الگوی MVC بسازیم. یک کنترلر Controller ساده ایجاد می کنیم. سپس کنترلر ایجاد شده رو به یک صفحه ی ساده به اسم index.aspx متصل می کنیم و با یک View ی ساده آن را در مرورگر نمایش می دهیم.
مرحله ۱: انتخاب الگوی پروژه
ویژوال استودیوی ۲۰۱۳ را باز می کنید. روی منوی File کلیک می کنید بعد New Project و بعدVisual C# و بعد روی Web کلیک می کنید. بعد از اون روی الگوی ASP.NET Web Application کلیک می کنید.
مرحله ۲: انتخاب یکی از گزینه های مناسب برای ASP.NET
یکی از بزرگترین پیشرفت ها در MVC 5، اصطلاحا ASP.NET یکجا می باشد. اگر ورژن های قبل از ویژوال استودیوی ۲۰۱۳ را نگاه کنید (مثلاً ویژوال استودیوی ۲۰۱۲ و قبل تر)، وقتی که یک الگوی کدنویسی مثل MVC یا Webforms را انتخاب می کردید، دیگر مجبور بودید که کارتان را با آن ادامه دهید و نمی توانستید هر دوی این ها را در ویژوال استودیوی ۲۰۱۲ ادغام کنید. بنابراین اگر یک پروژه در MVC شروع کنید نمی توانید ازWebforms استفاده کنید. و اگر ازWebforms استفاده کنید بعد نمی توانید از MVC استفاده کنید. اگر می خواهید در مورد این مشکل در ویژوال استودیوی ۲۰۱۲ بیشتر بدانید. می توانید به عکس زیر در ویژوال استودیوی ۲۰۱۳ نگاه کنید. (برای بزرگتر شدن عکس روی آن کلیک کنید.)
vs2013snapshot
روی قسمت Web کلیک کنید و بعد الگوی Visual studio 2012 را انتخاب کنید. در این الگو می توانید ببینید که MVC و WebApplication و همه ی الگوهای دیگر لیست شده اند و وقتی که روی MVC کلیک می کنید و یک پروژه می سازید دیگر نمی توانید به سراغ Webforms بروید و باید کارتان را با MVC ادامه بدهید.
اگر به طور منطقی به قضیه نگاه کنید می بینید که MVC و WebForm و Web API به صورت درونی همگی از چارچوب ASP.NET استفاده می کنند. بنابراین داشتن الگو های متفاوت ساخت پروژه برای برنامه نویسان خیلی سردرگمی ایجاد کرده است. خیلی از برنامه نویسان اغلب اوقات در مورد ASP.NET شروع به فکر کردن می کنند و فکر می کنند ASP.NET از MVC متفاوت است. بزودی مقاله ای در این رابطه بر روی وبسایت پرووید قرار خواهد گرفت.
mvctemplate
بنابراین در VS 2013 همه الگوهای ساخت پروژه در یک الگوی ASP.NET یکجا جمع شده اند .یکجا! چه جالب!!! یعنی این الگوها ترکیب و با نام “ASP.NET Web Application” ارائه شده اند تا از این سردرگمی ها جلوگیری شود. و همچنین شما دقیقا شبیه قبل می توانید از تجاربتون در Webforms در MVC نیز استفاده کنید. بنابراین اگر یک پروژه از نوع MVC شروع کردید هنوز می توانید از فایل های Webforms که پسوند aspx دارند در پروژه ی MVC استفاده کنید.
vs2013template
بنابراین وقتی که بر روی پروژه ی “ASP.NET Web application” در VS 2013 کلیک می کنیم، می توانیم همه ی الگوهای مختلف رو یکجا ببینیم. بعد از انتخاب نام و مسیر پروژه و کلیک بر روی دکمه ی OK، در پنجره ی بعدی باید از بین الگوهای مختلف، الگوی مورد نظر خود را انتخاب کنید.
مرحله ۱: قالب MVC را انتخاب کنید و بعد از پایین چک باکس MVC را کلیک کنید. اکثر اوقات ممکنه که وقتی MVC را انتخاب می کنید این چک باکس غیر فعال باشد.
مرحله ۲: روی Change Authentication کلیک کنید. و نوعش را بگذارید “No Authentication”. چون ما در این پروژه ی اول MVC کاری به Authentication و Authorization نداریم . Authentication یعنی هویت کاربران چیه؟ و Authorization یعنی حق دسترسیشون چیه؟ ما در روز سوم در مورد Authentication بیشتر صحبت می کنیم.
یکی از مزیت های MVC، قابلیت انجام Unit Testing است. در مورد Unit Testing در بسته ی آموزشی Unit Testing صحبت کردیم.
mvctemplateoptions
از آنجایی که در واقع Code Behind نداریم و کنترلرهامون یکسری کلاس های ساده ی C# هستند، می توانیم روی اون ها به راحتی Unit Test داشته باشیم. اما فعلا نمی خواهیم این کار را انجام بدهیم . پس Unit Test را هم از حالت انتخاب خارج می کنیم و پروژه را ساده در نظر می گیریم.
بیایین کمی زمان برای فهمیدن ساختار solution ی که تولید شده صرف کنیم. اولین چیزی که متوجه خواهید شد این است که تعداد زیادی پوشه ایجاد شده است. همان طور که در عکس مشاهده می کنید.
solution
مهمترین این ها پوشه های Views، Models و Controllers هستند. در کل معماری MVC به این ۳ بخش Views، Models و Controllers تقسیم شده است.
mvcparts
بنابر شکل بالا، درخواست کاربر اول به سمت کنترلر می آید و کنترلر یک شیء از Model و Viewمی سازد و پاسخ نهایی را به کمک View به سمت کاربر نهایی می فرستد.
بررسی پوشه های یک پروژه ی MVC
View: در این پوشه شما ویوهای MVC را اضافه می کنید که می توانند شامل صفحات HTML ،Razor یا Webform باشند.
Model: در این پوشه شما کلاس های Model را اضافه کنید. Modelها کلاس های ساده ی دات نت هستند که داده ها رافراهم می کنند و گاهی اوقات نیز حاوی اعتبار سنجی (Validation) می باشند. مثلاً در این پوشه شما کلاس مشتری، کلاس فروشنده و غیره را اضافه خواهید کرد.
Controller: در این پوشه شما Controller را اضافه خواهید کرد. کنترلرها می توانند Action داشته باشند. Action وظیفه دارد که درخواست کاربر نهایی را برای کنترلر دریافت و پردازش کند. هر کنترلر می تواند چندین Action داشته باشد. هر Action شیء ای برای Model می سازد و سپس View و Model مربوطه را به همدیگر می پیچد و نتایج را به عنوان پاسخ می فرستد.
Script: در اینجا شما فایل های جاوا اسکریپت خود را اضافه می کنید. می توانید ببینید که فایل های jQuery و JavaScript به صورت پیش فرض توسط خود Visual Studio ایجاد شده اند.
App_Start: قبل از اینکه برنامه های MVC فعال شوند و شروع به کار کنند، تعداد زیادی از اشیاء نیازمند آنند که فعال شوند و مقدار اولیه بگیرند. برای مثال Routing و Bundling Minification Components. این ها یکسری شیء هستند که باید ایجاد شوند. نیازی نیست که فعلاً شما نگران این پوشه باشید و نمی خواهیم فعلاً به این پوشه بپردازیم. فعلا خیلی در مورد این پوشه صحبت نمی کنیم اما بعد ها بیشتر در موردش حرف خواهیم زد. مثلا در مورد Routing در روز دوم صحبت خواهیم کرد و Bundling را در روز پنجم معرفی می کنیم. پس نیاز نیست فعلاً نگران این پوشه باشید.
Content: این پوشه ی CCS می باشد که می تواند ظاهری یکسان برای کل پروژه به ما بدهد.
App_Data: این پوشه برای ذخیره کردن داده ها استفاده می شود. مثلاً اغلب برنامه نویسان از RDBMS استفاده می کنند یعنی پایگاه داده های رابطه ای مثل SQL Server, Oracle و غیره. اما بعضی از مردم هم از فایل های XML و یا متنی استفاده می کنند که همه ی اینها در پوشه ی App_Data ذخیره می شوند. این پوشه وقتی که داده ها را ذخیره می کنید ایجاد می شود.
Fonts: در صورتی که در پروژه ی شما از فونت های مختلف استفاده می کند، فونت ها در این پوشه قرار می گیرند.
مرحله ۳: اضافه کردن کنترلر
مرحله ی بعدی اضافه کردن یک کنترلر است. به پوشه کنترلر می رویم و روی آن راست کلیک می کنیم و از منوئی که باز می شود، بر روی Add کلیک کرده و بعد Controller را انتخاب می کنیم.
addcontroller
در صفحه ی بعدی که گزینه ی Scaffold را می بینید. Scaffolding تکنیکی ست که در آن الگوی MVC برای تولید کد اتوماتیک (Auto Generation) برای عملیات های کار با بانک اطلاعاتی (CRUD) به ما کمک می کند. پس با Scaffolding کدهای CRUD بطور اتوماتیک تولید خواهند شد. CRUD مخفف چهار کلمه ی Create و Read و Update و Delete است: چهار عمل اصلی کار با بانک های اطلاعاتی.
ولی ما فعلا قصد داریم MVC را یاد بگیریم، پس انتخاب Scaffolding یا کد آماده گزینه خوبی برای یادگیری نیست.
پس گزینه ی MVC 5 Controller – Empty را انتخاب کنید.
emptycontroller
یک اسم برای کنترلرتان در نظر بگیرید مثل “FirstMVCController“. دقت کنید که کلمه ی Controller را حذف نکنید. ضرورت “Controller” در آخر اسم تعیین کننده ی نوع آن است. پس این کلمه را حذف نکنید.
controllername
وقتی کلاس کنترلر ساخته شده است، مثل شکلی که در زیر نشان داده شده است. یک اکشن با نام “SayHello” اضافه کنید. در MVC، یک کنترلر یک کلاس است که از کلاس Controller ارث بری کرده است. (به بسته ی آموزش شی گرایی در سی شارپ رجوع کنید) اکشن ها نیز متدهای این کلاس هستند. یک کنترلر می تواند تعداد زیادی اکشن داشته باشد. برای مثال، یک کنترلر با نام “Home” می تواند اکشن هایی شبیه “GotoHome”, “GotoIndex” و غیره داشته باشد. کد زیر را به کنترلر اضافه کنید:
public class FirstMVCController : Controller { // // GET: /FirstMVC/ Public ActionResult SayHello() { return View(); } }
مرحله ۴: اضافه کردن View
تا اینجا، کنترلر و اکشن را ساختیم. ولی وقتی کاربر نهایی کنترلر و اکشن را درخواست کرد ما برای نمایش نیاز داریم که یک View را فراخوانی کنیم. در حال حاضر نمی خواهیم در مورد Model صحبت کنیم و مثال ساده ی “HelloWord” را در MVC ادامه می دهیم . اکنون در پوشه ی View، یک زیر پوشه با نام کنترلی که ساختیم یعنی “FirstMVC” را باید ببینید.
viewsfolder
بر روی پوشه ی “FirstMVC” راست کلیک کرده و Add و بعد View را انتخاب کنید. برای View یک نام مناسب در نظر بگیرید. برای اینکه می خواهیم کار را به سادگی انجام دهیم، الگوی Empty را انتخاب کنید.
emptyview
View در واقع یک صفحه HTML ساده است. (برای یادگیری HTML و Razor به بسته ی آموزشی مربوطه رجوع کنید.) در قسمت body یک درستور ساده شبیه زیر را تایپ کنید:
مرحله ۵: وصل کردن ویو view به کنترلر Controller
خب View و Controller که ساخته شده اند. حالا باید View را به کنترلر وصل کنیم.
برای اینکار در اکشن “SayHello” ی کنترلر، دستور زیر را برای برگرداندن View ایجاد شده تایپ می کنیم:
مرحله ۶: اجرای برنامه
کلید های CTRL+ F5 را بزنید و در URL بعد از localhost port، نام کنترلر مورد نظر و سپس اکشن آن کنترلر را تایپ کنید. لطفا توجه کنید که همان طور که در عکس زیر می بینید نام کنترلر باید بدون کلمه ی Controller نوشته شود.
runningapplication
اکنون برای ۳۰ ثانیه استراحت کنید. از اولین برنامیتان لذت ببرید و به کاری که تا اینجا انجام داده اید تبریک بگویید.
در این آزمایش چه گفتیم؟
در این آزمایش یک برنامه ی ساده ی MVC ایجاد کردیم. یک کنترلر یک کلاس است که از کلاس Controller ارث بری می کند. یک کنترلر می تواند حاوی تعدادی اکشن باشد. هر اکشن یک متد است. اکشن ها وظیفه ی دریافت درخواست های کاربر و پردازش آنها و در نهایت ارسال View مورد نظر به کاربر را دارند. View ها فایل های HTML هستند که ظاهر برنامه را شکل می دهند
امیدوارم که آموزش امروزما مفید واقع گردد.موفق باشید..
