۴
شهریور

جلسه ۱۴ : ساختار Razor در ASP.NET MVC

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. Razor یکی از موتورهای view در ASP.NET MVC است. Razor به شما اجازه می دهد ترکیبی از HTML و کد سمت سرور را با استفاده از # C و ویژوال بیسیک بنویسید. نمای Razor با ساختار ویژوال بیسیک دارای پسوند فایل vbhtml است و ساختار # C نیز دارای پسوند فایل cmhtml می باشد. در ادامه ی مباحث، برای آشنایی بیشتر با ساختار Razor در ASP.NET MVC با ما همراه باشید.

ساختار Razor در ASP.NET MVC

ساختار Razor شامل ویژگی های زیر است:

Compact :

ساختار Razor فشرده بوده و شما را قادر می سازد که تعداد کاراکترها را برای نوشت کدها به حداکثر برسانید.

Easy to Learn :

ساختار Razor برای یادگیری آسان بوده و شما می توانید برای کار با این ساختار از زبان سی شارپ یا ویژوال بیسیک استفاده کنید.

Intellisense :

Razor از تمام کدهای ویژوال استدیو پشتیبانی می کند.

در ادامه ی مباحث فوق، به آموزش چگونگی ایجاد ساختار Razor می پرازیم:

ساختار Inline

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

برای مثال از کد @Variable_Name برای نمایش مقادیر متغییرهای سمت سرور استفاده کنید.

به عنوان مثال کلاس DateTime.Now زمان و تاریخ جاری سیستم را بر می گرداند، پس آن را بصورت @DateTime.Now بنویسید:

مثال :

<h1>Razor syntax demo</h1>

<h2>@DateTime.Now.ToShortDateString()</h2>

<h1>Razor syntax demo</h1>

<h2>@DateTime.Now.ToShortDateString()</h2>

خروجی کد فوق به این صورت خواهد بود:

نتایج

بلوک کد چندگانه

شما می توانید چندین خط کد سمت سرور را که در braces @ {…} قرار دارد بنویسید. هر خط باید با semicolon همانند C # به پایان برسد:

مثال :

@{
    var date = DateTime.Now.ToShortDateString();
    var message = "Hello World";
}

<h2>Today's date is: @date </h2>
<h3>@message</h3>

var date = DateTime.Now.ToShortDateString();

var message = "Hello World";

}

<h2>Today's date is: @date </h2>

<h3>@message</h3>

نتایج اجرای کد فوق:

نتایج کد فوق

نمایش کد قالب Text

از @: یا <text>/<text> برای نمایش متن ها داخل code block استفاده کنید:

مثال :

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

var date = DateTime.Now.ToShortDateString();

string message = "Hello World!";

@:Today's date is: @date <br />

@message

}

نتیجه ی اجرای کد فوق:

مثال :

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

var date = DateTime.Now.ToShortDateString();

string message = "Hello World!";

@:Today's date is: @date <br />

@message

}

نمایش متن با استفاده از تگ <text> داخل یک code block :

مثال :

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

var date = DateTime.Now.ToShortDateString();

string message = "Hello World!";

<text>Today's date is:</text> @date <br />

@message

}

نتیجه کد فوق:

نتیجه ی کد 3

دستور شرطی if-else

دستور شرطی if-else با نماد @ نوشته می شود. دستورات if-else باید در داخل براکت { } قرار بگیرد:

مثال :

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

@if(DateTime.IsLeapYear(DateTime.Now.Year) )

{

@DateTime.Now.Year @:is a leap year.

}

else {

@DateTime.Now.Year @:is not a leap year.

}

نتیجه ی کد فوق:

نتیجه ی کد 4

ایجاد حلقه ی loop:

مثال :

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

@for (int i = 0; i < 5; i++) {

@i.ToString() <br />

}

نتیجه ی کد فوق:

نتیجه ی اجرای کد 5

مدل

برای استفاده از آبجکت مدل از @model استفاده کنید:

مثال :

@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>

@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>

نتیجه ی کد فوق:

نتیجه ی کد 6

اعلام متغیرها

متغیر در داخل code block باید داخل براکت { } تعریف شود. سپس از این متغیرها در نمای html با @ استفاده کنید:

مثال :

@{ 
    string str = "";

    if(1 > 0)
    {
        str = "Hello World!";
    }
}

<p>@str</p>

string str = "";

if(1 > 0)

{

str = "Hello World!";

}

نتیجه ی کد فوق :

نتیجه ی کد 7

نکات زیر را به خاطر بسپارید:

۱- از کاراکتر @ در کد سکت سرور استفاده کنید.

۲- کدهای سمت سرور باید در قالب ” @{* code * }” قرار بگیرند.

۳- از کاراکتر @: یا از <text></<text> برای نمایش متن داخال code block استفاده کنید.

۴- دستور if باید در قالب ساختار “@if{ }” تعریف شود.

۵- برای تعریف حلقه ی loop از ساختار @for استفاده کنید.

۶- @model به شما اجازه می دهد که از آبجکت مدل در view استفاده کنید.

کلام آخر

با استفاده از ساختار Razor در ASP.NET MVC حجم کدهای سمت سرور کاهش قابل توجهی خواهد داشت. در نتیجه سرعت تکمیل کد نویسی برنامه و اجرای برنامه نیز افزایش خواهد یافت. در بخش بعد به آموزش Html helper خواهیم پرداخت.

QR: جلسه ۱۴ : ساختار Razor در ASP.NET MVC

به اشتراک بگذارید

Razor در ASP.NET MVC ,آموزش asp از مقدماتی تا پیشرفته ,آموزش asp.net mvc ,آموزش برنامه نویسی ,آموزش تصویری asp.net mvc ,دوره کامل آموزش asp.net mvc

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۴ : ساختار Razor در ASP.NET MVC

مقدمه

ساختار Razor در ASP.NET MVC

ساختار Inline

بلوک کد چندگانه

نمایش کد قالب Text

دستور شرطی if-else

مدل

اعلام متغیرها

کلام آخر

لیست مطالب دوره

مقدمات آموزش ASP.NET MVC

آموزش Html helper

اعتبارسنجی در ASP.NET MVC

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