آموزش وردپرس
خانه - آموزشی - آموزش گام به گام ساخت یک پروژه MVC
mvc

آموزش گام به گام ساخت یک پروژه MVC

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

همچنین این مطلب نحوه استفاده از «توسعه آزمون محور» یا Test-Driven Development را نیز نشان می دهد. در این مطلب پروژه ای می سازید که شامل Unit test های برنامه MVC است.

MVC مخفف Model View Controller می باشد.

پیش نیازها

برای تکمیل این مراحل به صورت گام به گام، به این ها نیاز دارید:

  • Microsoft Visual Studio 2008 SP1
    • نکته: Visual Studio 2008 Standard Edition و Visual Web Developer Express 2008 از unit test پشتیبانی نمی کنند. می توانید از این نسخه ها برای ساختن و اجرای قسمت هایی از این «گام به گام» که مربوط به ساخت و اجرای برنامه های ASP.NET MVC است استفاده کنید. در صورت استفاده از این نسخه ها، نمی توانید از unit test که در این «گام به گام» اشاره شده است، استفاده کنید.
  • ASP.NET MVC Beta. این نسخه را می توانید از صفحه Microsoft ASP.NET MVC در سایت ASP.NET دریافت کنید.

توضیح مترجم: در این قسمت مستندات رسمی هیچ اشاره ای به نصب ASP.NET MVC نشده است. با این حال قبل از ادامه اجرای مراحل این گام به گام، ابتدا ASP.NET MVC را نصب کنید و سپس ویژوال استودیو را re-start کنید.

ساخت یک پروژه MVC جدید

برای شروع، یک پروژه ASP.NET MVC Application بسازید. توجه کنید که پروژه Web Application می سازید نه Web Site.

گام به گام ساخت پروژه MVC

1- در منوی File بر روی New Project کلیک کنید. کادر New Project همانند تصویر زیر نمایش داده می شود:

ساخت یک پروژه MVC

 

2- به قسمت بالا سمت راست دقت کنید و مطمئن شوید که .NET Framework 3.5 انتخاب شده است.

3- در قسمت Project Types شاخه Visual Basic یا C# را باز کنید و سپس روی Web کلیک کنید.

4- در قسمت Visual Studio installed templates گزینه ASP.NET MVC Web Application را انتخاب کنید.

5- در قسمت Name عبارت BasicMvcApplication را وارد کنید.

6- در قسمت Location نام پوشه پروژه را مشخص کنید.

7- اگر می خواهید نام Solution با نام پروژه متفاوت باشد، در قسمت Solution Name نام Solution خود را وارد کنید.

8- گزینه Create directory for solution را انتخاب کنید.

9- بر روی OK کلیک کنید.

در این مرحله پنجره Create Unit Test Project نمایش داده می شود.

ساخت MVC Unit برای پروژه تست

نکته: اگر از Visual Studio 2008 Standard Edition یا Visual Studio 2008 Express Edition استفاده می کنید، پنجره Create Unit Test Project نمایش داده نمی شود و پروژه بدون پروژه تست ساخته می شود.

10- گزینه Yes, create a unit test project را انتخاب کنید.

به صورت پیش فرض نام پروژه تست، همان نام پروژه است که Tests به انتهای آن اضافه شده است. اگر بخواهید می توانید این نام را تغییر دهید. همچنین پروژه تست به طور پیش فرض از Visual Studio Unit Test framework استفاده می کند.

11- بر روی OK کلیک کنید.

آشنایی با پروژه MVC

تصویر زیر ساختار پروژه ای که اکنون ایجاد شد را نشان می دهد:

نمایش ساختار یک پروژه MVC

