ASP.

NET ေလ့လာၾကမယ္

Written By

Htin Linn Aung

B.C.Sc(Hons:)
 မာတိကာ

1.စကားဦး 1

2.ေက်းဇူးတင္စကား 2

3.Intorduction to ASP.NET 3

4.Creating A New Website 4

5.Debugging 11

6.Hello World! 13

7.Button,Label,Textbox 16

8.TextBox 19

9.CheckBox 23

10.ListBox 27

11.Radio Button 31

12.ListBox And TextBox 35

13.CheckboxList And RadiobuttonList 39

14.Dropdownlist 43

15.Hiddenfield 47
 မာတိကာ

16.Calendar Control 50

17.Link Button 55

18.FileUpload 59

19.Validation Controls 62

20.Range Validator 66

21.Compare Validator 70

22.RegularExpression Validator 73

23.Validation Summary 79
 စကားဦး

ကြ်န္ေတာ္္က programming ကို ရူးသြပ္သူပါ။programming ကိုပဲစိတ္၀င္စား

တယ္။ကြန္ပ်ဴတာတကၠသိုလ္မွာတုန္းကေတာ့ C++, OOP, VB တုိ႕ကိုသင္ခဲ့ပါ
တယ္။ေက်ာင္းၿပီးေတာ့ ကြ်န္ေတာ္ C# ,ASP.NET တို႕ကို ေလ့လာခဲ့
ပါတယ္။ေလ့လာေနဆဲလည္းျဖစ္ပါတယ္။ကြ်န္ေတာ္ programmer တစ္ေယာက္အျဖစ္
အလုပ္လုပ္ေနပါတယ္။ကိုယ့္ကိုယ္ကို professional တစ္ေယာက္ အျဖစ္သတ္မွတ္
မထားပါဘူး။professional တစ္ေယာက္ျဖစ္ဖုိ႕ ၾကိဳးစားဖုိ႕လုိေနေသး တယ္လုိ႕
သတ္မွတ္ထားပါတယ္။ဒါေၾကာင့္မုိ႕လုိ႕ ဒီစာအုပ္ထဲမွာ ကြ်န္ေတာ္ ရွင္းျပတဲ့
အေၾကာင္းအရာတစ္ခ်ိဳ႕ဟာ လုိရင္လုိေနပါ လိမ့္မယ္။ဒီစာအုပ္ေလး ေရးျဖစ္တဲ့
ရည္ရြယ္ခ်က္က ASP.NET စတင္ေလ့လာတဲ့ သူေတြအတြက္လြယ္ကူ
ေခ်ာေမြ႕သြားေအာင္ ကြ်န္ေတာ္ ၾကိဳးစားၿပီး ေရးထားတာပါ။ ဒီစာအုပ္ေလးဟာ
ကြ်န္ေတာ့္္အတြက္ ပထမဦးဆံုး ထုတ္ေ၀တဲ့စာအုပ္ လည္းျဖစ္ပါတယ္။
ကြ်န္ေတာ္္ေရးထားတဲ့ post ေတြကို ဖတ္ၿပီးမရွင္းလင္းတာရိွရင္
csharp.crazier@gmail.com သုိ႕ တုိက္ရို္က္ဆက္သြယ္ေမးျမန္းႏုိ္င္ပါတယ္။ASP.NET
ကို ကြ်န္ေတာ္္ေရးရာမွာ ဒီစာအုပ္ေလးက အေျခခံေတြကို အေလးေပးၿပီး
ေရးထားတာပါ။Standard controls and validation controls ေတြအသံုးၿပဳပံု
အေၾကာင္းေရးထားျဖစ္ပါတယ္။ဆက္လက္ ၾကိဳးစားပါအံုးမယ္။

ထင္လင္းေအာင္

July 2nd ,2010

1
 ဘု၇ား,တ၇ား,သံဃာ ရတနာျမတ္သံုးပါးကို ဦးထိပ္ထားလ်က္

ေက်းဇူးအထူးတင္ရိွျခင္း

ကြ်န္ေတာ့္္ကို ေမြးဖြားေပးခဲ့တဲ့ မိဘႏွစ္ပါး, ဒီစာအုပ္ေလး ေရးျဖစ္ေအာင္

အထူးတလည္ အကူအညီေပး တုိ္က္တြန္း အားေပးခဲ့တဲ့ www.mmso.org မွ ko
mikozan, ကြ်န္ေတာ္က
့္ ို ဘ၀ေအာင္ျမင္ခ်င္စိတ္ေတြ ျဖစ္ေအာင္လွံဳ႕ေဆာ္ေပးေနတဲ့
ကြ်န္ေတာ့္္ရဲ႕အရင္းႏွီးဆံုးသူ…,ကြ်န္ေတာ့္္ရဲ႕ သင္ဆရာ,ျမင္ဆရာ, ၾကားဆရာမ်ား
အားလံုး ကို အထူးတလည္ ေက်းဇူး တင္ရိွပါတယ္။

ထင္လင္းေအာင္

2
Introduction to ASP.NET
ASP.NET(Active Server Pages) ဆိုတာ Microsoft ကေန develope လုပ္လုိက္တ ဲ့
web application language တစ္ခုပါ ။ dynamic web sites ေတြ ၾကီးမားတဲ့ web
site portalေတြ social network sites ေတြ ဖန္တီးရမွာ ေကာင္းမြန္တဲ့ language
တစ္ခုပါ။

Asp.net ကို ေရးေတာ့မယ္ဆိုရင္ .net framework language ေတြျဖစ္တဲ့

programming languages ေတြနဲ႕ ေရးရမွာျဖစ္တဲ့အတြက္ ဒီ languages ေတြထဲက
တစ္ခုခုကိုေလ့လာသင္ယူထားဖုိ႕လုိပါတယ္။

• C# (Pronounced C sharp)
• Visual Basic (VB .NET)
• J# (Pronounced J sharp)

ကြ်န္ေတာ္္ကေတာ့ c# ကိုပိုၿပီး ေလ့လာထားတဲ့အတြက္ c# နဲ႕ ေရးတာကုိပဲ

တင္ျပသြား မွာ ျဖစ္ပါတယ္။

ASP.NET ကို ေလ့လာေတာ့မယ္ဆုိရင္ ထပ္ၿပီး အေျခခံသိထားရမွာေလးေတြက

HTML, CSS ေတြေပ့ါ။JAVASCRIPT ပါေလ့လာထားမယ္ဆုိရင္ ပိုၿပီးေတာ့
ေကာင္းသြားတာေပ့ါ ဗ်ာ။ကိုယ္က Web application ေရးမွာျဖစ္တဲ့အတြက္…web
languages ေတြျဖစ္တဲ HTML, CSS ,Javascript တုိ႕ကိုေလ့လာထားရမွာ
ပဲေလ။Asp.net programs ေတြကို ေရးဖုိ႕ သံုးမယ့္ CLR(common language
runtime)က Visual studio .NET 2005 or 2008 Install လုပ္ရပါမယ္…။
ကြ်န္ေတာ္္အခု သံုးေန တာ က Visual Studio .Net 2008 ပါ။

3
Creating A New Website

