مثال هایی از کار با فرم های ساده در 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>

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

صفحه شامل دو بخش اصلی است ، که بخش اول ( بخش آبی رنگ ) ، قسمت if دستوری شرطی و بخش دوم ( قسمت قزمز رنگ ) آن قسمت else دستور شرطی است . شرط دستور if این است که آیا صفحه post شده . یعنی ابتدا یکبار به سرور ارسال شده و بازگشته و یا اینکه برای اولین بار است که اجرا می شود . اگر post شده باشد ، قسمت if و اگر برای اولین بار باشد که اجرا می شود ، قسمت else اجرا می شود .
در بخش if کد که در صورت post شدن و بازگشت صفحه از سرور اجرا می شود ، برنامه دو مقدار ارسالی در فرم صفحه یعنی نام شرکت companyname و نام مشتری contactname را توسط دستور [ ]Request خوانده و در دو متغیر مخصوص ذخیره می کند . سپس مقدار همین دو متغیر را در پاراگراف بعد آن نمایش می دهد .
اما اگر صفحه 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>

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

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

نرم افزار من