آموزش ASP.Net به زبان ساده     >     آموزش مدل صفحات وب WP  
درس هشتم : مثال هایی از کار با فرم های ساده در ASP.Net Web Pages

مقدمه :

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

طراحی یک فرم ورود اطلاعات از کاربر :

مثال 1 : فرم زیر یک فرم ساده HTML را نشان می دهد که دو مقدار نام شرکت و نام مشتری را از طریق دو کادر متن دریافت نموده و پس از کلید کاربر بر روی دکمه Submit ، اطلاعات وارد شده را به وی نشان می دهد . به کد مثال دقت نمایید ، سپس توضیحات هر بخش ارائه شده است :

کد <html>
<body>
   @{
         if (IsPost) {
          
  string companyname = Request["companyname"];
             string contactname = Request["contactname"];
            <p>شما وارد کرده اید  : <br />
                  Company Name: @companyname <br />
                  Contact Name: @contactname
             </p>

            }
         else
           {
          
    <form method="post" action="">
                    Company Name:<br />
                    <input type="text" name="CompanyName" value="" /><br />
                    Contact Name:<br />
                    <input type="text" name="ContactName" value="" /><br /><br />
                    <input type="submit" value="Submit" class="submit" />
                </form>

             }
       }

</body>
</html>

توضیح کد مثال :

  1. صفحه شامل  دو بخش اصلی است ، که بخش اول ( بخش آبی رنگ ) ، قسمت if دستوری شرطی و بخش دوم ( قسمت قزمز رنگ ) آن قسمت else دستور شرطی است . شرط دستور if این است که آیا صفحه post شده . یعنی ابتدا یکبار به سرور ارسال شده و بازگشته و یا اینکه برای اولین بار است که اجرا می شود . اگر post شده باشد ، قسمت if و اگر برای اولین بار باشد که اجرا می شود ، قسمت else اجرا می شود  .
  2. در بخش if کد که در صورت post شدن و بازگشت صفحه از سرور اجرا می شود ، برنامه دو مقدار ارسالی در فرم صفحه یعنی نام شرکت companyname و نام مشتری contactname را توسط دستور [ ]Request خوانده و در دو متغیر مخصوص ذخیره می کند . سپس مقدار همین دو متغیر را در پاراگراف بعد آن نمایش می دهد .
  3. اما اگر صفحه post نشده باشد و برای اولین بار است که اجرا می شود ، کد بخش else اجرا شده و توسط آن یک فرم با دو کادر متن را برای دریافت مقادیر مورد نظر از کاربر ، نمایش می دهد .

طراحی یک فرم برای نمایش عکس ها - توسط کدهای Razor :

فرم بعدی که مثال زده ایم ، نمایش یکعدد از چندین عکس موجود در پوشه Images توسط یک کنترل کشویی است .
فرض کنید که شما 3 عکس در پوشه Images سایت خود دارید ، می خواهید فرمی طراحی کنید تا کاربر بتواند از طریق یک کادر کشویی ، عکس مورد نظر خود را انتخاب کرده و نمایش دهد . این کار به راحتی توسط کد Razor زیر قابل انجام است . به مثال زیر دقت نمایید . در ادامه توضیحات مربوطه داده شده است .

کد @{
       var imagePath="";
       if( Request["Choice"] != null)
          {
              imagePath="images/" + Request["Choice"];
           }
     }

<!DOCTYPE html>
<html>
  <body>
      <h1>Display Images</h1>
      <form method="post" action="">
            I want to see:
           <select name="Choice">
                <option value="Pic1.jpg">Photo 1</option>
                <option value="Pic2.jpg">Photo 2</option>
                <option value="Pic3.jpg">Photo 3</option>
         </select>

         <input type="submit" value="Submit">
         @if(imagePath != "")
             {
                <p>
                   <img   src="@imagePath"   alt="Sample">
               </p>
              }

      </form> 
</body>
</html>

توضیح کد مثال :

  1. کد شامل یک فرم اصلی است که توسط یک کنترل ذاتی HTML یعنی تگ <select> ، سه عکس را به صورت یک کادر کشویی به کاربر نمایش می دهد . همچنین یک تگ <img> داریم که وظیفه نمایش عکس انتخاب شده را داراست و آدرس عکس توسط کد Razor در خاصیت src آن تعیین می شود .
  2. در بخش کد اول مثال که به رنگ صورتی است ، برنامه ابتدا یک متغیر برای ذخیره آدرس عکس مورد نظر جهت نمایش به نام imagePath تعریف کرده و مقدار اولیه خالی را به آن داده است . سپس توسط یک دستور شرطی چک شده آیا کاربر عکسی را انتخاب کرده ( مقدار پارامتر اراسالی Choice از سوی فرم خالی نباشد ) . اگر اینگونه بود ، آدرس عکس به همراه شماره آن در متغیر imagePath  برای نمایش ذخیره می شود .
  3. سپس در قسمت کد آبی رنگ ، چنانچه مقدار متغیر imagePath  خالی نبود ، مقدار آن در خاصیت src تگ <img> قرار گرفته و عکس مورد نظر نمایش داده می شود .


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


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

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

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