تبلیغات متنی و بنر

آموزش ASP.Net > راهکارهای موثر در ASP.Net
 راهکار 3 - 1 : طراحی یک صفحه ساده ASP.Net با فایل کد جدا در ویژوال استودیو

مقدمه :

در طراحی و کدنویسی صفحات ASP.Net می توانید 2 مدل را برای مدیریت اشیای ظاهری صفحه ( مثل کنترل ها ، تصاویر ، متن و ... ) و کدهای برنامه نویسی انتخاب نمایید .
در مدل صفحه فایل تکی ، هر دو بخش اشیای ظاهری و تگ های HTML درون یک فایل تکی گنجانده می شوند . در حالت دیگر اشیای ظاهری درون یک فایل با پسوند aspx و کدهای برنامه نویسی در یک فایل جدا ( به نام فایل کد ) که متصل به فایل اصلی است ، نوشته می شوند . این فایل در زبان VB دارای پسوند vb و در زبان #C دارای پسوند cs می باشد . در ضمن نام هر دو فایل اصلی و کد یکسان می باشد . به این حالت در اصطلاح " فایل کد جدا " می گویند ، که دارای مزایای زیر است :

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

برای حمایت از این راهکار ، کتاب راهکارهای موثر در ASP.Net را دانلود نمایید ...

در این راهکار به بررسی مدل " صفحه با فایل کد جدا " خواهیم پرداخت . حالت صفحه فایل تکی را در راهکار قبلی ، راهکار 1-1 : ایجاد یک صفحه جدید ASP.Net در ویژوال استودیو  بررسی کردیم .

نکته و راهنمایی : انتخاب هر یک از روش ها برای طراحی صفحات ASP.Net به نظر طراح و کاری که می خواهید انجام دهید ، بستگی دارد . اما ویژوال استودیو از هر دو روش پشتیبانی کرده و امکانات یکسانی را در اختیارتان قرار می دهد .
مواردی که در این راهکار به بررسی آنها خواهیم پرداخت عبارتند از :

  • ایجاد یک صفحه ASP.Net با یک فایل جدا برای کدنویسی .
  • اضافه کردن کنترل های مورد نظر به صفحه .
  • اضافه کردن رویدادها و متدهای مربوط به کنترل به صفحه کدنویسی .
  • اجرای صفحه توسط موتور مجازی ویژوال استودیو و نمایش خروجی صفحه .

پیش نیازها :

برای اجرای این راهکار ، بایستی نرم افزارهای زیر بر روی کامپیوتر شما نصب شده باشد :

  • مایکروسافت ویژوال استودیو یا Visual Web Developer .

ایجاد یک پروژه جدید وب سایت و یک صفحه جدید :

در بخش اول از راهکار ، یک پروژه جدید وب سایت را ایجاد کرده و یک صفحه جدید را به آن اضافه می کنیم . همچنین متن ها ، عناصر HTML ، و ... را بدان اضافه کرده و در صفحه اجرا خواهیم کرد .
چنانچه شما با نحوه ساخت سک وب سایت جدید ASP.Net و ایجاد یک صفحه جدید آشنا هستید ، می توانید این مرحله را رها کنید .

نحوه ایجاد یک وب سایت جدید ASP.Net :

  1. برنامه ویژوال استودیو یا Visual Web Developer را باز کرده و از منوی File ، گزینه New Web Site را کلیک نموده تا پنجره آن به صورت زیر باز شود :

    آموزش ایجاد یک وب سایت جدید ASP.Net در ویژوال استودیو

  2. در زیر بخش Insatlled Templates ، زبان VB یا #C را برای کدنویسی سایت خود انتخاب کرده و سپس بر روی گزینه ASP.Net Web Site کلیک نمایید .
  3. در قسمت Web Location ، گزینه File System ( برای ذخیره سایت بر کامپیوترتان ) را انتخاب کرده و سپس پوشه ای که می خواهید سایت در آن قرار بگیرد را تعیین نمایید .
  4. در نهایت دکمه Ok را زده و سپس ویژوال استودیو ، سایت جدید را ساخته و در نمای طراحی ( Design ) باز می کند .

