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

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

ایجاد یک صفحه جدید ASP.Net در ویژوال استودیو :

راهکار شماره 1 شما را با محیط کلی طراحی وب در نرم افزارهای Microsoft Visual Studio 2010 و Microsoft Visual Web Developer آشنا می سازد . در این راهکار شما نحوه ساخت یک صفحه ساده ASP.Net را فرا گرفته و خواهید آموخت چگونه کنترل ها و کدهای مورد نظر خود را به یک صفحه جدید ASP.Net اضافه نمایید .
کارهای ارائه شده در این راهکار عبارتند از :

  1. ایجاد یک پروژه جدید وب سایت ASP.Net و اضافه کردن فایل های آن .
  2. آشنایی با محیط نرم افزار ویژوال استودیو .
  3. ایجاد یک صفحه جدید ASP.Net .
  4. اضافه کردن کنترل های مورد نظر خود به صفحه .
  5. اضافه کردن مدیریت کننده رویدادها و کدهای مورد نظر به صفحه .
  6. اجرا و آزمایش خروجی صفحاتی که طراحی کرده اید توسط موتور سرور مجازی ASP.Net که به صورت پیش فرض در نرم افزار ویژوال استودیو تعبیه شده است .

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

استفاده از این راهکار بدون دانلود کتاب
دانلود رایگان فایل PDF و پروژه راهکار

پیش نیازها :

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

  1. برای طراحی صفحات ASP.Net بایستی یکی از نرم افزارهای Microsoft Visual Studio یا Microsoft Visual Web Developer بر روی سیستم شما نصب شده باشند .
  2. چهارچوب کاری NET Framework. ، که همزمان با نصب ویژوال استودیو بر روی سیستم شما نصب خواهد شد .

ساخت یک پروژه وب سایت ASP.Net و اضافه کردن صفحات جدید به آن :

در این مرحله از راهکار شما بایستی یک پروژه وب سایت جدید را ایجاد کرده و یک صفحه را به آن اضافه نمایید . سپس کدهای مورد نظر HTML و ASP.Net خود را به صفحه اضافه کرده و آن را در مرورگر اجرا کنید .
در این راهکار ما پروژه وب سایت ASP.Net خود را با استفاده از حالت File system web site project ایجاد می کنیم . در این حالت نیازی به کار با سیستم IIS ویندوز نداریم ، به جای آن صفحات سایت بر روی فایل سیستم ویندوز ساخته شده و اجرا می شوند . بنابراین شما نیاز به انجام تنظیمات اضافه نداشته و به راحتی می توانید سایت خود را در ویژوال استودیو اجرا نمایید .
فایل سیستم ویندوز ( File System ) صفحات و سایر فایل های سایت شما را در یک پوشه Folder در مکانی دلخواه شما بر روی کامپیوترتان ذخیره می کند . راه های دیگری برای نگهداری فایل های پروژه وب سایت ASP.Net نیز وجود دارد که در لیست زیر به معرفی آنها می پردازیم :

  1. local web site project : در این حالت صفحات و فایل های پروژه وب سایت در یک فولدر اصلی در پروژه IIS ویندوز قرار گرفته ( معمولا inetup\wwwroot\ ) و توسط سرور IIS ویندوز اجرا می شوند .
  2. FTP site project : در این حالت فایل ها و صفحات پروژه وب سایت بر روی یک سرور راه دور قرار گرفته و از طریق پروتکل ( FTP : File Transfer Protocol ) می توانید به آنها دسترسی داشته و فایل ها را آپلود و دانلود کنید .
  3. remote IIS web site project : در این حالت فایل ها و صفحات پروژه وب سایت شما بر روی یک سرور دیگر قرار گرفته و شما از طریق یک شبکه محلی ( local network ) به سایت و فایل های آن دسترسی دارید .
  4. web application project : این روش بسیار شبیه روش file system web site project می باشد ، با این تفاوت که قبل از اجرا و ارسال سایت خود ، بایستی پروژه خود را در قالب یک فایل dll کامپایل کنید .

نحوه ساخت یک وب سایت file system :

برای ایجاد و ساخت یک وب سایت جدید ASP.Net بر مبنای فایل سیستم ویندوز ، مراحل زیر را به ترتیب انجام دهید :

  1. برنامه Microsoft Visual Studio یا Microsoft Visual Web Developer را برای کار با سایت ASP.Net خود باز کنید .
  2. از منوی File برنامه ، گزینه New Web Site را انتخاب نمایید .
    پنجره New Web Site مطابق تصویر زیر برای شما نمایش داده می شود :
    پنجره New Web Site در برنامه ویژوال استودیو
  3. از قسمت Installed Templates زبان مورد نظر خود برای طراحی و برنامه نویسی سایت را که می تواند VB یا #C باشد را انتخاب نمایید .
    سپس از کادر وسط پنجره گزینه ASP.NET web site که به صورت پیش فرض انتخاب شده است را انتخاب نمایید . انتخاب این گزینه باعث ایجاد وب سایت ASP.Net جدید با یک Template معمولی ، شامل فایل های اصلی و مهم یک سایت ASP.Net می شود .
    اگر گزینه دوم یعنی ASP.NET Empty Web Site را انتخاب نمایید ، یک پروژه وب سایت ASP.Net کاملا خالی و بدون هیچ فایل آماده ای ایجاد می شود .
  4. از منوی web location ، گزینه File System را انتخاب نمایید . انتخاب این گزینه باعث می شود تا فایل های پروژه سایت ASP.Net شما بر روی یک پوشه در فایل سیستم ویندوز ایجاد شود .
    در کادر مقایل منوی web location آدرس پوشه یا محلی که می خواهید سایت خود را در آن ذخیره نمایید را تعیین کنید . نمایید را تعیین کنید .
  5. بر روی گزینه OK کلیک نمایید .

بر حسب گزینه ای که از کادر وسط پنجره New Web Site انتخاب کرده اید ، برنامه ویژوال استودیو پروژه سایت ASP.Net جدید را با فایل های لازم برای شما ایجاد می کند .
پس از این مراحل ، نوبت آن است که به طراحی و گسترش سایت خود بپردازید .

نگاهی سریع و کلی به محیط کار نرم افزار ویژوال استودیو :

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

نمای کلی محیط برنامه ویژوال استودیو

آشنایی با منوها و ابزارهای پیش فرض در ویژوال استودیو :

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

  1. منوی Toolbars : این منوها ابزارهایی برای کار با متن ها و ویرایش آنها را در اختیار شما قرار می دهد . برخی از ابزارهای این منو فقط در زمانی که صفحه در حالت Design است ، فعال هستند .
  2. پنجره Solution Explorer : این پنجره فایل ها و پوشه ای موجود در وی سایت را نمایش داده و از اینجا می توانید به آنها دسترسی داشته باشید .
  3. پنجره Document : این پنجره صفحه ها و فایل هایی که در حال کار با آنها هستید را در یک حالت Tabbed نمایش می دهد . شما می توانید با کلیک بر روی Tab هر سند ، بین آنها حرکت نمایید .
  4. منوی Properties : از طریق این پنجره می توانید به خواص شی که در آن لحظه انتخاب کرده اید مثل صفحه ، المنت های HTML و یا کنترل های ASP.Net دسترسی داشته و آنها را ویرایش نمایید .
  5. قسمت View Tabs : در قسمت پایین نرم افزار ویژوال استودیو نواری وجود دارد که دارای 3 گزینه Split ، Source و Design است . از طریق این نوار می توانید صفحه ASP.Net خود را در 3 حالت مختلف مشاهده نمایید :
    1. Design : در این حالت صفحه در نمای طراحی به شما نمایش داده می شود و می توانید اجزا و کنترل های صفحه را مشاهده نمایید .
    2. Source : در حالت Source کد HTML صفحه نمایش داده می شود و می توانید مستقیما این کدها را مشاهده و ویرایش نمایید .
    3. Split : در حالت Split ، صفحه به دو بخش تقسیم شده که در قسمت بالا نمای طراحی و در قسمت پایین نمای کد صفحه به صورت همزمان نمایش داده می شود .
  6. منوی ToolBox : در این منو انواع کنترل های ASP.Net و المنت های HTML بر حسب کارکرد ، در دسته های مختلفی تقسیم  تقسیم بندی شده اند و شما می توانید هر کنترل مورد نظر خود را انتخاب کرده و بر روی صفحه قرار دهید .
  7. پنجره Server Explorer : این پنجره Data Connections و پایگاه داده های موجود بر روی سرور کامپیوتر شما را نمایش می دهد . از این پنجره می توانید به بانک های اطلاعاتی SQL Server دسترسی داشته و آنها را ایجاد یا ویرایش نمایید .

