آموزش ASP.NET MVC5 – فصل۲ – بخش۱

 آموزش ASP.NET MVC5 – فصل۲ – بخش۱ 

 

با سلام خدمت شما عزیزان . به جلسه دوم از مقالات آموزشی MVC خوش آمدید . در جلسه اول که شامل ۳ سرفصل زیر بود با معماری قدرتمند MVC و نیز کنترولر و اکشن در mvc آشنا شدیم:

  1. آموزش ASP.NET MVC – جلسه اول – بخش اول

  2. آموزش ASP.NET MVC – جلسه اول – بخش دوم

  3. آموزش ASP.NET MVC – جلسه اول – بخش سوم

 

در جلسه دوم، قصد داریم مبحث View در MVC را آموزش دهیم که این جلسه شامل دو بخش است. در این مقاله، بخش اول از جلسه دوم را در خدمت شما هستیم.

 

آشنایی با Razor View در ASP.NET MVC

 

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

برای ادامه آموزش ، برنامه ویژوال استودیو را باز کنید و به منوی FILE و زیرمنوی NEW–>Project بروید و به مسیر Web–>ASP.NET WebApplication میرویم و ورژن دات نت فریمورک را ۴٫۵ انتخاب میکنیم و سپس از منوی بالا Empty را انتخاب کرده و از منوی پایین گزینه MVC را تیک بزنید . در نهایت نام پروژه و آدرس ذخیره سازی آنرا تعیین کرده و OK کنید .

اکنون اولین کنترولر را بنام HomeController ایجاد میکنیم (یک کنترولر میسازیم بنام Home که اسم کلاسش HomeController است)

 

خروجی ViewResult در اکشن:

در جلسه اول سری آموزشی MVC، با انواع خروجی ActionResult و ContentResult و JsonResult و … آشنا شدیم . در این بخش میخواهیم با خروجی مهم ViewResult آشنا شویم . در اکشن ها اگر مطمئنیم خروجی ما از چه نوعی است بهتر است آنرا بنویسیم مثلا اگر میدانیم اکشن ما خروجی View میدهد باید قبل از نام اکشن ViewResult بنویسیم .

نکته : برای یادگیری بیشتر میتوانید به مرجع اصلی آموزش View در mvc مراجعه کنید .

ایجاد کنترولر HomeController:

هنگامی که کنترولر را میسازیم ، در فولدر Views بنام کنترولر یک فولدر بطور اتوماتیک ساخته می شود . مثلا با ایجاد HomeController ، بلافاصله یک زیر فولدر در فولدر Views ساخته می شود بنام Home که می بایست View های مربوط به کنترولر Home را در آن ایجاد کنیم .

ایجاد View برای اکشن در MVC:

برای ایجاد View برای یک اکشن باید روی فولدر ویوی مربوطه مثلا Home راست کلیک کرده و سپس Add–>View را میزنیم . حالا نوبت آن رسیده است که نام ویو را بنویسیم که همان نام اکشن می باشد . مثلا برای اکشن Index باید نام ویوی آن نیز Index باشد . سپس در پنجره باز شده هیچ تیکی را نمیزنیم و در نهایت Add را میزنیم . یک فایل بنام Index.cshtml ایجاد میشود که یک فایل ساده HTML بنظر میرسد ولی در جلسات آینده یاد میگیریم که داخل این صفحه ، کدهای سی شارپ نیز بنویسیم . سپس تایتل یا عنوان صفحه را مینویسیم .

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

معمولا در اکثر موارد نام اکشن با نام ویو یکی می باشد ولی اگر بخواهیم نام آنها با هم فرق داشته باشد باید بصورت اکشن زیر عمل کنیم :

 
        [System.Web.Mvc.HttpGet]
        public System.Web.Mvc.ViewResult Learn1010()
        {
            return (View(viewName: "Learn1000"));
        }
    

در این مثال نام اکشن Learn1010 است و نام ویو آن Learn1000 می باشد .

ویوی بعدی بصورت زیر است :

 

Mohtava.info (1)!

Mohtava.info (2)!

Mohtava.info (3)!

Mohtava.info (4)!

Mohtava.info (5)!

همانطور که مشاهده میکنید عبارت Mohtava.info  بارها تکرار شده است پس منطقی است که آنرا در حلقه For بنویسیم .

