آموزش 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>
|
توضیح کد مثال :
- صفحه شامل دو بخش اصلی است ، که بخش اول ( بخش آبی رنگ ) ، قسمت 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> قرار گرفته و عکس مورد نظر نمایش
داده می شود .
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :