آموزش ASP.Net > راهکارهای موثر در ASP.Net
  راهکار 1 - 10 : آموزش طراحی یک کنترل ساده ویزارد Wizard در ASP.Net

مقدمه :

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

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

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

پیش نیازها :

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

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

مرحله اول - طراحی یک سایت ASP.Net :

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

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

  1. در صفحه Default.aspx سایت ( که به صورت پیش فرض در آن قرار دارد ) به نمای Design بروید .
  2. از بخش کنترل های Standard منوی Toolbox برنامه ، یک کنترل Wizard را درگ کرده و بر روی صفحه قرار دهید . کنترل به صورت پیش فرض به صورت زیر است :
    قرار دادن یک کنترل ساده ویزارد بر روی صفحه ASP.Net
  3. کنترل ویزارد ، به صورت پیش فرض با دو مرحله آماده نمایش داده می شود . اگر بر روی محیط مراحل کلیک نمایید ، می توانید کنترل ها و متن موجود در آنها را ویرایش نمایید .

مرحله سوم - ویرایش مراحل ویزارد :

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

نحوه ویرایش مرحله اول ویزارد :

  1. یکی از گوشه های کنترل را کمی بکشید تا اندازه آن به 2 برابر اندازه اولیه ، تغییر نماید .
  2. بر روی عبارت خط زیر دار Step 1 را در کنترل ویزارد کلیک نمایید .
  3. منطقه قابل ویرایش کنترل ویزارد Wizard را کلیک نمایید . اکنون شما می توانید این مرحله از کنترل را ویرایش کنید .
  4. عبارت : Name را تایپ نموده و یک کنترل TextBox را از جعبه ابزار Toolbox درگ نموده و در مقابل آن قرار دهید .
    شما اکنون می توانید مرحله دوم را برای دریافت آدرس ایمیل از کاربر طراحی نمایید ، به صورت زیر :
  5. بر روی منطقه قابل ویرایش کنترل کلیک نمایید .
  6. عبارت : Email را تایپ کرده و یک کنترل TextBox را مجددا درگ نموده و در مقابل آن قرار دهید .
  7. پروژه و فایل خود را ذخیره نمایید .

اضافه کردن مرحله نهایی به کنترل ویزارد Wizard :

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

  1. بر روی کنترل Wizard کلیک راست نموده و گزینه Show samrt tag را کلیک نمایید .
  2. در کادر محاوره ای Wizard Tasks ، گزینه Add / Remove Wizard Steps را انتخاب نمایید .
    کادر Wizard Step Collection Editor باز می شود . همانند تصویر زیر :
    باز شدن کادر Wizard Step Collection Editor برای ویرایش مراحل Wizard Control ASP.Net


    اضافه کردن یک مرحله جدید به کنترل ویزارد Wizard ASP.Net
  3. از کادر انتخابی Add ، گزینه Wizard Step را کلیک نمایید . اکنون منطقه Properties ، مرحله جدید ایجاد شده را نشان می دهد .
  4. مقدار خاصیت Title آن را بر روی مقدار Finished تنظیم نمایید .
  5. سپس مقدار خاصیت StepType آن را بر روی Complete تنظیم نموده و Ok نمایید . مرحله جدید اضافه می شود ، به صورت زیر :
    اضافه کردن یک مرحله جدید به کنترل ویزارد Wizard ASP.Net

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

  1. بر روی کنترل ویزارد کلیک راست نموده و گزینه Show Smart Tag را انتخاب کنید .
  2. در پنجره Wizard Tasks ، لیست کشویی Step را برای انتخاب مرحله Finished کلیک نمایید .
  3. دو کنترل Label را از منوی Toolbox درگ کرده و بر روی کنترل ویزارد قرار دهید . آنها را با نام پیش فرضشان رها نمایید .
  4. فایل را ذخیره کنید . مرحله آخر به صورت زیر در می آید .
    اضافه کردن یک مرحله جدید به کنترل ویزارد Wizard ASP.Net

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

  1. به صفحه Default.aspx برگشته و در نمای Design ، بر روی محیط صفحه دابل کلیک نمایید .
  2. رویداد Page_Load صفحه ، برای نوشتن کدهای لازم در صفحه کد باز می شود . کدهای زیر را به آن اضافه نمایید :
    کد
    VB
    Private Sub Page_Load(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Me.Load
             Label1.Text = TextBox1.Text
             Label2.Text = TextBox2.Text

    End Sub

    کد
    C#
    void Page_Load(Object sender, System.EventArgs e)
       {
           Label1.Text = TextBox1.Text;
           Label2.Text = TextBox2.Text;

       }
  3. فایل را ذخیره نمایید .

مرحله آخر - تست کردن عملیات کنترل ویزارد :

اکنون می توانیم عملکرد کنترل ویزارد را بررسی نماییم ، به صورت زیر :

  1. صفحه Default.aspx را در نمای Design باز نمایید .
  2. از منوی Wizard Tasks کنترل ، گزینه Step 1 را از کنترل کشویی Step انتخاب نمایید .
  3. دکمه های CTRL + F5 را برای اجرای صفحه فشار دهید . صفحه در مرورگر باز می شود .
  4. یک نام را در کادر متن Name ، در مرحله اول وارد نموده و دکمه Next را بزنید .
  5. در مرحله دوم ، یک آدرس ایمیل با فرمت صحیح را در کادر متن Email وارد نموده و دکمه Finish را بزنید .
  6. اطلاعات وارد شده برای نام و ایمیل در مرحله سوم به شما نمایش داده می شود .

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



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


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

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1