ویوی بعدی یعنی با حلقه فور پیاده سازی شده است :

 
@for (int intIndex = 1; intIndex <= 5; intIndex++)
{
  Hello World (@intIndex)! 
}
    

دقت کنید که علامت @ باید به for چسبیده باشد .

 

تعریف متغیر در View :

اگر ویوی ما بصورت زیر باشد با خطا مواجه می شویم که میگوید چنین متغیری در ویو وجود ندارد !

 
My email address is EhsanSafari@hotmail.com


@SomeText
    

Error: The name 'SomeText' does not exist in the current context

نکته کد فوق: اگر بلافاصله قبل از علامت @ چیزی نوشته باشیم اثر @ را از بین برده ایم . در مثال فوق hotmail.com متغیر محسوب نمیشود ولی RazorView عبارت someText را متغیر به حساب آورده و پیام خطا میدهد. برای اینکه بتوانیم قبل از کلمه ای علامت @ چاپ شود باید از دو تا @ پشت سر هم استفاده کنیم . در View زیر داریم :

 
@@SomeText 

خروجی View فوق بصورت زیر است :

@SomeText

 

 

نحوه نگارش بلاک کد (Razor Block Code):

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

بدین منظور باید بصورت مثال زیر عمل کنیم :

 

@*
    Razor Block Comment – به کلاینت ارسال نمی شود
*@
@*
    My strFullName value is: @strFullName
*@
@{
    C# Code is Here….
}
    

 

کامنت کردن کدهای #C در Razor View:

برای کامنت کردن کدهای HTML از    <!– و –> استفاده میکنیم و به سمت کلاینت ارسال میشود . برای کامنت کردن کدهای سی شارپ از @* و  *@ استفاده میکنیم .

 

نوشتن کدهای #C در View:

برای نوشتن کد سی شارپ در بلاک از @{ و } استفاده میکنیم . در مواقعی که کدهای سی شارپ ما زیاد است از این بلاک استفاده میکنیم و در عین حال می توان کدهای HTML را نیز بنویسیم .

 

بعنوان مثال View زیر را تعریف میکنیم :

 
@{
    // Razor Block Code
    string strFirstName = "Ehsan";
    string strLastName = "Safari";
    string strFullName =
        string.Format("{0} {1}", strFirstName, strLastName);
    strFullName = strFullName.ToLower();
    if (strFullName == "Ehsan Safari")
    {
        string strMessage = "Something…";
    }
    {
        string strSomeVariable = "Something…";
    }
}
My strFullName value is: @strFullName
    

نکته ۱: متغیرهایی که در بلاک کد RazorView ساخته می شوند علاوه بر خود بلاک ، تا پایان داکیومنت (ویوی جاری) نیز شناخته می شوند . در مثال فوق با اینکه strFullName در بلاک کد تعریف شده است ولی در کد بعد از بلاک نیز شناخته می شود و قابل دسترسی است .

نکته ۲: کلیدهای میانبر برای کامنت کردن کدهای سی شارپ و یا کدهای داخل بلاک کد RazorView عبارتند از : Ctrl+k+c و کلیدهای Ctrl+k+u نیز متن مذکور را از حالت کامنت در میاورد .

به منظور کسب اطلاعات بیشتر درباره Razor View لطفا به وب سایت asp.net مراجعه نمایید .

 

 

نحوه نمایش تصویر در ویو (Razor View):

فرض کنید ما تصویری بنام Mohtava در فولدر images داریم . میخواهیم محتویات آنرا در مرورگر به کاربر نمایش دهیم . برای اینکار داریم :

 
@{
    string strFileName = "Mohtava";
}
  @strFileName

 @*
    Error:
    'string' does not contain a definition for 'jpg' and
    no extension method 'jpg' accepting a first argument of type 'string' could be found
 *@
 
@{
    string strFileNameWithExtension =
        string.Format("{0}.jpg", strFileName);
}
   @strFileName

@*
    Success : Our Image is Displayed Successfully…!
*@
    

 

نکات تعریف آدرس تصویر در ویو:

نکته ۱ : اگر بصورت روش اول بنویسیم با خطا مواجه می شویم چون بعد از @ یک متغیر است و شناخته شده است ولی از جنس رشته است . بعد از نام متغیر کلمه jpg آمده است . چون String متدی بنام jpg ندارد !!! اما در روش دوم این مشکل را با استفاده از string.Format حل کرده ایم . ابتدا پسوند عکس را بدین صورت تعریف میکنیم و سپس در تگ img نمایش میدهیم .