ایجاد یک صفحه جدید :

هنگامی که یک سایت جدید ASP.Net را ایجاد می کنید ، ویژوال استودیو یک صفحه پیش فرض به نام Default.aspx با فایل جدا جهت کدنویسی را ایجاد می کند .
اما اگر بخواهید یک صفحه جدید به دلخواه خود به پروژه اضافه کنید ، مراحل زیر را انجام دهید :

  1. صفحه Default.aspx را که ویژوال استودیو در ابتدا به صورت پیش فرض باز کرده را ببندید . سپس در منوی Solution Explorer بر روی نام وب سایت کلیک راست نموده و گزینه Add New Item را انتخاب کنید . همانند تصویر زیر :

    آموزش ایجاد یک صفحه جدید ASP.Net در ویژوال استودیو

  2. در قسمت Installed Tempaltes به ترتیب یکی از زبان های #C یا VB را برای کدنویسی صفحه و سپس گزینه Web Form را انتخاب نمایید .
  3. در قسمت Name نیز ، نام WebPageSeprated را برای صفحه تعیین کنید .
  4. مطمئن شوید که گزینه انتخابی Palce code in seprate file علامت خورده باشد . این کار باعث قرار گرفتن کدهای برنامه نویسی صفحه در یک فایل جدا و همنام با صفحه ، که بر حسب زبان انتخابی شما برای برنامه نویسی سایتتان ، دارای پسوند cs یا vb است ، قرار بگیرد .
  5. همچنین توجه کنید که گزینه انتخابی Select master page تیک نخورده باشد ، زیرا ما قصد نداریم تا صفحه ای را به عنوان مستر پیج و الگو این صفحه قرار دهیم .
  6. در نهایت دکمه Add را زده تا صفحه جدید به پروژه اضافه شود .

ویژوال استودیو دو فایل جدید با نام یکسان ، ولی پسوندهای متفاوت را به پروژه اضافه می کند . فایل اول ، فایل WebPageSeparated.aspx بوده که فایل اصلی صفحه است و کنترل های سرور ASP.Net ، تگ های HTML ، متن ها و سایر المنت های تصویری درون آن قرار دارند . فایل دوم WebPageSeparated.cs یا WebPageSeparated.vb ( بر حسب زبان برنامه نویسی انتخاب شده برای صفحه ) است که محل قرار گیری کدهای صفحه را شامل می شود .

اضافه کردن عناصر HTML به صفحه :

در این بخش از راهکار ، مقداری کد ثابت ( static ) شامل متن و تگ های HTML را به صفحه اضافه می کنیم :

  1. با کلیک بر روی عبارت Design ، به نمای طراحی صفحه بروید .
    این نما ، صفحه را در ظاهر خروجی آن نشان می دهد و کلیه اجزای تصویری در این بخش قابل دسترس هستند .
  2. نشانه گر موس را درون تگ div که به صورت پیش فرض بر روی صفحه وجود دارد ، قرار دهید . سپس یک عبارت دلخواه مثل " Welcome To Developer1 " را تایپ نمایید .
  3. سپس به نمای کد یا Source بروید . در این نما می توانید کدهای HTML ای که همین الان تایپ کرده اید را مشاهده نمایید . کد یک صفحه ASP.Net بسیار شبیه به کد یک صفحه معمولی HTML است ، با این تفاوت که در ابتدای صفحه یک اعلان به صورت <% Page @ %> قرار دارد .

اضافه کردن و کدنویسی کنترل های مورد نظر :