ကြ်န္ေတာ္္တုိ႕ visual studio .NET 2008 နဲ႕new website create လုပ္ပံုေလးပါ။

ပံုမွာျပထားတဲ့အတုိင္း Click->File->New->WebSiteကို clickလုပ္ပါ။

1.

4
2.

ဒါကေတာ့ Picture 1 အတုိင္းအဆင့္ဆင့္လုပ္ၿပီးသြားရင္ ဒီအတုိင္းေလးေပၚလာပါ

လိမ့္မယ္။ကိုယ္create လုပ္တဲ့new website ကုိသိမ္းမယ့္ folder nameပါ။ၾကိဳက္တာ
ေပးလုိ႕ရပါတယ္။ၿပီးရင္ OKေပါ့။

5
4.ဒီပံုကေတာ့ source pageပါ။html code ေတြ ,css code ေတြနဲ႕ web page ကို

စိတ္ၾကိဳက္ေရးလုိ႕ရပါတယ္။

6
5.ဒီပံုကေတာ့ code behind page ပါ။aspx.cs file typeပါ။ကြ်န္ေတာ္တ
္ ုိ႕ ေရးခ်င္တဲ့
code ေတြကို ဒီအထဲမွာ ၀င္ေရးပါတယ္။

7
6.ဒီပံုထဲမွာ toolboxဆုိတဲ့အရာေလးကိုေတြ႕ပါလိမ့္မယ္။။toolbox ထဲမွာ ကြ်န္ေတာ္တ
္ ုိ႕
သံုးဖုိ႕ controls ေတြပါ။Standard control,data control,validation control
စတဲc့ ontrols ေတြရိွပါတယ္။

8
7.ဒီပံုေလးရဲ႕ ညာဘက္ေထာင့္မွာ properties windows ဆုိတာေလး
ကိုေတြ႕ပါလိမ့္မယ္။ကြ်န္ေတာ္တ
္ ုိ႕ သံုးမယ့္ controls ေတြရဲ႕ properties ေတြကို
ေရးရတဲ့အပိုင္းပါ။

9
8.ဒီပံု ရဲ႕ ညာဘက္မွာ ကေတာ့ Solution explorer ပါ။ဒီအထဲမွာ ကြ်န္ေတာ္တ
္ ုိ႕
webpage ေတြ ထပ္ထည့္ခ်င္ရင္…Class ေတြ အစရိွတဲ့ file ေတြကိုထပ္ထည့္ခ်င္ရင္
right click ->folder name->Add new itemဆုိၿပီးကိုၾကိဳက္တာကို Add
လုပ္လုိ႕ရပါတယ္။

10
Debugging

ဒီပံုကေတာ့ ကြ်န္ေတာ္တ
္ ုိ႕ code ေတြေရးၿပီးၿပီဆုိရင္ errors ရိွမရိွ စစ္တာပါ။Build or
ctrl+shift+B.

11
ဒီပံုကေတာ့ ကြ်န္ေတာ္္တုိ႕ website ကုိ create လုပ္ၿပီးၿပီဆုိရင္ run
ရမယ့္အပိုင္းပါ။ပံုမွာျပထားတဲ့အတုိင္း….Click->Debug->Start without debugging

Or ctrl+F5 ကုိ Choose လုပ္ၿပီး runပါ။

Click->Debug->Debugging ကေတာ့ Trace လုိက္ခ်င္ရင္ သံုးပါတယ္။

12
Hello World!

ကြ်န္ေတာ္္တုိ႕ေတြ ေလာကၾကီးကို စၿပီး Hello world! လုိ႕ ႏွဳတ္ဆက္ဖုိ႕ simple

program ေလးေရးရေအာင္။လိုအပ္တဲ့ controls ေတြျဖစ္တဲ့ button , label တစ္ခု
ဆီကို ပံုမွာျပထားတဲ့အတုိင္း design page ေပၚမွာဆြဲေခၚထားလုိက္ပါ။

1.

13
ကြ်န္ေတာ္္တုိ႕က button ကို click လုိက္ရင္ Label မွာ Hello world
လုိ႕ျပခ်င္တဲ့အတြက္ button ရဲ႕ click event ထဲမွာ code ၀င္ေရးရမယ္။ဆုိေတာ့
button ကို double click လုိက္ပါ။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class hello : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

14
 protected void Button1_Click(object sender, EventArgs e)
{
//button ကို click လုိက္ရင္ label ထဲကို ကုိယ္ျပခ်င္တဲ့ စကားလံုးေတြထည့္တာပါ။
Label1.Text = "Hello Wrold!";
}
}

ကြ်န္ေတာ္္ code behind ထဲမွာ ‘//’ ေလးေတြလုပ္ၿပီး ျမန္မာ လုိရွင္းျပ

ေပးတာပါ။comment သေဘာပါ။copy and paste မလုပ္ပါနဲ႕။ကိုယ့္ဘာသာပဲ
ၾကည့္ေရးပါလုိ႕ေျပာခ်င္ပါတယ္။OK!ဒါဆုိရင္ ctrl+f or start without debugging
လုပ္ၿပီး run လုိ႕ရပါၿပီ။အရမ္းလြယ္ပါတယ္။နားလည္မယ္ထင္ပါတယ္။

OK! Test it yourself! Good Luck!

15
Button,Label,Textbox control

ကြ်န္ေတာ္္ standard controls ေတြရဲ႕ အေျခခံသံုးပံုေလးေတြက

စၿပီးေျပာျပပါမယ္။အခုေျပာခ်င္တာက Button,Label, textbox controls
အေၾကာင္းေတြပါ။အဲဒီcontrols ေတြ တစ္ခုဆီကုိပံုမွာျပထားတဲ့အတုိင္း design page
ေပၚမွာ ေခၚထား လုိ္က္ပါ။

1.

16
ကြ်န္ေတာ္္တုိ႕ လုပ္ခ်င္တာက Button ကို click လုိက္ရင္ textbox ထဲမွာ
ရိုက္ထည့္ထားတဲ့…text ကို Label မွာ ျပခ်င္တာပါ။အဲဒါေၾကာင့္မုိ႕ Button ရဲ႕ click
event ထဲမွာ ကြ်န္ေတာ္တ
္ ုိ႕ code ေရးမယ္။ဆုိေတာ့…Button control ကို double
cllick လုပ္လုိက္ပါ။

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

17
 protected void Button1_Click(object sender, EventArgs e)
{
//textbox ထဲမွာ ရိုက္ထည့္ထားတဲ့ text နဲ႕ အတူ hello,! တုိ႕ကို label
//မွာေပၚေအာင္ေရးတာပါ။
Label1.Text = "Hello" + " "+TextBox1.Text + "!";
}
}

Easy and simple ေလးပါ။နားလည္မယ္ထင္ပါတယ္။

OK! Test it yourself! Good Luck!

18
Textbox

Textbox controls 2ခု ကိုတစ္ခုနဲ႕တစ္ခု text exchange လုပ္ပံုေလးကို ေျပာျပပါ

မယ္။လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ textbox 2ခု,button 1ခု တုိ႕ကို design page
မွာ ေခၚထားပါ။

1.