نکته ۲ : برای نمایش عکس میتوانیم از کد زیر استفاده کنیم :

 
@{
    string strFileName = "Ehsan";
}
@strFileName
    

 

برای یادگیری بیشتر درباره نمایش و نیز آپلود تصاویر در ASP.NET می توانید به وب سایت مرجع دات نت رجوع کنید .

 

 قوانین تعریف کد #C در بین کدهای HTML:

با اینکه میتوان در بین کدهای html کدهای سی شارپ نوشت و بالعکس ، ولی قوانینی نیز دارد . برای مثال نمیتوان کدی بصورت زیر نوشت :

 
@{
    string strFirstName = "Ehsan";
    if (strFirstName.StartsWith("E"))
    {
        The name starts with "E" character!
    }
    else
    {
        The name does not start with "E" character!
    }
}
    

خط آخر خطا دارد . چون باید در تگ html نوشته شود نه همینجوری ! مثال زیر تصحیح شده مثال فوق است :

 
@{
    string strFirstName = "Safari";
    if (strFirstName.StartsWith("E"))
     {
      The name starts with "E" character! 
     } else 
      { 
     The name does not start with "E" character! 
      } 
     } 
        

کاربرد دستور <text> در Razor:

زمانی که بخواهیم یک متنی را عینا در خروجی چاپ کنیم و نمیخواهیم هیچ تگی اطراف آن باشد (مانند div , span , …) باید از دستور <text> استفاده کنیم . تکست یک تگ html نمی باشد و مختص Razor است . بنابراین در مثال زیر داریم :

 
@{
    string strFirstName = "Mohtava";
    if (strFirstName.StartsWith("M"))
    {
        
            The website starts
            with "M" character!
        
    }
    else
    {
        @:The website does not start with "M" character!
    }
}
    

علاوه بر text میتوانیم از :@ نیز استفاده کنیم ولی این دستور بصورت inline (یک خطی است) .

برای مباحث پیشرفته تر درباره RazorView Engine میتوانید به وب سایت اصلی ASP.net مراجعه کنید .

 

نحوه ارسال پارامتر از Controller به View:

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

 
[System.Web.Mvc.HttpGet]
public System.Web.Mvc.ViewResult Learn1130()
{
    ViewData[“Message”] = "Hello World!";
    return (View());
}
    

 

تعریف متغیر ViewData:

بدین صورت تعریف میشود که اگر ViewData با نام Message از قبل وجود نداشت آنرا بساز و مقدار اولیه آن را Hello World قرار بده و اگر از قبل وجود داشت ، مقدار آنرا به Hello World تغییر بده . بنابراین ما دستوری برای تعریف متغیر نداریم . View اکشن فوق بصورت زیر است :

 
@ViewData[“Message”] 

 

تعریف متغیر ViewBag:

ViewBag نیز مانند ViewData عمل میکند فقط با این تفاوت که مقداردهی آنها با هم فرق دارد . به اکشن زیر توجه کنید :

 
[System.Web.Mvc.HttpGet]
public System.Web.Mvc.ViewResult Learn1140()
{
    ViewBag.Message = "Hello World!";
    return (View());
}
    

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

 
@ViewBag.Message 

 

رابطه بین ViewData و ViewBag:

در مثال بعد خواهیم فهمید که در واقع ViewData و ViewBag یک کالکشن هستند یعنی اگر در ViewData متغیری تعریف کنیم میتوانیم در ویو انرا با ViewBag بخوانیم :

 
[System.Web.Mvc.HttpGet]
public System.Web.Mvc.ViewResult Learn1150()
{
    ViewBag.Message1 = "Hello World (1)!";
    ViewData[“Message2”] = "Hello World (2)!";
    return (View());
}
    

و View این اکشن :

 
@ViewBag.Message1
@ViewData[“Message1”] 
@ViewBag.Message2 
@ViewData[“Message2”] 

برای یادگیری بیشتر مبحث ViewBag و ViewData میتوانید به مرجع اصلی آموزش viewbag در mvc مراجعه کنید .

با بخش دوم از جلسه دوم آموزش MVC با ما همراه باشید …smiley


برچسب‌ها:

Razor ViewviewView در MVCViewResultارسال پارامتر از controller به viewخروجی ViewResultکامنت کردن کدمتغیر ViewBagمتغیر ViewDataنمایش تصویر در ویوویوویو در MVC