در این مرحله از راهکار ، شما یک کنترل دکمه فرمان ( Button ) ، یک کادر متن ( TextBox ) و یک کنترل نمایش دهنده متن ( Label ) را به صفحه اضافه کرده و کدهایی را در رویداد کلیک ( Click ) آنها خواهید نوشت . برای این منظور مراحل زیر را انجام دهید :

  1. به نمای طراحی ( Design ) صفحه بروید .
  2. اشاره گر موس را پس از متنی که در مرحله قبل درون صفحه نوشتیم ، قرار دهید . چندین بار دکمه Enter را زده تا فضای کافی درون صفحه ایجاد شود .
  3. از منوی Toolbox برنامه و بخش کنترل های استاندارد آن ، یک کادر متن ( TextBox ) ، یک دکمه فرمان ( Button ) و یک کنترل نمایش دهنده متن ( Label ) را بر روی صفحه قرار دهید .
  4. اشاره گر موس را در مقابل نام کادر متن ( TextBox ) قرار داده و عبارتی مثل " : Enter your name " را تایپ نمایید .
    همانطور که دقت کردید ، در یک صفحه ASP.Net به راحتی می توانید عناصر و تگ های HTML را با کنترل های ASP.Net ، همزمان استفاده کنید .

تعیین خواص لازم برای کنترل ها :

ویژوال استودیو ، روش های مختلفی را برای تنظیم خواص کنترل های ASP.Net در اختیار شما قرار داده است . در این راهکار از هر دو محیط طراحی و کد نویسی برای تنظیم خواص کنترل ها استفاده خواهیم کرد . به صورت زیر :

  1. کنترل Button را انتخاب نموده و از منوی Properties ، مقدار خاصیت Text آن را بر روی مقدار " Display Name " قرار دهید .
  2. به نمای کد ( Source ) بروید .
    نمای کد ( Source ) ، تگ ها و المنت های ثابت صفحه به همراه کدهایی که ویژوال استودیو برای کنترل های ASP.Net قرار داده را نشان می دهد .
    نحوه تعریف کنترل های ASP.Net همانند تگ های HTML است با این تفاوت که دارای پیشوند asp: در تگ ابتدای خود و خاصیت " runat = " server که به معنای اجرا بر روی سرور سایت است را حتما دارند .
    خواص کنترل ها در ASP.Net ، درون تگ ابتدای کنترل تعریف و مقداردهی می شوند . برای مثال در مورد قبل که خاصیت Text کنترل را تعیین کردیم ، این خاصیت به صورت " Text = " Display Name " در تگ ابتدای کنترل قرار می گیرد .

کد نویسی برای کنترل دکمه فرمان Button :

در این راهکار یک کد ساده را برای کنترل دکمه فرمان Button نوشته تا عبارتی که درون کادر متن Name تایپ کرده اید را خوانده و آن را توسط کنترل Label نمایش دهد . به صورت زیر :

  1. به نمای طراحی Design رفته و بر روی دکمه فرمان Button دابل کلیک نمایید ، تا رویداد Click آن درون فایل کد صفحه باز شود .
  2. درون این رویداد ، همانند کد زیر ، دستورات لازم را تایپ نمایید :
    VB کد Protected Sub Button1_Click( ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
           Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
    End Sub
    C# کد protected void Button1_Click(object sender, System.EventArgs e)
       {
           Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
       }

تست کردن صفحه و فایل کد صفحه :

اکنون هر دو فایل صفحه یعنی فایل WebPageSeparated.aspx و فایل کد آن که WebPageSeparated.vb یا WebPageSeparated.cs است را تکمیل کرده و قصد داریم تا با اجرای آن در مرورگر ، خروجی را مشاهده نماییم . برای این منظور کارهای زیر را انجام دهید :

  1. کلیدهای CTRL + F5 را به صورت همزمان فشار دهید . ویژوال استودیو ، صفحه را به وسیله موتور مجازی خود در مرورگر اجرا می کند .
  2. یک نام دلخواه را در کادر متن صفحه نوشته و بر روی دکمه فرمان کلیک نمایید . نام وارد شده در کنترل Label نمایش داده خواهد شد .
  3. صفحه اصلی و فایل کد شما درست کار می کند . مرورگر را بسته و به راهکار بعدی بروید ! .

دانلود فایل عملی پروژه و نسخه PDF راهکار


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟  
حمایت از سایت Developer1