ပံုမွန္အတုိင္းဆုိရင္ textbox ရဲ႕ TextMode က single line ပါ။ကြ်န္ေတာ္္က text ေတြ

အမ်ားၾကီးရိုက္ထည့္ခ်င္လုိ႕ textbox ရဲ႕ TextMode ကို Multiline အျဖစ္ေျပာင္းပါ
မယ္။

19
ဆုိေတာ့ကား…textbox 2ခုကို design page ေပၚေခၚၿပီးၿပီဆုိရင္….

Right click->textbox1->properties

TextMode ထဲမွာ picture 1 မွာျပထားတဲ့အတုိင္း MultiLine ကို ေရြးလုိ္က္ပါ။

Textbox2 ကိုလည္း အဲဒီအတုိင္းလုပ္ပါ။

Button ရဲ႕ text ကို Exchange text လုိ႕ ေပၚခ်င္တယ္ဆုိေတာ့…။

Rithg click ->Button control->properties

Text ထဲမွာ Exchange text ဆုိၿပီးထည့္ပါ။

2.

20
Picture 2 အတုိင္း ဒီဇုိင္းလုပ္ၿပီးၿပီဆ၇
ုိ င္ကြ်န္ေတာ္္တုိ႕ code ေရးၾကရေအာင္။Button
ကို click လုိက္ရင္ Textbox1 ထဲက text ေတြက textbox2
ထဲေရာက္မယ္။textbox2ထဲက text ေတြက textbox1ထဲေရာက္သြားေအာင္လုပ္ခ်င္
တာဆုိေတာ့…Button ရဲ႕ click Event ထဲမွာ၀င္ေရးရမယ္။ဒါေၾကာင့္ Button ကို
double click လုပ္လုိက္ပါ။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class textchange : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

21
 protected void Button1_Click(object sender, EventArgs e)
{
string s;
//s ထဲကို textbox1 ထဲမွာထည့္ထားတဲ့ text ေတြကို ထည့္တာပါ။
s = TextBox1.Text;
//textbox1 ထဲကုိေတာ့ textbox2 ထဲက text ေတြကိုထည့္တာပါ။
TextBox1.Text = TextBox2.Text;
//textbox 2 ထဲကို အေစာပိုင္းတုန္းကကြ်န္ေတာ္္တုိ႕ထည့္ထားတဲ့ s ထဲက text
//ထည့္တာပါ။
TextBox2.Text = s;
}
}

နားလည္မယ္လုိ႕ထင္ပါတယ္။ very simple!OK! Test it yourself! Good Luck!

22
Checkbox

ကြ်န္ေတာ္္ အခုေျပာခ်င္တာက checkbox အေၾကာင္းပါ။ ဘယ္လုိေနရာေတြမွာ

သံုးလဲဆုိတာ sample ေလးနဲ႕ ျပပါမယ္။လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ chekcbox
controls က 2 ခု, Button က တစ္ခု, Label တစ္ခုဆီကို ပံုမွာျပထားတဲ့အတုိင္း
design page ေပၚမွာ ေခၚထားလုိက္ပါ။

1.

23
2.
Picture 1 အတုိ္င္း design လုပ္ၿပီးၿပီဆုိရင္ controls ေတြရဲ႕ properties ေတြကို
picture 2 အတုိင္းျပင္ပါ။right click->checkbox1->properties ,Text ကို
c#လုိ႕ေရးပါ… right click->checkbox2->properties,Text ကို vbလုိ႕ေရးပါ။

24
ကြ်န္ေတာ္္တုိ႕လုပ္ခ်င္တဲ့ပံုစံက vb or c# ဒါမွမဟုတ္ vb and c# နွစ္ခုလံုးကို choose
လုပ္လုိက္ၿပီး button ကို click လုိက္ရင္ ကုိယ္ choose လုပ္လိုက္တဲ့ ဟာကို Label
မွာျပခ်င္တာပါ။အဲဒီေတာ့ button ရဲ႕ click event ထဲမွာ ၀င္ေရးၾကမယ္။button ကို
double click လုပ္လုိက္ပါ။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class chekcbox : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

25
 protected void Button1_Click(object sender, EventArgs e)
{
string s = "Your chosen are" + " ";
//checkboxတစ္ခုခု ကို check လုပ္မယ္ဆုိရင္ checkbox ရဲ႕ text ကို s variable
// ထဲမွာ assign လုပ္တာပါ။2 ခုလံုးလည္း check လုိ႕ရတယ္။
if (CheckBox1.Checked)
s += CheckBox1.Text+"<br>";
if (CheckBox2.Checked)
s += CheckBox2.Text;
Label1.Text = s;
}
}
OK! Test it yourself ! Good Luck!

26
Listbox

လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ Listbox ,Button,Label control တစ္ခုဆီကုိ

ပံုမွာျပထားတဲ့အတုိင္း Design page မွာ ဆြဲတင္ထားပါ…။

listbox ကို webpage ေပၚမွာေခၚတင္ၿပီးရင္…listbox ရဲ႕ ညာဘက္အေပၚေထာင့္မွာ

arrowေလးကုိေတြ႕ပါလိမ့္မယ္..။အဲဒါေလးကိုေထာက္လုိက္၇င္ပံုမွာျပထားတဲ့အတုိင္း
Edit itmes ကို click လုိက္ပါ.။ၿပီးရင္ listbox ထဲမွာထဲ့ခ်င္တဲ့ items ေတြကို
ပံုမွာျပထားတဲ့အတုိင္း Textထဲမွာထဲ့ပါ။ၿပီးရင္ OK ေပ့ါ။

1.

27
2.

OK!picture 2 အတုိင္း design လုပ္ၿပီးၿပီဆုိရင္… ကြ်န္ေတာ္တ

္ ုိ႕ code
ေရးၾကရေအာင္..။Button click event ထဲမွာ ေရးမယ္။ဘာလုိ႕လဲဆုိေတာ့ listbox
ထဲက item တစ္ခု ကို ေရြးၿပီး….Button ကို click လုိက္ရင္ ကြ်န္ေတာ္္က Label မွာ
ကိုယ္ေ၇ြးလုိက္တဲ့ item ကုိျပခ်င္တာကိုး။

OK!Let’s Start!Button ကို double click လုိက္ပါ။

28
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ex8 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
string choice = "ur chosen control are";
//listbox က array list ပံုစံျဖစ္တဲ့အတြက္ foreach နဲ႕ Loop ပတ္ၿပီးစစ္တာ
foreach (ListItem li in ListBox1.Items)
{

29
 if (li.Selected)
choice += "<br/>" + li.Text + "Controls";
}
Label1.Text = choice;
}

Ok! Very simple ပါ။နားလည္မယ္ထင္ပါတယ္…။ဒီ webpage ကို run

ၾကည့္လိုက္ပါ။ၿပီးရင္ listbox ထဲမွာရိွတဲ့ item တစ္ခုကို ေရြးၿပီး button ကို click
လုိက္ပါ…။ဒီလုိဆုိရင္…ကိုယ္ေရြးခ်ယ္လုိက္တဲ့ item ဟာ label မွာျပေနပါလိမ့္မယ္…။

OK! Test it yourself! Good Luck!

30
Radiobutton

အခုေျပာမယ့္အေၾကာင္းက Radiobutton အေၾကာင္းပဲျဖစ္ပါတယ္။ radiobutton

controls ေတြကိုေတာ့ form ျဖည့္တဲ့အခါမွာ male or female
တို႕ေရြးတဲ့ပံုစံမ်ိဳးေတြမွာသံုးပါတယ္။အဲလုိပံုစံမ်ိဳးေလးလုပ္ျပပါမယ္။

လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ radiobutton controls 2 ခု,Button control 1

ခု,Label control တစ္ခုဆီကို webpage design ေပၚမွာ ေခၚထားပါ။

ေခၚၿပီးရင္ radiobutton controls ေတြရဲ႕ text name ေတြကို ျပင္ေရးရပါမယ္။

1.

31
Picture 1 မွာျပထားတဲ့အတုိင္း radiobutton controls ေတြကုိေခၚၿပီးရင္
radiobutton1 ကို right click->properties

Text ကို Male လုိ႕ရိုက္ထည့္ပါ။

Group Name ကို rdo လုိ႕ထည့္ပါ။ဘာလုိ႕ Group name ေပးလဲဆုိ၇င္ radiobuttons
ေတြဟာ တစ္ခုကိုပဲေရြးခြင့္ရိွလုိ႕ပါ။

ၿပီးရင္ right click->Radiobutton2 ->properties

Text ကို Female
Group Name ကို rdo လုိ႕ေပးပါ။
2.

32
Picture2 အတုိင္း ဒီဇုိင္းလုပ္ၿပီးၿပီဆုိရင္code ေတြ၀င္ေရးၾကမယ္။
ကြ်န္ေတာ္္လုပ္ခ်င္တာက user ကေန Male radiobutton or Female radiobutton
တစ္ခုခုကိုေရြးၿပီး button ကို click လုိက္ရင္ label မွာ ကိုယ္ေရြးခ်ယ္လုိ္က္တဲ့
radiobutton ရဲ႕ text name ကိုျပေစခ်င္တာပါ။OK! button ကို double click လုပ္ပါ။
Button ရဲ႕ click event ထဲမွာ ေရးၾကမယ္။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class radio : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
33
 protected void Button1_Click(object sender, EventArgs e)
{
//user ကေန radiobutton1 or radiobutton2 ကို check လုပ္လုိက္မယ္ဆုိရင္ label
// ထဲကို ကုိယ္ check လုပ္လုိက္တဲ့ radiobuttonရဲ႕ text ကို ထည့္တာပါ။
if(RadioButton1 .Checked )
{
Label1.Text = RadioButton1.Text;
}
if (RadioButton2.Checked )
{
Label1.Text = RadioButton2.Text;
}
}
}
OK! ဒါဆုိရင္နားလည္မယ္ထင္ပါတယ္။Test it yourself! Good Luck!

34
ListBox and Textbox

ဒီတစ္ခါ ကြ်န္ေတာ္တ
္ ုိ႕ users ေတြကေန ကုိယ္ထည့္ခ်င္တဲ့အရာေတြကို Textbox
ထဲထည့္ၿပီး Add to List button ကို click လုိက္မယ္ဆုိရင္… Listbox
ထဲကိုေရာက္သြားေအာင္လုပ္မယ္…။

Shopping cart အေသးစားေလးလုိ႕သတ္မွတ္လုိက္ေပ့ါဗ်ာ…။ကုိယ၀

္ ယ္ခ်င္တာေတြကို
Textbox ထဲထည့္မယ္။

လုိအပ္တဲ့ controls ေတြက Listbox,textbox,button,label ေတြပါ။ပံုမွာျပထား

တဲ့အတုိင္း design လုပ္ပါ…။
1.

35
2.

Picture 2. အတုိင္း ဒီဇုိင္းဆြဲၿပီးၿပီဆုိ ရင္ ကြ်န္ေတာ္တ

္ ုိ႕ code ေရးၾကမယ္…။Add to
list button ကို double cllick လုိက္ပါ။

36
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ex9 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
//textbox ထဲကို user က text တစ္ခုကို ထည့္လုိက္တယ္ဆုိရင္
//Listbox items ထဲကို textbox ထဲကထည့္လုိက္တဲ့ text ေရာက္သြားမယ္…။
if (TextBox1.Text != "")
{
ListBox1.Items.Add(TextBox1.Text);
}

37
else
{
//textbox ထဲကုိ user က ဘာမွမထည့္ဘူးဆုိရင္
//page ေပၚမွာ enter text ဆုိၿပီး message ျပမယ္။
Response.Write("please enter text");

}
}
}

OK! Test it for yourself! Good Luck!

38
CheckboxList and Radiobuttonlist

ကြ်န္ေတာ္္အခုေျပာမယ့္ အေၾကာင္းကေတာ့ checkboxlsit and radiobuttonlistပါ။

လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ checkboxlsit ,radiobuttonlist,label,button
controls မ်ားကို webiste design page မွာ ပံုမွာျပထားတဲ့အတုိင္း လုပ္ပါ။

1.

39
2.

Picture 2အတုိင္း design ဆြဲၿပီးရင္…button ကို double click လုိက္ပါ။button ရဲ႕

click event ထဲမွာ coding ၀င္ေရးမယ္…။

40
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ex10 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
string info = "interested in <br/>";
//checkbox lsit က arraylist ပံုစံမ်ိဳးျဖစ္တဲ့အတြက္ foreach နဲ႕ loop ပတ္ၿပီး..info
//ထဲမွာသိမ္းပါတယ္…။
foreach (ListItem li in CheckBoxList1.Items)
{

41
 if (li.Selected)
info += li.Text + "<br/>";

}
//radionbutton listရဲ႕ item member က 0 ကစတဲ့အတြက္ေၾကာင့္ radio
//buttonlist ရဲ႕ selected index က -1ထက္ၾကီးရင္လုိ႕စစ္ေပးတာ…
if (RadioButtonList1.SelectedIndex > -1)
info += "with" + RadioButtonList1.SelectedValue;
Label1.Text = info;

}
OK!ဒီလုိေရးၿပီးၿပီဆုိရင္ ကြ်န္ေတာ္တ
္ ုိ႕ေရြးခ်ယ္လုိက္တဲ့ checboxlist နဲ႕ radio
buttonlist တုိ႕က items ေတြကို Label control မွာ ေဖာ္ျပေနပါလိမ့္မယ္….။

OK! Test it yourself. Good Luck!

42
Dropdownlist

OK!အခု….ကြ်န္ေတာ္္..dropdownlist သံုးပံုေလး အေၾကာင္းေျပာျပပါမယ္..

အေျခခံေလး ေတြေပ့ါ..။ အေျခခံေလးေတြနားလည္ မွ ဒီ့ထက္ပုိၿပီးျမင့္တဲ့ Advanced
ပိုင္းကို Self- study လုပ္ႏုိင္မွာေလ။

OK!Let’s start now!

Webpage ေပၚကို လုိအပ္တဲ့controls ေတြျဖစ္တဲ့ dropdownlist ,Button,Label

တစ္ခုဆီကို ေခၚလိုက္ပါ…။
1.