ساختار پروژه MVC با ساختار پروژه ASP.NET Web Site فرق می کند. پروژه MVC شامل پوشه های زیر است:

  • پوشه Content: مخصوص پشتیبانی از فایل های محتوا. این پوشه شامل فایل CSS برنامه است. (از این پوشه برای نگهداری فایل های عکس، جاوا اسکریپت و … استفاده می شود. -مترجم)
  • پوشه Controllers: مخصوص کلاس های کنترلگر. این پوشه شامل کنترلگرهای نمونه برنامه به نام های AccountController و HomeController است. کلاس AccountContrller شامل عملیات لازم جهت ورود به سیستم (login) و خروج از سیستم (logout) و ثبت نام (register) است. HomeContrller شامل منطقی است که در زمان آغاز برنامه فراخوانی می شود. (مترجم: مشابه صفحه پیش فرض عمل می کند.)
  • پوشه Models: مخصوص فایل های مدل داده (از قبیل فایل .dbml مرتبط با LINQ to SQL) و فایل های Data entity.
  • پوشه Views: برای صفحات نمایشگر. این پوشه شامل سه پوشه داخلی است: Account و Home و Shared. پوشه Account شامل نمایشگرهایی است که به عنوان رابط کاربری (UI) ورود به سیستم (login) و خروج از آن (logout) و تغییر رمز عبور (Change password) و ثبت نام در سیستم (register) از آن ها استفاده می شود. پوشه Home شامل نمایشگر Index (صغحه آغازین پیش فرض برنامه) و نمایشگر About است. پوشه Shared شامل نمایشگر master page برنامه است.

اگر از نسخه های ویژوال استودیو غیر از Standard Edition و Express Edition استفاده می کنید، یک پروژه آزمون (test) نیز ایجاد می شود. برنامه آزمون شامل پوشه ای به نام Controllers است که خود شامل کلاس HomeContrllerTest است. این کلاس برای هر متد عملیات در کلاس HomeContrller (یعنی Index و Home) یک آزمون unit test دارد. پروژه تازه ساخته شده برنامه کاملی است که بدون تغییر می توانید آن را کامپایل و اجرا کنید. تصویر زیر برنامه در حال اجرا را در مرورگر نشان می دهد:

پروژه پیش فرض MVC

پروژه unit test نیز آماده کامپایل و اجرا است. در این گام به گام، یک کنترلگر به همراه یک متد عملیات و یک نمایشگر به برنامه اضافه می کنید و یک unit test برای متد جدید می نویسید.

اضافه کردن کنترلگر

اکنون کنترلگری به برنامه اضافه می کنید که شامل منطق دریافت نقشه شهرها از خدمات وب Microsoft Virtual Earth است.

برای اضافه کردن کنترلگر به برنامه MVC:

1- در Solution Explorer روی پوشه Controllers راست کلیک کرده و Add و سپس New Item را انتخاب کنید. پنجره Add New Item نمایش داده می شود:

اضافه نمودن کنترگر به پروژه MVC

2- در قسمت Categories شاخه Visual Basic یا Visual C# و سپس شاخه Web را باز کرده و بر روی MVC کلیک کنید.

3- در قسمت Templates گزینه MVC Controller Class را انتخاب کنید.

4- در قسمت Name عبارت MapsContrller را وارد کنید.

نکته: در ASP.NET MVC نام کنترلگرها حتماً باید به Contrller ختم شود مانند HomeController و GameController و MapsController.

5- روی Add کلیک کنید.

ویژوال استودیو کلاس MapsController را به پروژه اضافه می کند.

ایجاد بدنه متد عملیات

برای اجرای تکنیک های توسعه آزمون محور (Test-Driven Development)، باید قبل از این که متدی را بنویسید، آزمون (تست) آن را بنویسید. با این حال برای این کار باید بدنه متد را آماذه کنید. این متد در این گام به گام، ViewMaps است.

حتما بخوانید  سورس سایت سازمان سنجش-سی شارپ و ASP.NET

مراحل اضافه کردن بدنه متد عملیات:

1- کلاس MapsController را باز کنید.

2- متد Index را با متد ViewMaps که کد آن در ادامه می آید جایگزین کنید.

کد Visual Basic

  1. Function ViewMaps() ‘ Add action logic here
  2. Throw New NotImplementedException()
  3. End Function

کد #C

  1. public ActionResult ViewMaps()
  2. {  // Add action logic here
  3. throw new NotImplementedException();
  4. }

اضافه کردن unit test برای متدهای عملیات

در این مرحله یک کلاس تست به پروژه BasicMvcApplication.Tests اضافه می کنید. در این کلاس یک unit test برای متد عملیات ViewMaps اضافه می کنید. این آزمون شکست می خورد زیرا بدنه متد عملیات ViewMaps یک استثناء پرتاب می کند. وقتی متد عملیات کاملاً پیاده سازی شد، آزمون موفق می شود.

مراحل اضافه کردن unit test به متدهای عملیات:

