مقدمه آموزش سریع و کاربردی MVC

سلام خدمت همه دوستان

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

این سری از آموزش ها مناسب افرادی است که از قبل وب فرم کار کردند و با مفاهیم اصلی ASP.NET آشنایی دارند.

بزرگترین تغییر MVC نسبت به ASP.NET چیست؟

خب این مهمترین سوالی بود که خودم همیشه قبل از یاد گرفتن MVC داشتم و دوست داشتم یکی خیلی خلاصه و صریح بهم جواب بده!

اگه بخوام خیلی ساده بگم بزرگترین تغییر اینه که در MVC برخلاف WebForm کاربر مستقیما یک صفحه را صدا نمیزند بلکه یک مفهوم را در سمت سرور صدا میزند(فرض کنید یک متد را صدا میزنیم) و آن متد مشخص میکند چه چیزی به سمت کاربر برگردد.

 همانطور که به یاد دارید در ASP.NET WebForm یک صفحه با پسوند aspx داشتیم که تمام کدها در فایل cs این صفحه و کدهای مربوط به ظاهر هم در همین صفحه aspx قرار میگرفت. یعنی خیلی راحت یک صفحه جدید اضافه میکردیم یک دکمه از ToolBox میکشیدیم و می انداختیم روی صفحه کمی ظاهر فرم را درست میکردیم و اگر نیاز بود بین قسمت های Design و Source سوییچ میکردیم تا ظاهر فرم را درست کنیم و در نهایت روی دکمه دوبار کلیک میکردیم تا به قسمت Code برویم و کدهای مورد نظر را همانجا مینوشتیم.

در نهایت هم برای دیدن آن صفحه کافی بود در انتهای نام آدرس سایتمان آدرس آن صفحه مثلا test.aspx نوشته میشد تا آن صفحه نمایش داده میشد.

www.MySite.com/test.aspx

اما در MVC روند کار به صورت خیلی خلاصه به این صورت است:

شما به جای اینکه در انتهای نام ساییتان آدرس یک صفحه را بنویسید فقط نام یک متد (اکشن) را مینویسید مثلا:

www.MySite.com/Method1

درون این Method1 هم یک سری کدهای سمت سرور (سی شارپ یا وی بی) قرار دارد که شما نوشته اید.

حالا اتفاق اصلی اینجا رخ میدهد، این کدها باید مشخص کنند چه چیزی به سمت کاربر برگردانده شود. یعنی به هرحال یک درخواست از سمت کاربر آمده و کاربر باید در جواب چیزی را مشاهده میکند این خروجی میتواند یک صفحه ، یک رشته، یک فایل JSON و یا ... باشد.

به همین سادگی! به این متدهایی که شما مینویسید و از بیرون صدا زده میشوند کنترلر گفته میشود حرف C در MVC برای همین Controller میباشد.

اصلا نترسید! این کنترلر ها کلاس های ساده ای هستند که به راحتی ایجاد میشوند و در فولدر Controller یک پروژه MVC قرار میگیرند. (مثلا با پسوند cs برای پروژه های سی شارپ)

پس در واقع کنترلر شبیه یک واسطه ای بین سرور و مشتریان است.

پس کدهای HTML کجا قرار دارند!

کد های HTML درون صفحاتی با پسوند cshtml قرار دارند و این صفحات در فولدر View ذخیره میگردد. این صفحات همان صفحاتی هستند که قرار است در صورت نیاز برای درخواست کنندگان به عنوان خروجی ارسال شود. پس حالا متوجه شدید که کلمه V در MVC به همین View اشاره میکند.

علت اینکه پسوند این صفحات cshtml میباشد این است که درون این صفحات هم میتوان کدهای Html نوشت و هم کدهای سمت سرور مثل سی شارپ.

درباره مدل هم در قسمت های بعدی توضیح خواهم داد.

مشاهده دستورات SQL تولید شده LINQ

برای اینکه دستورات sql نهایی تولید شده توسط LINQ را مشاهده کنیم کافیست در انتهای دستورات ToString قرار دهیم. مثلا:

var x = db.People.Where(p => p.ID == 1).ToString();

امنیت در MVC - جلوگیری از ارسال اطلاعات اضافی در Model

در ورژن های قبلی MVC وقتی در سمت View اطلاعات توسط کاربر وارد میشد و صفحه post میشد در سمت سرور باید مدل را میگرفتیم و تک تک فیلدهای آن را متناظر با فیلدهای مدل مورد نظر خودمان قرار میدادیم که خیلی زمان بر بود. در MVC5 یک ویژگی اضافه شد که اتوماتیک اطلاعات وارد شده در سمت view را map میکرد.

        [HttpPost]
        public ActionResult Index(Models.Person person)
        {
            return View();
        }

فرض کنید در مثال بالا مدل Person یک فیلد Name و یک فیلد isAdmin دارد و شما در سمت view فقط یک input قراردادید با نام name وقتی کاربر فرم رو پست میکنه اتوماتیک فیلد Name مدل person برابر با مقدار ورودی کاربر قرار میگیره و bind میشه. اما مشکل اینجاست که اگه یک هکر صفحه view رو تغییر بده و یک checkbox اضافه کنه و فرض کنید به نحوه متوجه بشه که در مدل ما یک فیلد isAdmin نیز وجود داره و نام اون checkbox رو isAdmin بزار به راحتی در سمت سرور مقدار دلخواه وارد isAdmin میشه و کاربر میتونه نقش مدیر رو بگیره.

برای جلوگیری از این کار دستور Bind پیشنهاد میشه که درون اون با دستور include میتوانیم یک لیست سفید درست کنیم و بگوییم فقط این آیتم هایی که ما میگوییم bind شوند و یا توسط Exclude میتوان لیست سیاه درست کرد که در این صورت تمام آیتم ها bind میشوند به جز لیستی که اعلام میشود. مثال:

        [HttpPost]
        public ActionResult Index([Bind(Exclude = "IsAdmin")] Models.Person oPerson)
        {
            return View();
        }

در مثال بالا تمامی آیتم های مدل Person میتوانن مقدار دهی شوند به جز فیلد isAdmin حتی اگه در سمت view کنترل مربوط به isAdmin رو هم قرار بدهید باز هم مقدار نمیگیرد.

Map Mode For Vertical Scroll Bar

در ویژوال استدیو میتوان scroll bar را به صورت Map Mode نمایش داد که ممکنه برای شما کاربردی باشه. یکی از خصوصیت های این روش اینه که بدونه اینکه بخواهید صفحه را اسکرول کنید میتونید با نگه داشتن موس روی اسکرول بار سورس ها رو مشاهده کنید و مزیت دیگه اینه که میتونید بدون اینکه مجبور باشید Region ها رو باز کنید بتونید داخلشون رو ببینید.

نمایی از Map Mode Scroll bar

نحوه تغییر scroll bar در ویژوال استدیو:

از منو Tools گزینه Option را انتخاب کرده در صفحه باز شده کلمه Scroll را سرچ کنید در قسمت All languages گزینه Scroll Bar را انتخاب کنید و سپس در قسمت Behavior گزینه Use Map Mode را انتخاب کنید تیک گزینه Show Preview را هم بزنید.

مدیریت سورس کد

شاید برای شماهم زیاد پیش اومده باشه که پس از انجام تغییرات روی یک پروژه فولدر پروژه رو زیپ میکنید و با تاریخ مورد نظر در یک جا به عنوان پشتیبان کپی میکنید تا اگه روزی متوجه اشتباهی در کدها و تغییرات شدید بتونید فایل های قبلی رو مشاهده و یا بازیابی کنید.

نرم افزار های مدیریت سورس یا همون Source Control ها برای همین منظور تولید شدند تا ما به راحتی با استفاده از اونها بتونیم تاریخچه تغییرات سورس کدها رو داشته باشیم.

تمامی این نرم افزارها از دو روش برای مدیریت سورس استفاده میکنند.

1- Centralize

مانند TFS Server که تاریخچه فایل ها و تغییرات روی یک سرور متمرکز وجود دارد.