43
Picture1 မွာ dropdownlist ကိုေခၚၿပီးၿပီဆုိရင္ dropdownlist ထဲကုိ ကြ်န္ေတာ္တ
္ ုိ႕
ထည့္ ခ်င္တဲ့ items ေတြကို ထည့္ရပါမယ္။အဲဒီေတာ့ dropdownlist ကို click
လုိက္ရင္ ပံု မွာျပထားတဲ့အတုိင္း dropdownlist ရဲ႕ ညာဘက္အေပၚမွာ arrow ‘<’
ပံုစံေလးကို ေတြ႕ပါလိမ့္မယ္။ပံုမွာျပထားတဲ့အတုိင္း Edit items ကို click
လုိက္ၿပီးေတာ့ ကုိယ္ ထည့္ခ်င္တဲ့ items ေတြကုိ Text ထဲမွာထည့္ပါ။ၿပီးရင္ Add
button ကို click လုိက္ပါ။ထည့္ခ်င္တဲ့ items ေတြကုိထည့္ပါ။chekbox ေလးနဲ႕
ျပထားတဲ့ Auto post back ဆုိတာေလးကို check လုပ္ေပးပါ။ၿပီးၿပီဆုိရင္ OKေပ့ါ။
2.

OK!picture 2 အတုိင္း design လုပ္ၿပီးပီဆုိရင္ ကြ်န္ေတာ္တ

္ ုိ႕ code ေရးၾကမယ္….။
44
Button ရဲ႕ click envent ထဲမွာ ေရးမွာ ျဖစ္တဲ့အတြက္… button ကို double click
လုိက္ပါ။

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ex7 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
//dropdownlist ထဲက items တစ္ခုခုကို user က ေရြးလားမေရြးလားစစ္တာ…။
if (DropDownList1.SelectedIndex > -1)
{
45
 Label1.Text += "ur color is " + DropDownList1.SelectedItem.Text;
}
}
}

OK! Simple program ေလးပါ…။အရမ္းရွင္းပါတယ္….။ဒီအတိုင္းေရးၿပီးရင္ run

လုိက္ပါ…။dropdowlist ထဲက item တစ္ခုကိုေရြးလုိက္ၿပီဆုိရင္ Label မွာ
ကုိယ္ေရြးလုိုက္တဲ့ item text ျပေနပါလိမ့္မယ္။ အဆင္ ေျပမွာပါ…။

OK! Test it yourself!

46
Hiddenfield

Hiddenfield ဆုိတာ ဘယ္လုိေနရာေတြမွာ သံုးသလဲဆုိရင္ ကြ်န္ေတာ္တ

္ ုိ႕ေတြက
value ေတြကို user ေတြ မျမင္ေအာင္ သိမ္းခ်င္တဲ့အခါမွာလည္းသံုးပါတယ္။ၿပီးေတာ့
database ကေန id number ေတြ auoto increase လုပ္ခ်င္တဲ့အခါမွာ
လည္းသံုးပါတယ္။Simple Example ေလးနဲ႕ လုပ္ျပပါမယ္။လုိအပ္တဲ့ controls
ေတြျဖစ္တဲ့ button,hiddenfield,label တစ္ခုဆီကို ပံုမွာျပထားတဲ့အတုိင္း design
page ေပၚမွာ ေခၚထားပါ။

1.

47
လုပ္ခ်င္တဲ့ပံုစံက button ကို click လုိက္ရင္ auto 1 တုိးသြားတာကို label
မွာျပခ်င္တာပါ။OK! ဒါဆုိရင္ Button ကို double click လုပ္လိုက္ပါ။button click
event ထဲမွာ ၀င္ေရးၾကမယ္။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class hiddenfield : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

48
 protected void Button1_Click(object sender, EventArgs e)
{
//hiddenfield value တန္ဖုိးက ဘာရိွသလဲဆုိတာစစ္တာ…
if (HiddenField1.Value == string.Empty)
//empty ျဖစ္တယ္ဆုိရင္ ့hiddenfield value ထဲကို 0 ထည့္ေပးလိုက္တယ္။
HiddenField1.Value = "0";
//ကုိယ္က button ကို click လုိက္ရင္ 1 ကေနစျပီးတုိးသြားခ်င္တဲ့အတြက္
//အေစာပိုင္းတုန္းက ထည့္ထားတဲ့ 0 ကို 1 ေပါင္းေပးတာပါ။
HiddenField1.Value=Convert.ToString(Convert.ToInt32(HiddenField1.Value)
+ 1);
//1 တုိးတုိးသြားတာကို label မွာ ျပခ်င္လုိ႕ hiddenfield value ကို label မွာ
//ထည့္တာပါ။
Label1 .Text =Convert .ToString (HiddenField1 .Value );
}
}
OK! Test it yourself! Good Luck!

49
Calendar control

Calendar control သံုးပံုေလးကို ေျပာျပခ်င္ပါတယ္။calendar control သံုးရင္ panel

control ကိုပါ သံုးမွ အဆင္ေျပပါတယ္။ကြ်န္ေတာ္္လုပ္ခ်င္တဲ့ပံုစံက arrival date
calendar1 ထဲက day တစ္ခုကိုေရြးမယ္။ၿပီးရင္ departure date caledar2 ထဲက day
တစ္ခုကိုေရြးလိုက္မယ္ဆုိရင္..ရက္ေပါင္းဘယ္ေလာက္ရိွလဲဆုိတာ တြက္ျပေပးတာကို
ျမင္ခ်င္တာပါ။OK!Example ေလးနဲ႕ လုပ္ျပမယ္။လုိအပ္တဲ့ controls ေတြကေတာ့
panel,calendar ,textbox,button,label controls ေတြပါ။ပံုေလးနဲ႕ျပပါမယ္။

1.

50
Webpage design ေပၚရိွ Arrival Date အတြက္ textbox ,button controls
ေတြေနရာ ခ်ထားပါ။ၿပီးရင္…Panel ကိုေခၚလုိက္ပါ။ၿပီးရင္ panel ထဲမွာ calendar ကုိ
ဆြဲထည့္လုိက္ပါ။လုပ္ခ်င္တဲ့ပံုစံက calendar ထဲက day တစ္ခုကို ေရြးလုိ္က္ရင္ date
က textbox ထဲကိုေရာက္သြားေအာင္လုပ္ခ်င္တာပါ။

Button controls ေတြရဲ႕ text ကို ပံုမွာျပထားတဲ့အတုိင္း ‘…..’ျဖစ္ေအာင္ properties

ထဲမွာ ၀င္ၿပီးေရးပါ။

Right click->Button->properties

ၿပီးရင္ Text ထဲကို ‘ …..’ ထည့္လုိက္ေပ့ါ။

ကြ်န္ေတာ္္က button controls ေတြရဲ႕ id ကို ေျပာင္းေပးထားတယ္။

Arrival date အတြက္ button ကို btnarrival လုိ႕ေပးမယ္။

ဆုိေတာ့ right click->button->properties

properties window ထဲမွာ id ဆုိတာကိုရွာပါ။ေတြ႕ရင္…id ရဲ႕ ညာဘက္ေဘးမွာ