1- در پروژه test بر روی پوشه Controllers کلیک راست نموده و گزینه Add و سپس گزینه New Item را انتخاب کنید.

پنجره Add New Item باز می شود.

2- در قسمت templates گزینه Class را انتخاب کنید.

3- در قسمت نام عبارت MapsControllerTest را وارد کنید.

4- بر روی دکمه Add کلیک کنید.

ویژوال استودیو کلاس MapsControllerTest را به پروژه آزمون (تست) اضافه می کند.

5- کلاس MapsControllerTest را باز نموده و کد زیر را در آن وارد کنید. این کد unit test هایی برای متدهای عملیات -که بعد از این آن ها را تکمیل خواهید کرد- تعریف می کند.

کد ویژوال بیسیک:

  1. Imports System
  2. Imports System.Collections.Generic
  3. Imports System.Text
  4. Imports System.Web.Mvc
  5. Imports Microsoft.VisualStudio.TestTools.UnitTesting
  6. Imports BasicMvcApplication
  7. <TestClass()> Public Class MapsControllerTest
  8. Private testContextInstance As TestContext
  9. ”'<summary>
  10. ”’Gets or sets the test context which provides
  11. ”’information about and functionality for the current test run.
  12. ”'</summary>
  13. Public Property TestContext() As TestContext
  14. Get
  15. Return testContextInstance
  16. End Get
  17. Set(ByVal value As TestContext)
  18. testContextInstance = value
  19. End Set
  20. End Property
  21. <TestMethod()> Public Sub ViewMaps()
  22. ‘ Arrange
  23. Dim controller As MapsController = New MapsController()
  24. ‘ Act
  25. Dim result As ViewResult = controller.ViewMaps()
  26. ‘ Assert
  27. Dim viewData As ViewDataDictionary = result.ViewData
  28. Assert.AreEqual(“My City Maps”, viewData(“Title”))
  29. End Sub
  30. End Class

کد #C

  1. using System;
  2. using System.Text;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using Microsoft.VisualStudio.TestTools.UnitTesting;
  6. using System.Web.Mvc;
  7. using BasicMvcApplication;
  8. using BasicMvcApplication.Controllers;
  9. namespace BasicMvcApplication.Tests.Controllers
  10. {
  11. [TestClass]
  12. public class MapsControllerTest
  13. {
  14. [TestMethod]
  15. public void ViewMaps()
  16. {
  17. // Arrange
  18. MapsController controller = new MapsController();
  19. // Act
  20. ViewResult result = controller.ViewMaps() as ViewResult;
  21. // Assert
  22. ViewDataDictionary viewData = result.ViewData;
  23. Assert.AreEqual(“My City Maps”, viewData[“Title”]);
  24. }
  25. }
  26. }

6- در Solution Explorer پروژه BasicMvcApplication.Tests را انتخاب نموده و سپس دکمه های Ctrl + F5 را بفشارید تا آزمون ها اجرا شوند.

آزمون با شکست مواجه می شود زیرا هنوز متد عملیات یک استثناء (Exception) پرتاب می کند.

اضافه کردن کد به متد عملیات

اکنون به متد عملیات ViewMaps از کلاس MapsController کدی برای تولید نمایشگر Maps اضافه می کنیم.

مراحل اضافه کردن کد به متد عملیات:

1- کلاس MapsController را باز نموده و کد متد عملیات ViewMaps را با کد زیر جایگزین کنید:

کد ویژوال بیسیک:

  1. Public Function ViewMaps()
  2. ViewData(“Title”) = “My City Maps”
  3. Return View()
  4. End Function

کد #C

  1. public ActionResult ViewMaps()
  2. {
  3. ViewData[“Title”] = “My City Maps”;
  4. return View();
  5. }

2- فایل را دخیره کنید.

اضافه کردن نمایشگر

در این مرحله، نمایشگر Maps را ایجاد می کنید. برای سازماندهی نمایشگرها ابتدا پوشه ای به نام Maps در پوشه Views ایجاد خواهید کرد.

مراحل اضافه کردن یک نمایشگر به برنامه MVC:

1- در Solution Explorer بر روی پوشه Views کلیک راست نموده و Add و بعد از آن New Folder را انتخاب کنید.

2- نام پوشه جدید را Maps بگذارید.

