آموزش کد نویسی Razor Syntax در ASP.Net MVC

آموزش کد نویسی با Razor Syntax در ASP.Net MVC :

ساختار دستوری Razor یکی از موتورهای پردازشگر و اجرا کننده View است که توسط ASP.Net MVC پشتیبانی می شود. Razor به شما امکان نوشتن کدهای سرور ساید C# یا ویژوال بیسیک را در ترکیب با تگ های html می دهد. View های نوشته با ساختار دستوری Razor به زبان C# دارای پسوند .cshtml و با زبان VB دارای پسوند .vbhtml هستند. ساختار دستوری Razor دارای ویژگی های اصلی زیر است :

• کد فشرده (Compact) : ساختار دستوری Razor Syntax بسیار فشرده است و باعث می شود تا در هنگام نوشتن کد، کاراکتر کلمات کلیدی را استفاده کنید.
• یادگیری آسان : یادگیری ساختار دستوری Razor Syntax بسیار ساده بوده و می توانید از زبان های برنامه نویسی مورد علاقه خود مثل C# یا VB استفاده کنید.
• قابلیت کامل کردن خودکار (Intellisense) کد : در هنگام استفاده از Razor در ویژوال استودیو، ابزار کامل کردن خودکار کد یا Intellisense، کمک زیادی در نوشتن سریع و بدون خطا دستورات کند.
• پس از ارائه مقدمات فوق، بیایید به یادگیری نوشتن کدهای Razor بپردازیم.

آموزش نوشتن دستورات درون خطی (inline expression) با Razor در ASP.Net MVC :

با استفاده از یک کاراکتر @ در ابتدای خط دستور، می توانید کدهای سرور ساید C# یا ویژوال بیسیک را درون تگ های html بنویسید. برای مثال می توان از کد متغیر _نام @ برای نمایش مقدار یک متغیر سرور ساید در خروجی صفحه استفاده کرد. یا کد DateTime.New، زمان و تاریخ جاری سرور را بر می گرداند. بنابراین با نوشتن کد @ DateTime.New، می توانید تاریخ و زمان جاری سرور را همانند کد زیر در صفحه نمایش دهید. یک دستور تک خط درون خطی، نیازی به نوشتن (;) در انتهای دستورات ندارد.

                       
<h1>Razor syntax demo</h1>
<h2>@DateTime.Now.ToShortDateString()</h2>

Razor syntax demo 
08-09-2014

آموزش نوشتن دستورات چندخطی (Multi line Statement) با Razor در ASP.Net MVC :

می توانید چندین خط دستورات سرور ساید را با قرار دادن درون یک بلوک @{…} در صفحه، همراه با کدهای html نیز قرار دهید. هر یک از خطوط دستور در زبان C#، بایستی با یک علامت سمیکلون (;) در انتهای خط، بسته شود. همانند کد مثال زیر :

@{
    var date = DateTime.Now.ToShortDateString();
    var message = "Hello World";
}
<h2>Today's date is: @date </h2>
<h3>@message</h3>

Razor syntax demo 
Today's date is: 08-09-2014
Hello World!

آمورزش نمایش متن (Text) در کد MVC Razor :

می توانید از @: و یا <text>…</text> برای نمایش متن (text) همراه با دستورات Razor استفاده کتید، به صورت زیر :

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    @:Today's date is: @date <br />
    @message                               
}

Razor syntax demo 
Today's date is: 08-09-2014
Hello World!

همانطور که در خروجی مشاهده کردید، متن بعد از @: در مجموعه کد Razor اجرا نشده و به صورت متن خام همراه با نتیجه سایر دستورات، نمایش داده می شود. همچنین نحوه نمایش متن در دستورات razor با استفاده از تگ <text>…</text> در کد مثال زیر نشان داده شده است :

@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
                        <text>Today's date is:</text> @date <br />
    @message                               
}

                        
Razor syntax demo 
Today's date is: 08-09-2014
Hello World!

آموزش نوشتن دستور شرطی if-else در MVC Razor :

می توانید با استفاده از کاراکتر @ قبل از کلمه کلیدی else و if، یک دستور شرطی را به زبان Razor ایجاد کنید. توجه داشته باشید که دستورات مربوط به if و else بایستی در یک بلوک {…} قرار بگیرند، حتی اگر یک خط دستور باشند. همانند کد مثال زیر :

@if(DateTime.IsLeapYear(DateTime.Now.Year) )
{
    @DateTime.Now.Year @:is a leap year.
}
else { 
    @DateTime.Now.Year @:is not a leap year.
}

2014 is not a leap year. 

آموزش نوشتن حلقه for loop در MVC Razor :

همچنین می توانید با قرار دادن @ قبل از کلمه کلیدی for به صورت زیر یک حلقه برای کد Razor بنویسید. مجموعه دستورات حلقه for نیز بایستی درون یک بلوک {…} قرار بگیرند.

@for (int i = 0; i < 5; i++) { 
    @i.ToString() <br />
}

0
1
2
3
4

آموزش به کار بردن شی Model Object در ASP.Net MVC Razor

می توانید با استفاده از کلمه کلیدی @model از شی model object مورد نظر خود، در هر کجای نما (View) استفاده کنید. برای مثال، در کد زیر، از شی student برای نمایش اطلاعات در خروجی استفاده کرده ایم :

@model Student
<h2>Student Detail:</h2>
<ul>
                        <li>Student Id: @Model.StudentId</li>
                        <li>Student Name: @Model.StudentName</li>
                        <li>Age: @Model.Age</li>
</ul>

Student Detail:
            
- Student Id: 1 
- Student Name: John 
- Age: 18 

آموزش تعریف متغیر variable در MVC Razor :

ابتدا بایستی یک متغیر (Variable) را در یک بلوک دستوری @(…} همانند کد مثال زیر تعریف نموده و سپس با کمک علامت @، آن را در کد html خود استفاده کنید :

@{ 
    string str = "";
    if(1 > 0)
    {
        str = "Hello World!";
    }
}
<p>@str</p>

Hello World!

در این درس، به آموزش مهم ترین ساختارهای دستوری razor پرداختیم. برای دریافت اطلاعات بیشتر، می توانید به بخش آموزش Razor Syntax در سایت ASP.Net نیز رجوع نمایید.