Button1လုိ႕ေရးထားတာေတြ႕လိမ့္မယ္။အဲဒါကို btnarrival လုိ႕ေျပာင္းေရးလုိက္ပါ။

Arrival date အတြက္ Panel ရဲ႕ id ကိုလည္း plncalendar1 လုိ႕ေျပာင္းလိုက္ပါ။

OK! Departure Date အတြက္လည္းအဲလုိပဲလုပ္ပါ။controls ေတြရဲ႕ properties

ေတြကိုေပ့ါ။

51
Departure date အတြက္ button ရဲ႕ id ကို btndeparture လုိ႕ေျပာင္းပါ။

Panel ရဲ႕ Id ကိုလည္း plncalendar2 လုိ႕ျပင္ပါ။

OK! ဒါဆုိရင္ Picture 1 အတုိင္း ဒီဇုိင္းလည္းလုပ္ၿပီးၿပီ။properties ေတြလည္း ျပင္ၿပီးၿပီ

ဆုိရင္ ကြ်န္ေတာ္တ
္ ုိ႕ code ေရးၾကရေအာင္။

ပထမဦးစြာ arrival date အတြက္ button ကို double click လုပ္ပါ။code behind
ထဲေရာက္သြားၿပီ။အေသးစိတ္ကို code behind ထဲက်မွေျပာျပမယ္။

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
52
protected void btnarrival_Click(object sender, EventArgs e)
{
//button ကို click လုိက္ရင္ panel ထဲ ထည့္ထားတဲ့ calendar ကို ျပန္ျပေအာင္
//လုပ္တာ။
plncalendar1.Visible = true;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
//ဒီ event ကေတာ့ calendar control ကို double click လုပ္ၿပီးေရးတာပါ။
//textbox ထဲကို ကိုယ္ကေန calendar ကေန ေရြးခ်ယ္လုိက္တဲ့ေန႕ကို
//ေရာက္ေအာင္လုပ္တာပါ။
txtarrival.Text = Calendar1.SelectedDate.ToShortDateString();
//calendar ထဲက day တစ္ခုခုကိုေရြးလုိက္ရင္ calendar ကိုထည့္ထားတဲ့ panel ကို
//invisible ျဖစ္ေအာင္လုပ္တာပါ။
plncalendar1.Visible = false;
}
protected void btndeparture_Click(object sender, EventArgs e)
{
plncalendar2.Visible= true;

}
protected void Calendar2_SelectionChanged(object sender, EventArgs e)
{
//ဒီ calendar2 ရဲ႕ evnet ကေတာ့..သူ႕ကိုကလစ္လုိက္ရင္ calendars 2ခုရဲ႕

53
//ျခားနားခ်က္ကိုတြက္ေပးမွာပါ။အေျဖကို label မွာျပခ်င္တာပါ။ဆုိေတာ့ ဒီ code
//ေတြေရးရေအာင္ calendar2 ကို double click လုပ္လုိက္ပါ။
txtdeparture.Text = Calendar2.SelectedDate.ToShortDateString();
plncalendar2.Visible = false;
int c1;
int c2;
int total;
//ဒါကေတာ့ calendar ကေန ေရြးလုိက္တဲ့ေန႕ကို c1 ထဲထည့္တာေပ့ါ။
//c2လည္းအဲဒီအတုိင္းပဲ။
c1 = Calendar1.SelectedDate.DayOfYear;
c2 = Calendar2.SelectedDate.DayOfYear;
//ဒါကေတာ့ ကြ်န္ေတာ္တ
္ ုိ႕လုိခ်င္တာက departure date ကေန arrival date
//ကိုႏုတ္ေပးတာပါ။ကြ်န္ေတာ္တ
္ ုိ႕က ျခားနားခ်က္ကိုလုိခ်င္တာကိုး။
total = c2 - c1;
//ရလာတဲ့ ျခားနားခ်က္ကို label control ထဲထည့္ေပးတာပါ။
Label1.Text = Convert.ToString(total);

OK! ဒါဆုိနားလည္မယ္ထင္ပါတယ္။Test it yourself! Good Luck!

54
Linkbutton

ကြ်န္ေတာ္္တုိ႕ေတြ webpages ေတြ တစ္ခုကေနတစ္ခု သြားခ်င္တဲ့အခါ မွာ

linkbutton သုိ႕မဟုတ္ httpresponse ကုိသံုးပါတယ္။ဥပမာေလး နဲ႕ျပပါမယ္။

လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ linkbutton,button တစ္ခုဆီကို ပံုမွာျပထားတဲ့အတုိင္း

design page ေပၚမွာေခၚထားပါ။

1.

55
Picture 1 အတုိင္း design လုပ္ၿပီးၿပီဆုိရင္

Right click->linkbutton->properties

Linkbutton ရဲ႕ကို text ကို Hello လုိ႕ေရးပါ။

Postback url ဆုိတာေလးရဲ႕ေဘးကို clickလုိုက္ရင္ picture 2 မွာ ျပထားတဲ့အတုိင္း

select url box ေလးက်လာပါလိမ့္မယ္။အဲဒီမွာ ကိုယ္ link လုပ္ခ်င္တဲ့ page ကို
ေရြးၿပီး OKကို click လုိက္ပါ။

2.

56
ၿပီးရင္ Button ကို right click->properties

Button ရဲ႕ text ကို Hello လုိ႕ေရးပါ။

ၿပီးရင္ Button ရဲ႕ click event ထဲမွာ code ၀င္ေရးမွာျဖစ္တဲ့အတြက္ button ကို
double click လုုပ္လိုက္ပါ။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class link : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

57
 }
protected void Button1_Click(object sender, EventArgs e)
{
//ကုိယ္ link လုပ္ခ်င္တဲ့အခါမွာ response.redirect ကုိသံုးပါတယ္။
Response.Redirect("hello.aspx");
//တစ္ကယ္လုိ႕ကိုယ္က Google ကို link လုပ္ခ်င္တယ္ဆုိရင္ေတာ့
Response.Redirect(http://www.google.com);

}
}
OK!Test it yourself! Good Luck!

58
Fileupload control

ကြ်န္ေတာ္္အခုေျပာမယ့္အေၾကာင္းကေတာ့ fileupdoad control အေၾကာင္းပါ။

လုိအပ္တဲ့ controls ေတြျဖစ္တဲ့ textbox,fileupload ,label,button ,panel control
တစ္ခုဆီကို ပံုမွာျပထားတဲ့အတုိင္း ေခၚတင္ထားပါ။

ပံုမွာျပထားတဲ့အတုိင္း contols မ်ားကို ဒီဇုိင္းလုပ္ၿပီးၿပီဆုိရင္ ကြ်န္ေတာ္တ