نکته: نمایشگرها در پوشه ای قرار می گیرند که نام آن از نام کلاس کنترلگر تبعیت می کند. برای مثال، نمایشگرهای مرتبط با کلاس کنترلگر MapsController در پوشه ای به نام Maps قرار می گیرند.

3- بر روی پوشه Maps کلیک راست نموده، گزینه Add و سپس گزینه New Item را انتخاب کنید.

پنجره Add New Item نمایش داده می شود:

اضافه نمودن آیتم جدید

4- در قسمت Categories شاخه Web را باز و سپس MVC را انتخاب کنید.

5- در قسمت Templates گزینه MVC View Content Page را انتخاب کنید.

6- در قسمت نام، عبارت ViewMaps.aspx را وارد کنید.

7- دکمه Add را کلیک کنید.

پنجره Select a Master Page نمایش داده می شود:

 

8- از قسمت Project Folders شاخه Views و سپس شاخه Shared را انتخاب کنید.

9- در قسمت Contents of Folder فایل Site.Master را انتخاب کنید و سپس دکمه OK را کلیک کنید.

نمایشگر جدید در شاخه Maps اضافه می شود.

اضافه کردن کد به نمایشگر

در این مرحله،  به نمایشگری که در مرحله قبل ساخته شد، کد اضافه می کنیم.

مراحل اضافه کردن کد به نمایشگر:

1- نمایشگر ViewMaps.aspx را باز نموده و کد زیر را در قسمت Content آن وارد کنید:

  1. <h2>My City Maps</h2>
  2. Select map:
  3. <select onclick=”GetMap(value);”>
  4. <option value=”Seattle”>Seattle, WA</option>
  5. <option value=”LasVegas”>Las Vegas, NV</option>
  6. <option value=”SaltLake”>Salt Lake City, UT</option>
  7. <option value=”Dallas”>Dallas, TX</option>
  8. <option value=”Chicago”>Chicago, IL</option>
  9. <option value=”NewYork”>New York, NY</option>
  10. <option value=”Rio”>Rio de Janeiro, Brazil</option>
  11. <option value=”Paris”>Paris, France</option>
  12. <option value=”Naples”>Naples, Italy</option>
  13. <option value=”Keta”>Keta, Ghana</option>
  14. <option value=”Beijing”>Beijing, China</option>
  15. <option value=”Sydney”>Sydney, Australia</option>
  16. </select>
  17. <br />
  18. <br />
  19. <div id=’earthMap’ style=”position:relative; width:400px; height:400px;”>
  20. </div>
  21. <script charset=”UTF-8″ type=”text/javascript” src=”http://dev.virtualearth.net/mapcontrol/mapcontrol.htm?v=6.2&mkt=en-us”>
  22. </script>
  23. <script type=”text/javascript”>
  24. var map = null;
  25. var mapID = ”;
  26. function GetMap(mapID)
  27. {
  28. switch (mapID)
  29. {
  30. case ‘Seattle’:
  31. map = new VEMap(‘earthMap’);
  32. map.LoadMap(new VELatLong(47.6, -122.33), 10 ,’i’, true);
  33. break;
  34. case ‘LasVegas’:
  35. map = new VEMap(‘earthMap’);
  36. map.LoadMap(new VELatLong(36.17, -115.14), 10 ,’i’ ,true);
  37. break;
  38. case ‘SaltLake’:
  39. map = new VEMap(‘earthMap’);
  40. map.LoadMap(new VELatLong(40.75, -111.89), 10 ,’i’ ,true);
  41. break;
  42. case ‘Dallas’:
  43. map = new VEMap(‘earthMap’);
  44. map.LoadMap(new VELatLong(32.78, -96.8), 10 ,’i’ ,true);
  45. break;
  46. case ‘Chicago’:
  47. map = new VEMap(‘earthMap’);
  48. map.LoadMap(new VELatLong(41.88, -87.62), 10 ,’i’ ,true);
  49. break;
  50. case ‘NewYork’:
  51. map = new VEMap(‘earthMap’);
  52. map.LoadMap(new VELatLong(40.7, -74), 10 ,’i’ ,true);
  53. break;
  54. case ‘Rio’:
  55. map = new VEMap(‘earthMap’);
  56. map.LoadMap(new VELatLong(-22.91, -43.18), 10 ,’i’ ,true);
  57. break;
  58. case ‘Paris’:
  59. map = new VEMap(‘earthMap’);
  60. map.LoadMap(new VELatLong(48.87, 2.33), 10 ,’i’ ,true);
  61. break;
  62. case ‘Naples’:
  63. map = new VEMap(‘earthMap’);
  64. map.LoadMap(new VELatLong(40.83, 14.25), 10 ,’i’ ,true);
  65. break;
  66. case ‘Keta’:
  67. map = new VEMap(‘earthMap’);
  68. map.LoadMap(new VELatLong(5.92, 0.983), 10 ,’i’ ,true);
  69. break;
  70. case ‘Beijing’:
  71. map = new VEMap(‘earthMap’);
  72. map.LoadMap(new VELatLong(39.91, 116.39), 10 ,’i’ ,true);
  73. break;
  74. case ‘Sydney’:
  75. map = new VEMap(‘earthMap’);
  76. map.LoadMap(new VELatLong(-33.86, 151.21), 10 ,’i’ ,true);
  77. }
  78. }
  79. </script>