ایجاد یک صفحه جدید ASP.Net :

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

  1. در پنجره Solution Explorer ، بر روی نام وب سایت خود کلیک سمت راست کرده و از منوی باز شده گزینه Add New Item را انتخاب کنید .
  2. کادر پنجره ای ، مطابق تصویر زیر باز می شود :
  3. از قسمت Installed Templates ، زبان مورد نظر خود برای کدنویسی صفحه که VB یا #C است را انتخاب کنید .
    سپس از قسمت وسط پنجره گزینه Web Form را انتخاب نمایید .
    نکته : هنگامی که شما یک پروژه وب سایت جدید ASP.Net را ایجاد می کنید ، زبان #C یا VB به عنوان زبان پیش فرض سایت انتخاب می شود . هر بار که بخواهید صفحه جدیدی را به سایت اضافه نمایید ، زبان آن زبان پیش فرض سایت خواهد بود .
    ولی می توانید برای هر صفحه زبانی متفاوت از زبان پیش فرض سایت نیز انتخاب کنید . برای مثال اگر زبان پیش فرض سایت #C است ، می توانید زبان VB را برای صفحه های جدید نیز انتخاب کنید .
  4. در قسمت Name ، نام مورد نظر را برای صفحه تعیین نمایید .
  5. دو عدد کادر انتخابی در پایین منو سمت راست وجود دارد .
    گزینه اول Place code in separate file می باشد . اگر آن را علامت بزنید ، یک فایل کد به همراه صفحه ساخته می شود تا کدهای برنامه نویسی را در داخل آن قرار دهید . اما اگر علامت آن را بردارید ، صفحه به صورت تک فایل ساخته شده و فایل کد جداگانه برای آن ایجاد نمی شود . برای دریافت اطلاعات بیشتر درباره انواع حالات کدنویسی در صفحات ASP.Net به بخش بررسی مدل های کد نویسی در صفحات ASP.NET بروید .
    در این راهکار ، برای ادامه کار علامت هر دو گزینه را بردارید .
  6. در پایان بر روی گزینه Add کلیک نمایید . برنامه صفحه جدید را ساخته و به پروژه شما اضافه می کند . صفحه جدید ایجاد شده ، یک صفحه خالی به صورت زیر است :

اضافه کردن المنت های HTML به صفحه :

صفحه جدیدی که به سایت اضافه کرده اید ، خالی بوده و هیچ محتویاتی در آن قرار ندارد . در این بخش از راهکار ، می خواهیم یک پاراگراف متن ساده HTML را به صفحه اضافه نماییم . برای این منظور مراحل زیر را انجام دهید :

  1. صفحه را در حالت Design قرار دهید .
  2. بر روی صفحه کلیک کرده و یک عبارت دلخواه مثل " Welcome to Visual Web Developer " را تایپ کرده و دو بار کلید Enter را بزنید .
  3. یک تگ < div > به صفحه اضافه نمایید . سپس به حالت Source صفحه رفته تا کد HTML آن را نیز مشاهده نمایید ، مطابق تصویر زیر :

اجرای صفحه :

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

  1. صفحه ای که طراحی کرده اید را انتخاب نمایید .
  2. کلیدهای CRTL + F5 را همزمان فشار دهید تا صفحه اجرا شود .
    با زدن دکمه های CTRL + F5 ، ویژوال استودیو سرور مجازی ASP.Net خود را شروع می کند . یک آیکون کوچک در کنار ساعت در منوی Taskbar ویندوز نیز نمایش داده شده ، که نشان می دهد ، سرور اجرا شده و فعال است .
  3. صفحه در مرورگر پیش فرض سیستم باز می شود .
    با اینکه صفحه طراحی شده یک صفحه ASP.Net با پسوند aspx. است ، همانند یک صفحه HTML ساده در مرورگر باز می شود .
    همچنین برای اجرای صفحه می توانید بر روی صفحه کلیک راست کرده و از منوی باز شده گزینه View in Browser را انتخاب نمایید .
  4. پس از مشاهده صفحه ، آن را ببندید .

اضافه کردن کنترل های ASP.Net به صفحه و کدنویسی آنها :

