برنامه نویسی

مشاهده در CodeBehind Framework – انجمن DEV

ek3nk4r 2024-05-29

0 4 خواندن این مطلب 5 دقیقه زمان میبرد

مشاهده در CodeBehind Framework – انجمن DEV

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این آموزش شما را با Views در CodeBehind آشنا می کنیم.

فهرست مطالب

View چیست

View یک جزء (یا صفحه) است که داده ها را به کاربر نمایش می دهد. معمولاً در HTML، CSS، و احتمالاً جاوا اسکریپت نوشته می‌شود و وظیفه ارائه داده‌ها از پشتیبان (مانند پایگاه داده یا API) در قالبی کاربرپسند را بر عهده دارد.

در CodeBehind، View یک فایل قالب است که برای نمایش خروجی به کاربر استفاده می شود. نماها معمولاً حاوی نشانه گذاری HTML به همراه کد C# برای نمایش محتوای پویا مانند متغیرها و داده های بازیابی شده از پایگاه داده هستند. نماها به جدا کردن منطق ارائه از منطق تجاری در یک برنامه کمک می کنند و حفظ و به روز رسانی کد را آسان تر می کنند.

پسوند CodeBehind View

بازگشت درخشان به هسته ASP.NET

پسوند View فایل ها در CodeBehind aspx است. این افزونه قبلاً توسط مایکروسافت در قالب وب قبلی در استاندارد دات نت استفاده می شد. فایل‌های aspx در چارچوب CodeBehind جدید، پویا و مدرن هستند و هیچ شباهتی به فرم وب قبلی مایکروسافت ندارند. در نتیجه آنها فقط یک نام هستند و با یکدیگر متفاوت هستند. مایکروسافت اکنون از پسوند cshtml برای Views در ASP.NET Core پشتیبانی می کند. فایل‌های aspx در چارچوب CodeBehind مزایای بیشتری نسبت به فایل‌های cshtml در چارچوب‌های پیش‌فرض ASP.NET Core مایکروسافت دارند.

نحو نمایش CodeBehind

نماها را می توان در CodeBehind با دو نحو ایجاد کرد. نحو Razor و نحو استاندارد. در اینجا فقط به طور خلاصه به Razor و syntaxes استاندارد اشاره می کنیم و در آموزش های بعدی به طور کامل این دو نحو را آموزش خواهیم داد.

نحو Razor

اگر بخواهیم صفحه View را با سینتکس Razor طراحی کنیم، باید رشته زیر را در ابتدای صفحه اضافه کنیم:
@page

مثال زیر یک صفحه نمایش با نحو Razor را نشان می دهد.

@page
@{
string PageTitle = "Page";
string BodyValue = "This is my page";
}



     charset="utf-8" />
    </span>@PageTitle<span class="nt"/>
<span class="nt"/>
<span class="nt"/>
    @BodyValue
<span class="nt"/>
<span class="nt"/>
</span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>وارد حالت تمام صفحه شوید


در سینتکس Razor، برای افزودن کدهای سمت سرور، ابتدا عبارت را بنویسید @ شخصیت (در علامت) و سپس { کاراکتر (براکت را باز کنید)، سپس کدهای سمت سرور را بنویسید و در آخر بنویسید } کاراکتر (بستن براکت).
اگر @ نماد قبل از یک شی با ارزش اضافه می شود، مقدار آن شی در خروجی نهایی نمایش داده می شود.
مثال:
با توجه به کدهای مثال بالا، Page رشته با عبارت جایگزین می شود @PageTitle ارزش و This is my page رشته با عبارت جایگزین می شود @BodyValue ارزش.
نحو استاندارد
اگر بخواهیم صفحه View را با سینتکس استاندارد طراحی کنیم، باید رشته زیر را در ابتدای صفحه اضافه کنیم:
<%@ page %>
مثال زیر یک صفحه نمایش با نحو استاندارد را نشان می دهد.

<%@ page %>
<%
string PageTitle = "Page";
string BodyValue = "This is my page";
%>



     charset="utf-8" />
    <%=PageTitle%>


    <%=BodyValue%>





    
    



در نحو استاندارد، برای افزودن کدهای سمت سرور، ابتدا بنویسید < شخصیت (کمتر از)، سپس % کاراکتر (علامت درصد)، سپس کدهای سمت سرور را بنویسید و در نهایت بنویسید % کاراکتر (علامت درصد)، سپس می نویسیم > شخصیت (بزرگتر از).
اگر یک شی مقدار بین آن اضافه کنیم <%= و %>، مقدار آن شی در خروجی نهایی نمایش داده می شود.
مثال:
با توجه به کدهای مثال بالا، Page رشته با مقدار جایگزین می شود <%=PageTitle%> و This is my page رشته با مقدار جایگزین می شود <%=BodyValue%>.

  فقط مشاهده ایجاد کنید


همانطور که در آموزش های قبلی گفتیم، در معماری انقلابی MVC در CodeBehind، تمام درخواست ها ابتدا به View می رسند.  نماها در CodeBehind بسیار منعطف هستند و شما نیازی به توسعه سیستم های خود بر اساس الگوی MVC ندارید.  شما می توانید برنامه خود را فقط با View بدون کنترلر و مدل ایجاد کنید.  بنابراین اکنون می خواهیم به پروژه خود در Visual Studio Code برگردیم و یک View جدید بدون کنترلر و مدل ایجاد کنیم.
در قسمت Explorer تمامی فایل های aspx داخل پوشه wwwroot را حذف می کنیم و سپس با کلیک راست بر روی این دایرکتوری، New File گزینه و یک فایل جدید به نام ایجاد کنید Default.aspx.
سپس کدهای زیر را داخل آن اضافه می کنیم Default.aspx فایل.