2- Distributed

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

پروژه Git در اصل برای لینوکس ایجاد گردید اما به جهت شهرت و کاربردهای فراوان مایکروسافت آن را به ویژوال استدیو نیز اضافه کرد.

نحوه انجام کار:

برای اینکه پروژه خودمان را بتوانیم به صورت Git مدیریت کنیم در ویژوال استدیو  در  پنجره solution روی solution راست کلیک کرده و گزینه Add Solution To Source Control را میزنیم در پنجره باز شده گزینه Git را انتخاب میکنیم. سپس دوباره در پنجره solution روی solution راست کلیک کرده و commit را میزنیم، یک نام دلخواه هم مثلا Initial به عنوان کامنت میدهیم و Commit میکنیم. در حین کار و پس از تغییرات روی پروژه میتوانیم همین کار را انجام دهیم و کامیت های مختلف داشته باشیم. بهتر است نام های خوبی برای کامیت ها داشته باشیم مثلا اگر یک صفحه جدید محصولات به پروژه اضافه کردیم نام Add_Product_Page را به عنوان کامنت بدهیم.

درصورتی که بخواهیم History یک فایل را مشاهده کنید کافیست روی آن راست کلیک کرده و گزینه view history را بزنید.

توجه:

انجام فرایند های فوق باعث میشود پروژه شما به صورت لوکال توسط Git مدیریت شود و همواره تمامی تغییرات و History ها در کنار پروژه شما خواهد بود اما اگر میخواهید علا بر موارد فوق یک بک آپ آنلاین هم داشته باشید تا در صورت حذف ناخواسته پروژه سورس های خود را از دست ندهید پیشنهاد میکنم از TFS Online خود مایکروسافت استفاده کنید. که باید با یک اکانت ایمیل مایکروسافت لاگین کرده و مابقی ماجرا.

برای اینکه پروژه های لوکال شما پس از هربار کامیت ، مستقیم روی TFS آنلاین هم ذخیره شود پس از کامیت کردن پروژه در پنجره زرد رنگ نمایش داده شده گزینه Sync را بزنید.

پس از زدن دکمه Sync در پنجره بعدی از شما یک آدرس به عنوان Repository میخواهد که باید ابتدا در TFS آنلاین عضو شده و وارد صفحه خود شوید: مثلا آدرس صفحه شما اگر نام اکانت شما Test باشد بدین صورت خواهد بود:

test.visualstudio.com

سپس در پنل خود New team project را زده و یک پروژه دلخواه ایجاد کرده. سپس وارد منوی Code شده و آدرس نمایش داده شده را به عنوان repository کپی کنید و وارد قسمت مربوطه در ویژوال استدیو کنید تا از این به بعد هربار که پروژه را sync کردید در این آدرس نیز ذخیره گردد.

برای افزودن دوستان خود به پروژه میتوانید در صفحه پروژه ها گزینه Invite a friend را بزنید.

برای اینکه دوستان شما بتوانند پروژه ای که آنها را به عنوان همکار اضافه کردید را ببینند باید وارد صفحه شما بشوند. مثلا اگر صفحه شما test.visualstudio.com است دوستانتان پس از لاگین باید در آدرس بار همین آدرس را زده تا بتوانند پروژه های مروبط را مشاهده کنند و در صورت نیاز آنها را روی کامپیوتر خود Clone کنند تا بتوانند روی آنها کار کنند

نکته: شما میتوانید پروژه های خودتان را به جای TFS روی سروس های خود Git آپلود کنید این سرور همان سایت معروف Github میباشد که البته نسخه رایگان آن بدین صورت است که سورس کدهای شما را دیگران نیز میبینند. (برای کسب شهرت و در اختیار قرار دادن علم و دانش به دیگران میتوانید از این روش استفاده کنید)

T4MVC چیست؟

T4MVC ابزاری است که به کمک آن میتوانید آدرس دهی در سایت خود را Strongly Typed کنید. بدین معنی که بجای اینکه یک آدرس رشته ای بدهید ، داینامیک میتوانید عناصر موجود در سایت خود را مشاهده و به قسمت مورد نظر خود اضافه کنید.

