آشنایی با ساختار و تحولات نسل های Asp.Net بخش View

در مقاله قبلی در مورد ترتیب ایجاد نسل های مختلف Asp.Net صحبت کردیم و روت اصلی هر سه نسل را مورد بررسی قرار دادیم.

در این مقاله قصد داریم در مورد چگونه شکل گیری و کدنویسی بخش View در این سه نسل را بررسی نماییم.

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

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

نمونه ای از یک کد صفحه سمت کاربر در WebForm

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

   <asp:ListView runat="server">
       <ItemTemplate>
           
       </ItemTemplate>
   </asp:ListView>

</asp:Content>

توضیح: در نمونه کد بالا که در یک صفحه سمت کاربر نوشته شده است ابتدا مشاهده میکنیم تگ با asp شروع شده است. پس نکنه مهمی که متوجه میشویم تگ ها در WebForm به دلیل اختصاصی بودن با این نشان شروع و ختم میشوند.

اما نکته بعدی در خط اول از عنوان Content  برای تگ asp استفاده کرده. در مقاله قبلی توضیحی در مورد صفحه Master  داده شد. این عنوان برای الصاق صفحه سمت کاربر به یک صفحه اصلی که همان Master می باشد به کار رفته.

در صفحه Master بدلیل وجود بخش های ثبت سایت یک بخشی برای قسمت های متغییر در نظر گرفته میشود که هر صفحه ای به آن الصاق شود میتواند آن کهای ثبات را هم برای خود داشته باشد بدون کدنویسی دوباره.

نحوه معرفی بخش متغییر در صفحه Master

<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>

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

اگر به کد قبلی رجوع کنیم می بینیم که ContentPlaceHolderID دقیقا با نام ID کد بالا معرفی شده که میتواند از خصوصیات صفحه Master  بهره مند بشود. 

همچنین وجود runat="server" در هر دو کد به این دلیل است که محتوی هردو به سمت سرور ارسال خواهند شد.

و اما اخرین نکته تگ asp:ListView می باشد. در این تگ اشاره به یک لیست دارد که اطلاعاتی را میتواند به صورت یک لیست در اختیار کاربر قرار دهد. محتوی با ItemTemplate فراخوانی و مقدار دهی خواهد شد.

دقت داشت باشید محتوی را میتوان به صورت تگ های مختلفی همچون <li> به ItemTemplate معرفی کرد.

خب تا اینجا متوجه شدیم نسل اول در سمت کاربری خود دقیقا به چه صورت رفتار میکند اما در نسل دوم یعنی Asp Mvc شما با تغییرات جدیدی رو به رو خواهید شد. در صفحه سمت کاربر تگ های استفاده شده بجای اینکه از پیشوند asp استفاده کند به Html روی آورده. این امر نشان میدهد که نسل جدید تمایل بیشتری به HTml در کدنویسی سمت صفحه کاربری خود داشته. به همین منظوری هم پسوند های صفحات خود را تغییر داد و هم عنوان صفحه که اصطلاحا به صفحات کاربری خود Razor میگوید.

صفحات Razor برای استفاده از تگ ها  با @Html کار میکند. به این صورت که در نمونه کد زیر مشاهده میکنید.

@Html.ActionLink(“Home”, “Index”, “Home”)
@Html.ListBoxFor
(
 x => x.SelectedItemIds, 
 new SelectList(Model.Items, “Value”, “Text”)
)

در کد بالا خط اول یک تگ لینک به کار رفته که با Razor معرفی گردیده معادل خط اول در Html تگ <a></a> می باشد  که در Razor با ActionLink تعریف شده است.

در خط بعدی یک لیست آیتم دار انتخابی تعریف شده است که باز با Razor تعریف و فراخوانی شده است. معادل Html خط دوم  تگ select می باشد با مقدار انتخابی.

در نسل دوم اگرچه باز هم تگ نویسی سمت صفحه کاربر به کدهای اختصاصی Asp.Net‌است اما تگ ها ساده تر و کار با آنها بهتر از نسل اول می باشد. 

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

پس با این مقدمه نسل سوم را بررسی میکنیم.

در نسل سوم که Mvc Core می باشد همچنان صفحات Razor پابرجا هستند اما کدنویسی بیشتر و عملا با تگ های Html انجام میشود.

پس کدنویسی بسیار ساده تر شده و آن قوانین حاکم برای تگ نویسی کم رنگ گردیده و دست برنامه نویسان را باز تر کرده است.

نمونه کد صفحه کاربر

<select>
   <option value="value">text</option>
</select>

در کد بالا می بینیم که عملا خود تگ Html به کار رفته بدون هیچ پیشوند و پسوند.

در هر دو نسل Mvc  و Mvc Core صفحه Master که در مقاله قبلی هم به آن اشاره شده به Layout تبدیل شده است و بخش های ثابت در آن تعریف می شود.

برای تعریف بخش متغییر در لایوت باید به صورت زیر عمل کرد.

    @RenderBody()

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

@{
   Layout = "~/View/...";
}

این قطعه کد که با Razor ‌نوشته شده مسیر قرار گیری صفحه لایوت در روت را با عنوان Layout معرفی نموده تا پیوند کامل گردد.

روش فوق در هر دو نسل یکسان می باشد.

با بررسی این سه نسل در سمت صفحات کاربر متوجه شدیم که نسل های جدید خیلی راحت تر و ساده تر هستند و از طرفی کد نویسی در این دو نسل برای صفحات سمت کاربری انعطاف پذیری بهتری دارند.

پایان بخش دوم