@page
@{ string Value1 = "I am learning the CodeBehind Framework"; }

What's in the Value1 string?

    There is an @Value1 value in the Value1 string.




    
    



پروژه را اجرا می کنیم (کلید F5).  پس از اجرای پروژه، تصویر زیر را در مرورگر مشاهده خواهید کرد.
اسکرین شات

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

What's in the Value1 string?

    There is an I am learning the CodeBehind Framework value in the Value1 string.




    
    



مسیر فیزیکی فایل View همانند مسیر URL است.
مثال: اگر دایرکتوری با نام ایجاد کنید test در wwwroot دایرکتوری و یک فایل View به نام وارد کنید MyView.aspx در این دایرکتوری، MyView.aspx از طریق مسیر URL زیر قابل دسترسی است:
example.com/test/MyView.aspx

توجه: اگر یک فایل View را نام ببرید Default.aspx، درخواست مسیر دایرکتوری باعث می شود Default.aspx فایل برای اجرا  به عبارت دیگر، Default.aspx مسیر پیش فرض Views در CodeBehind هستند.

مثال: اگر دایرکتوری با نام ایجاد کنید about در wwwroot دایرکتوری و درج الف Default.aspx فایل موجود در این فهرست، دیگر نیازی به درخواست مسیر زیر در URL نیست:
example.com/about/Default.aspx
درخواست زیر پاسخی مشابه درخواست فوق دارد:
example.com/about
نامگذاری فایل‌های aspx به حروف بزرگ حساس است و اگر یک View را با حروف بزرگ نام‌گذاری می‌کنید، باید همان نام‌گذاری در URL رعایت شود.  بنابراین، مسیر پیش فرض دایرکتوری است Default.aspx و default.aspx پیش فرض نخواهد بود.
همچنین می‌توانید پشتیبانی از فایل‌های cshtml را در فایل گزینه‌ها فعال کنید.  در مطالب بعدی نحوه فعال سازی پشتیبانی از فایل های cshtml را آموزش خواهیم داد.

  HttpContext در View


شما به HttpContext در نمای با استفاده از context در کد سمت سرور
HttpContext  یک شی است که در برنامه های ASP.NET برای ذخیره و بازیابی اطلاعات مربوط به یک درخواست HTTP فردی استفاده می شود.  دسترسی به ویژگی‌ها و روش‌های مختلفی را فراهم می‌کند که به توسعه‌دهندگان اجازه می‌دهد با داده‌های درخواست ورودی و داده‌های پاسخ خروجی تعامل داشته باشند.  همچنین امکان دستکاری کوکی ها، وضعیت جلسه، querystring، داده های فرم و سایر اطلاعات مربوط به درخواست را فراهم می کند.
در قسمت Explorer با کلیک راست بر روی wwwroot دایرکتوری را انتخاب می کنیم New File گزینه و یک فایل جدید به نام ایجاد کنید CheckQuery.aspx.
سپس کدهای زیر را داخل آن اضافه می کنیم CheckQuery.aspx فایل.

@page
@{
    string HasValue = (!string.IsNullOrEmpty(context.Request.Query["value"]))? "Yes" : "No";
}


    Exist value in querystring? @HasValue
    

    value is: @(context.Request.Query["value"].ToString())




    
    



با توجه به کدهای فوق ابتدا وجود مقدار query بررسی می شود و سپس مقدار query بین تگ های HTML اضافه می شود.
پروژه را اجرا می کنیم (کلید F5).  پس از اجرای پروژه، باید رشته را اضافه کنید /CheckQuery.aspx به URL

توجه: معمولاً وقتی پروژه وب را در Visual Studio Code اجرا می کنید، مسیری مانند مسیر زیر نمایش داده می شود:
localhost:####
به جای # کاراکتر، اعداد قرار می گیرند
در این مجموعه آموزشی از example.com به جای این مسیر

مسیر بدون پرس و جو
example.com/CheckQuery.aspx
اگر مسیر بالا را در مرورگر وارد کنید، تصویر زیر را در مرورگر مشاهده خواهید کرد.
اسکرین شات

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


    Exist value in querystring? No
    

    value is: 




    
    



همانطور که مشخص است ما درخواست نکردیم value در اینجا پرس و جو کنید و در نتیجه هیچ مقداری نمایش داده نمی شود.
مسیر با پرس و جو
example.com/CheckQuery.aspx?value=CodeBehind Framework
اگر مسیر بالا را در مرورگر وارد کنید، تصویر زیر را در مرورگر مشاهده خواهید کرد.
اسکرین شات

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


    Exist value in querystring? Yes
    

    value is: CodeBehind Framework




    
    



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

  لینک های مربوطه


CodeBehind در GitHub:
https://github.com/elanatframework/Code_behind
CodeBehind در NuGet:
https://www.nuget.org/packages/CodeBehind/
صفحه کد پشت:
https://elanat.net/page_content/code_behind