္ ုိ႕ code
ေရးၾကမယ္။ကြ်န္ေတာ္္လုပ္ခ်င္တဲ့ပံုဆံက Browse ကို click လုိက္ရင္ picture ေရြးမယ့္
dialoge box ေလးက်လာမယ္။ပံုေတြေရြးမယ္..။ေရြးၿပီးရင္ Upload Now ဆုိတဲ့
Button ကို click လုိက္ရင္ ကုိယ္upload လုပ္လုိက္တဲ့ picture က panel ထဲမွာ
ျပေနခ်င္တာပါ။ၿပီးေတာ့ solution explorer ထဲမွာရိွတဲ့ image folder ထဲကိုပါ save
သြားေစခ်င္တာပါ။ OK! ဒီလုိဆုိရင္ကြ်န္ေတာ္္တုိ႕ Uplod button ကို double clik
59
လုိက္ပါ။code ေရးၾကမယ္။

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class fileupload : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
//fileupload မွာ တင္ထားတဲ့ file ရိွမရိိွစစ္တာပါ။
if (FileUpload1.HasFile)
{
60
//ကိုယ္ သိမ္းမယ့္ file path လမ္းေၾကာင္းပါ။
string Fdir = Server.MapPath(".") + "\\image\\";
//ကိုယ္သိမ္းမယ့္ filename ပါ။
string Fname = System.IO.Path.GetFileName(FileUpload1.FileName);
FileUpload1.SaveAs(Fdir + Fname);
Label1.Text = "Received" + FileUpload1.FileName + "ContentType" +
FileUpload1.PostedFile.ContentType + "Lenght" +
FileUpload1.PostedFile.ContentLength + "bytes";
Image img = new Image();
img.ImageUrl = "~\\image\\" + Fname;
//panel ထဲကို က်ေတာ္တုိ႕ upload လုပ္လုိက္တဲ့ picture ကိုထည့္လုိက္တာပါ။
Panel1.Controls.Add(img);
}
else
{
Label1.Text = "No upload file";
}
}
}
FileUpload1.PostedFile.ContentType ဆုိတာကိုယ္တင္လုိက္တဲ့ file type
အမ်ိဳးအစားပါ။
FileUpload1.PostedFile.ContentLength ဆုိတာ ကိုယ္တင္လုိက္တဲ့ file size ပါ။
FileUpload1.FileName ဆုိတာ ကိုယ္တင္လိုက္တဲ့ file name ပါ။
OK! ကုိယ္ကုိတုိင္ စမ္းၾကည့္မွ နားလည္မယ္ထင္ပါတယ္။

61
Validation Controls

Requirdfield validator

Requiredfield validator ဆုိတာဘာလဲဆုိရင္ ကြ်န္ေတာ္တ

္ ုိ႕ ကိုယ္ေရးကိုယ္တာ
forms ေတြျဖည့္တဲ့ အခါမွာသံုးပါတယ္…။ဥပမာ…နာမည္ဆုိရင္ မျဖည့္လုိ႕မရဘူးေလ…
မျဖည့္ပဲနဲ႕ submit လုပ္လုိက္ ရင္ required field validator က ေန user ကို
required to fill ဆုိတဲ့ message ေလးျပေပးတယ္။ ဥပမာေလးနဲ႕ လုပ္ျပမယ္…။

New Website တစ္ခုေခၚလုိ္က္ပါ..ပံုမွာျပထားတဲ့အတုိင္း textbox control 2 ခု၊

requird field validator 1ခု၊ Label တစ္ခု၊Button တစ္ခုေခၚလုိက္ပါ။ဒီဇုိင္းလုပ္ပါ။
1.

62
2.

Picture 1 အတုိင္း လိုအပ္တဲ့ controls ေတြကို ေခၚၿပီးၿပီဆုိရင္ Picture

2ကိုၾကည့္လုိက္ပါ…။
Picture 1 မွာ requirdfield validator ကို Textbox control ရဲ႕ ညာဘက္ေဘးကုိ
ေခၚၿပီးၿပီဆုိရင္
Right click->requirdfield validator ->Properties ထဲကိုသြားပါ…။
Properties window မွာ Error Message မွာ * ေလးထည့္ပါ။
Control to validate မွာ textbox1 လုိ႕ေရြးလုိက္ပါ။ကြ်န္ေတာ္တ
္ ုိ႕ စစ္ခ်င္တာက user
name ရဲ႕ textbox မုိ႕လုို႕ textbox1 လုိ႕ေရြးတာပါ။
Button control ရဲ႕ text ကိုလည္း Submit လုိ႕ေျပာင္းလုိက္ပါ။
63
Right click->Button ->properties
Textမွာ Submit လုိ႕၇ုိက္ထည့္လုိက္ပါ။
ၿပီးရင္….code နဲနဲေရးရေအာင္…။
Submit button ကို doubl click လုိက္ပါ။

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class e1 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{

64
//label မွာ ကိုယ္ textbox1 နဲ႕ textboxt 2 မွာရိုက္ထည့္လုိက္တဲ့ texts ေတြကို
//ေပၚေအာင္ေရးတာ..။
Label1.Text = TextBox1.Text +"from " + TextBox2.Text;
}

}
OK! Test it yourself! . Good Luck!

65
Range validator

Range validator control ဆုိတာကေတာ့ အလြယ္ကူဆံုး ဥပမာျပရမယ္ဆုိရင္

ကြ်န္ေတာ္္တုိ႕ျဖည့္တဲ့ form မွာ အသက္ေတြရုိက္ထည့္ရတဲ့အခါ…age ကို
အငယ္ဆံုးဘယ္ေလာက္ျဖစ္ရမယ္…အၾကီးဆံုးဘယ္ေလာက္ျဖစ္ ရမယ္လုိ႕ admin
ကေန သတ္မွတ္ေပးလုိက္တာပါ။

အခု example မွာ ကြ်န္ေတာ္္က minimum age ကို 10 လုိ႕သတ္မွတ္ပါမယ္..။

Maximum age ကို 100 လုိ႕သတ္မွတ္ပါမယ္။

ဘယ္လုိသတ္မွတ္မလဲဆုိရင္ ပံုမွာျပထားတဲ့ေလးေတြကိုၾကည့္လုိက္ပါ။

လုိအပ္တဲ့ control ေတြျဖစ္တဲ့ textbox,range validator ,button တစ္ခုဆီကို

website ေပၚမွာ တင္လုိက္ပါ။

66
1.

67
2.

Picture 1 အတုိင္းcontrols ေတြကို ေခၚၿပီးၿပီဆုိရင္

Right click->range validator ->properties ကို ေရြးလုိက္ပါ။

Properties windows မွာ range validator အတြက္လို္အပ္တာာေတြေရးေပးပါမယ္။

Error message မွာ invalid ရုိက္ထဲ့ပါ။

Control to validate မွာ Textbox1

68
Type မွာ integer

Maximum value မွာ 100

Minimum value မွာ 10

ၿပီးရင္ button ကို right click->properties

Text ကို Submit လုိ႕ေရးလုိက္ပါ။

Ok! ဒါဆုိရင္ run ၾကည့္လုိ႕ရပါၿပီ။

Test it yourself! .Good Luck!

69
Compare validator

Compare validator ဆုိတာ ဘယ္လုိေနရာမွာသံုးလဲဆုိရင္ ကြ်န္ေတာ္တ

္ ုိ႕ register
လုပ္တဲ့အခါမွာ username,password,confirm password တုိ႕ကိုရုိက္ထည့္တယ္။
အဲဒီေနရာမွာ ကြ်န္ေတာ္တ
္ ုိ႕က password နဲ႕ confirm password တုိ႕ ဟာ
တူညီေနရပါမယ္..မတူရင္ user ကို must be same ျဖစ္ရမယ္လုိ႕ message
ျပဖုိ႕အတြက္…compare validator ကုိသံုးပါတယ္။