این قطعه کد یک لیست کشویی (Drop-Down List) برای انتخاب نقشه تعریف می کند و جاوا اسکریپت برای دریافت اطلاعات نقشه از خدمات وب Virtual Earth مایکروسافت است.

2- فایل را ذخیره کنید.

اضافه کردن یک قفسه (Tab) به منوی صفحه Master

حالا به منوی صفحه master آیتمی اضافه می کنیم که متد عملیات ViewMaps را فراخوانی می کند.

مراحل اضافه کردن یک قفسه به صفحه Master:

1- فایل Site.master را از پوشه Views/Shared باز کنید و در div با شناسه menucontainer لیست غیر مرتب (ul) را پیدا کنید.

2- خط زیر را بین خطوط مربوط به قفسه های Index و About Us اضافه کنید.

  1. <li><%= Html.ActionLink(“Maps”, “ViewMaps”, “Maps”)%></li>

نکته: متد ActionLink یک متد کمکی (Helper Method) است که پیوندی به یک متد عملیات ایجاد می کند. این متد سه پارامتر می گیرد: متن پیوند، نام متد عملیات و نام کنترلگر.

3- فایل را ذخیره کنید.

آزمون و اجرای برنامه MVC

حالا می توانید برنامه را تست کنید.

مراحل آزمون برنامه MVC:

1- از منوی Test بر روی Run کلیک نموده و سپس برای اجرای Unit test ها گزینه All Tests in Solution را انتخاب کنید.

نتایج آزمون ها در پنجره Test Results نمایش داده می شود. این بار تست ها با موفقیت اجرا می شوند.

2- در Solution Explorer پروژه BasicMvcApplication را انتخاب نموده و برای اجرای برنامه کلیدهای Ctrl + F5 را بزنید.

صفحه Index.aspx که شامل قفسه های صفحه master است، نمایش داده می شود.

3- بر روی قفسه Maps کلیک کنید.

صفحه Maps Page نمایش داده می شود. شهری را انتخاب کنید تا نقشه آن به شما نمایش داده شود.

مراحل بعدی

این گام به گام یک نگاه اولیه به ASP.NET MVC Framework و همچنین توسعه آزمون محور در برنامه های MVC به شما می دهد.

در صورت نیاز به آموزش های بیشتر در مورد MVC با ارسال نظرات خود در بخش نظرات ما را مطلع سازید.

 

قیمت پروژه : رایگان

جهت کسب اطلاعات بیشتر از طریق بخش تماس با ما اقدام نمائید.

درباره ی محمد کاظمی

همچنین ببینید

php

آموزش PHP – جلسه اول – ساختار PHP

در اولین جلسه از آموزش PHP میخواهیم با آموزش ساختار PHP بپردازیم.ساختار PHP با استفاده …

۴ دیدگاه

  1. محمد جان بابت مطلب عالی شما ، سپاسگزارم.

  2. ممنون بابت مطالبتون.میشه در مورد اضافه کردن یک slideshow در mvc مطلب بگذارید؟وهمچنین upload axو ذخیره آن در database از طریق link
    متشکرم

  3. ممنوون مفید بود

  4. عالی بود عزیرم مخصوصا طرح نقشه که بسیار ساده بود

پاسخ دهید

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