برای نصب این بسته دستور زیر را در Nuget تایپ کنید:

Install-Package T4MVC

برای استفاده از این بسته مثلا میخواهیم آدرس یک Layout را بدهیم که بجای دستور:

Layout = "~/Views/Shared/Layouts/_MasterLayout.cshtml";

مینویسیم:

Layout=MVC.Shared.Views.Layouts._MasterLayout;

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

اما معایب این روش:

بنده به شخصه پس از تجربه کار با T4MVC فعلا به این نتیجه رسیدم که از این بسته استفاده نکنم! به دو دلیل:

اول اینکه پس از نصب و راه اندازی T4MVC تمام کلاسهای شما به Partial و اکشن های شما به Virtual تغییر میکنه که این اصلا برای من خوشایند نبود.

دوم اینکه گاهی اوقات پس از اضافه کردن یک اکشن جدید و Run as custom tool نمودن! t4 خطاهای عجیبی در پروژه پیش میاد.

نکاتی پیرامون Bootstrap

یکی از اصلی ترین دلایل استفاده از بوت استرپ Grid بندی صفحه است که به کمک اون خیلی راحت میشه از دست جداول و به هم ریختگی Div ها راحت شد.

در بوت استرپ هر ناحیه به 12 قسمت تقسیم میشه. (علت استفاده از عدد 12 فکر میکنم اینه که به اعداد بیشتری تقسیم پذیر هست: مثل 1و2و3و4و6)

برای شروع بخش بندی صفحه همیشه ابتدا یک Div با کلاس Container میگذاریم و تمام عناصر صفحه را داخل این Div میگذاریم. برای بخش بندی ها همیشه با یک div با کلاس Row شروع میکنیم که معادل یک dr میباشد.

حالا داخل این row میتوانیم div های دیگری بگذاریم مثلا اگر بخواهیم دو div داشته باشیم که هر دو یک اندازه باشند و کل ناحیه را بگیرند برای هر کدام از این div ها کلاس col-md-6 را میگذاریم. باید توجه داشته باشیم که در هر row (هرناحیه) جمع این اعداد نباید بیشتر از 12 باشد مثلا در مثال بالا دوتا 6 تا داریم.

col-md-6 : در این مثال md یعنی medium به این منظور که تا جایی که صفحه medium است div ها به اصطلاح نشکند و زیر هم قرار نگیرد و از آن اندازه کوچکتر بشکند. اگر مرورگر را خودتان resize کنید و کوچک کنید از یک جایی به بعد div ها میشکند.

به جز md چند حالت دیگر هم در بوت استرپ داریم مثل:

Tablet>     Small              : sm

Mobile>     Extra Small      : xs

Monitor>   Medium           : md

LCD    >    Large              :lg

شیفت دادن ستون ها:

با دستور offset به صورت مثلا col-md-offset-3 سه واحد به جلو حرکت میدهد. البته میتوان از دستور push یا pull هم استفاده کرد. تفاوت offset با push این است که offset بقیه عناصر را هم به جلو شیفت میدهد اما push روی بقیه عناصر می اندازد.

راستی برای نصب آخرین ورژن بوت استرپ کافیست دستور زیر رو در nuget بزنید.

install-Package Bootstrap

bootstrap theme:

در کنار فایل های اصلی بوت استرپ یک فایل bootstrap-theme.css هم وجود داره. این فایل استایل سه بعدی و قشنگ تری به عناصر بوت استرپ میده و باید حواستون باشه بعد از فایل اصلی بوت استرپ لود بشه.

خودتون یک دکمه اضافه کنید و یک بار با قرار دادن لینک theme و یکبار هم بدون آن صفحه را تست کنید خودتون متوجه زیباییش میشید.

bootstrap right to left:

آقای مرتضی انصاری نیا در nuget زحمت کشیدن و بوت استرپ رو راست به چپ کردن که برای صفحات فارسی مناسب.

https://github.com/morteza

دریافت بوت استرپ راستچین شده
حجم: 24.3 کیلوبایت