پس از اینکه یک متن ساده HTML را به صفحه اضافه کردید ، حال نوبت آن است تا چندین کنترل ASP.Net را بر روی صفحه قرار داده و برای آنها کدنویسی نماییم .
کنترل های معمول ASP.Net همانند کادرهای متن ( TextBox ) ، دکمه فرمان ( Button ) و نمایش دهند متن (  Label ) هستند که امکان دریافت و نمایش اطلاعات در فرم های وب را فراهم می کنند .
در این مرحله از راهکار یک کنترل دکمه فرمان ، یک کادر متن و یک کنترل Label را بر روی صفحه قرار داده و برای رویداد کلیک دکمه فرمان آن یک کد خواهیم نوشت .
بنابراین مراحل زیر را انجام دهید :

  1. با زدن دکمه Design ، به حالت Design صفحه بروید .
  2. در زیر عبارت Welcome to Visual Web Developer که قبلا ایجاد کرده ایم ، چند بار دکمه Enter را بزنید تا مقدار فضای لازم برای قرار دادن کنترل ها فراهم شود .
  3. از منوی Toolbox و قسمت کنترل های Standard ، یک کنترل TextBox را بر روی صفحه قرار داده و یک کنترل دکمه فرمان Button را نیز در کنار آن بگذارید .
  4. در نهایت نیز یک کنترل Label را در قسمت پایین صفحه قرار دهید .
  5. اشاره گر موس را بر روی ناحیه بالای کنترل TextBox برده و عبارت " Enter Your Name : " را تایپ نمایید .
    نکته : توجه داشته باشید که شما می توانید المنت های HTML ، متن های ساده و کنترل های ASP.Net را ، همگی و بدون هیچ محدودیتی در کنار هم قرار دهید .
    در نهایت صفحه طراحی شده باید شبیه عکس زیر باشد :

تنظیم خواص کنترل ها :

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

  1. کنترل Button را انتخاب کرده و از منوی Properties مقدار خاصیت Text کنترل را به مقدار Dispaly Name تغییر دهید . در این حالت عبارت روی کنترل ، به مقدار تعیین شده تغییر خواهد کرد .
  2. با زدن دکمه Source در صفحه ، به نمای کد بروید .
    شما می توانید خواص کنترل ها را در حالت Source نیز تعیین نمایید . خاصیت کنترل Label را در حالت Source تعیین می کنیم ، برای این منظور اشاره گر موس را بعد از عبارت asp:Label> ،  در تگ کنترل قرار دهید . دکمه Space را بزنید . یک منوی کرکره ای باز می شود ، که تمامی خواص و رویدادهای مرتبط با کنترل Label را به شما نمایش می دهد . به وسیله این خاصیت که در ویژوال استودیو IntellSense نام دارد ، شما می توانید در حالت Source ، تمامی خواص و رویدادهای مرتبط با آن کنترل ASP.Net و یا ویژگی های HTML را مشاهده کرده و با Syntax دستوری آنها و انواع مقادیر ممکن برایشان آشنا شوید . این قابلیت در ویژوال استودیو کدنویسی را بسیار ساده کرده و از خطاهای احتمالی نیز جلوگیری می کند . این امکان را در تصویر زیر نمایش داده ایم :
  3. از منوی خواص باز شده ، گزینه ForeColor را برای تعیین رنگ نوشته های کنترل انتخاب نمایید . سپس یک علامت ( = ) در مقابل آن قرار داده و کلید Space را بزنید . لیستی از رنگ ها را به شما نمایش می دهد . رنگ مورد نظرتان را انتخاب نمایید .
    دقت نمایید که علامت " " را در خاصیت ببندید .

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

در این بخش از راهکار ، کدی برای کنترل Button خواهیم نوشت که نام وارد شده در کنترل کادر متن را خوانده و آن را در کنترل Label نمایش می دهد . برای این منظور ، مراحل زیر را انجام دهید :

  1. صفحه را باز کرده و به نمای Design رفته و بر روی کنترل Button دابل کلیک نمایید .
    ویژوال استودیو به حالت Source رفته و بر یک تابع ( event handler ) را برای رویداد پیش فرض کنترل Button ، یعنی Click به صورت زیر باز می کند :
    VB کد Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

    End Sub
    C# کد protected void Button1_Click(object sender, System.EventArgs e)
      {
       }
  2. در درون تابع Click کنترل دکمه فرمان کد زیر را بنویسید . این کد باعث می شود تا متن کنترل TextBox به همراه متن تعیین شده در کنترل Label نمایش داده شود .
    VB کد Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
             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!";
       }

اجرای نهایی صفحه :

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

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

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

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

نام :               
آدرس Email :  

نظر شما :  

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