လုိအပ္တဲ့ textbox က 3ခု၊button 1 ခု၊ compare validator 1 ခုတုိ႕ကို Website

design page ေပၚမွာ ပံုမွာျပထားတဲ့ေခၚလုိက္ပါ။

1.

70
2.

Picture 1 အတုိင္း controls ေတြကို ေခၚၿပီးၿပီဆုိရင္

Right click->compare validator ->properties ထဲကိုသြားပါ။

Properties windows မွာ Error message->Password must be same လုိ႕

ရုိက္ထည့္ပါ။

Textbox2 နဲ႕ Textbox3 တုိ႕ရဲ႕ Textmode ကုိ password အျဖစ္ေျပာင္းေပးရမယ္။

ဆုိေတာ့ right click->textbox2->properties,Textmode ကို password အျဖစ္

71
ေျပာင္းေရြး လိုက္ပါ။textbox3 ကိုလည္း အဲဒီအတုိင္းေျပာင္းေပးပါ။

Contorl to compare ->textbox2

ကိုယ္ႏႈိင္းယွဥ္ခ်င္တာက password ရဲ႕ textbox2 ျဖစ္လို႕ ဒီလုိေရးတာပါ။

Control to validate->textbox3

ကိုယ္စစ္္ခ်င္တာက confirm password ရဲ႕ textbox3 ျဖစ္လို႕ ဒီလုိေရးတာပါ။

Type->String ဆုိၿပီးရိုက္ထည့္ပါ။

ကိုယ္စစ္ခ်င္တဲ့ Type က stirng မုိ႕လုိ႕အဲလုိေရးတာ…int ဆုိရင္ int ေပ့ါ

အားလံုးၿပီးသြားၿပီဆုိရင္ run လုိ႕ရပါၿပီ။

OK ! Test it yourself! Good Luck!

72
RegularExpression validator

RegularExpression validator ကိုဘယ္ေနရာေတြမွာ သံုးလဲဆုိရင္ ကြ်န္ေတာ္္တုိ႕ေတြ

email,zip code ေတြရိုက္ထည့္တဲ့အခါမွာ format မွားေနလား… ဆုိတာ စစ္ခ်င္တဲ့
အခါမွာ သံုးပါတယ္။

ပိုၿပီး ရွင္းသြားေအာင္ ဥပမာေလးနဲ႕ ျပပါမယ္။

လုိအပ္တဲ့ controls ေတြက textbox 3ခု,regular expression validator 3ခု,button

1ခုကို ပံုမွာ ျပထားတဲ့အတုိင္း design page ေပၚမွာ ေခၚထားလုိက္ပါ။

1.

73
Regular expression validators ေတြကို ေခၚၿပီးၿပီဆုိရင္ properties ေတြ၀င္
ျပင္ရပါမယ္…။

ပထမဦးဆံုး user name textbox ရဲ႕ေဘးက regular expression validator

ကိုျပင္မယ္။

2.

Right click->regular expression validator1->properties

Picture 2 အတုိင္းလုပ္ပါ။

အေသးစိတ္ထပ္ေျပာပါအံုးမယ္..။

Right click->regular expression validator1->properties

74
Properties window ထဲကိုၾကည့္လိုက္ပါ။

ကြ်န္ေတာ္္တုိ႕ format စစ္ခ်င္တဲ့ control ကိုေရြးမွာဆုိေတာ့

Control to validate ဆုိတဲ့ေနရာေလးမွာ.. textbox1ကိုေရြးလုိက္ပါ။

Error Message ဆုိတဲ့ေနရာေလးရဲ႕ေဘးမွာ name must be 6 to 20 characters

လုိ႕ရိုက္ထည့္ပါ။

Regular Expression ဆုိတဲ့ေနရာေလးရဲ႕ ေဘးမွာ button အေသးေလးကို ကလစ္

လုိက္ပါ။

Picture 2 မွာ ျပထားတဲ့အတုိင္း Regular Expression Editor box ေလးက် လာ

ပါလိမ့္မယ္။

ၿပီးရင္ textbox ထဲမွာ ^\w{6,20}$ ရို္က္ထည့္လုိက္ပါ။

ၿပီး၇င္ OK ေပ့ါ။

75
3.

Picture 3.မွာျပထားတဲ့အတုိင္း email ရဲ႕ regularexpression validator ရဲ႕

properties ေတြကိုျပင္မယ္။

Right click->regular expression validator->properties

Error Message->invalid email address

Control to validate->textbox2

Reguar expression->click->button

Choose->Internet Email address and Click->OK

76
4.

Picture 4.မွာျပထားတဲ့အတုိင္း zipcode ရဲ႕ regular expression validator ရဲ႕

properties ေတြကိုျပင္မယ္။

Right click->regular expression validator->properties

Error Message->invalid

Control to validate->textbox3

Reguar expression->click->button

77
Choose->us zip code

OK!ဒါဆုိရင္ run ၾကည့္လုိ႕ အဆင္ေျပပါၿပီ။

Test it yourself! Good Luck!

78
Validation Sumarry

Validation Sumarry ဆုိတာက forms အတြက္ လုိအပ္တာေတြကို ျဖည့္ၿပီးရင္ သူ

သတ္မွတ္ထားတဲ့ requirements နဲ႕ မကိုက္ညီဘူးဆုိရင္ Error message အေနျဖင့္
summary မွာေဖာ္ျပေပးတာပါ။sample ေလးနဲ႕လုပ္ျပပါမယ္။လုိအပ္တဲ့ controls ေတြ
ျဖစ္တဲ့ textboxn 5 ခု, Required field validator 3ခု,Range Validator1ခု,
RegularExpression validator 1ခု ,validation summary 1 ခု,button 1ခုဆီကို
ပံုမွာျပ ထားတဲ့အတုိင္း ေခၚထားပါ။

1.

79
Picture 1 အတုိ္င္း ဒီဇုိင္းလုပ္ၿပီးၿပီဆုိရင္ controls ေတြရဲ႕ properties ထဲကို
သြားရပါမယ္။

2.

Right click->required field validator1->properties

Error Message ကို *

Control to validate ကို textbox1

80
Right click->required field validator2->properties

Error Message ကို *

Control to validate ကို textbox2

Right click->range validator1->properties

Error Message ကို Must be greater than 18

Minimum value ကို 19

Maximum value ကို 100

Contorl to validate ကို textbox3

Type ကို Integer

Right click->RegularExpression validator->properties

Control to validate ကို textbox4

Error Message ကို invalid

ValidationExpression ကို \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

Right click->Requiredfield validator4->properties

Error Message ကို *

Control to validate ကို textbox5

81
Controls ေတြရဲ႕ properties ေတြကို ျပင္ေရးၿပီးၿပီဆုိရင္ run လုိ႕ရပါၿပီ။

OK! Test it yourself! Good Luck!

ထင္လင္းေအာင္

B.C.Sc(Hons:)

July 2nd 2010

82