ASP.NET веб форм, контролууд

ASP.NET веб форм, контролууд Lecture 13 SE303-Database programming

Агуулга • Интернетээр холбогдох клиент-сервер ажиллагаа • Веб формын контролууд

Интернетээр холбогдох клиент-сервер ажиллагаа • Интернэтэд тархсан вэб нөөцүүд рүү хандахад 3 механизм шаардлагатай. • нөөцөд хүрэх зам (URI) • хүсэлт/хариултын процесс яаж ажиллахыг заасан протокол (НТТР) • мэдээллийг нийтлэх хэл (НТМL) • Интернэт програмуудын орчин нь windows application програмтай харьцуулахад нэлээд ялгаатай. Үүнд: • НТМL. Хөгжүүлэгч нь вэб хуудас үүсгэхийн тулд HyperTextМаrkupLanguage хэлийг мэддэг байх хэрэгтэй. Мэдээж HTML үүсгэлтийг автоматжуулсан хэрэгслүүд ихээхэн дэм болдог. Гэхдээ хөгжүүлэгч доод түвшний HTML хэлийг сайтар ойлгосон байх хэрэгтэй.

Интернетээр холбогдох клиент-сервер ажиллагаа • НТТР. Вэб програмын үндсэн ажлуудын нэг бол НТТР хүсэлтэд хариулах явдал юм. Хүсэлт нь үндсэн бие хэсгээс гадна зарим тохиолдолд толгойн мэдээлэл нэмэгдэж НТТР GET эсвэл POST аргаар илгээгддэг. Вэб хөгжүүлэх хэл нь НТТР мессеж рүү бүрэн хандалт хийж болдог байх ёстой. Жишээлбэл, хүлээн авсан формыг боловсруулахын тулд түүний талбаруудыг уншиж чаддаг байх ёстой. Толгойн мэдээлэл ч мөн их чухал байдаг. Толгойн мэдээллийг кээшлэлтийг удирдах, хүсэлт хаанаас ирснийг тодорхойлох, мөн клиент серверийн хооронд күүкий дамжуулахад хэрэглэдэг.

Интернетээр холбогдох клиент-сервер ажиллагаа • Төлөв. HTML, НТТР алинд нь ч хүсэлт/хариултын үйлдэл хооронд төлвийг зохицуулах (өгөгдлийг хадгалж үлдэх) онцлог байхгүй. Клиент нь хоосон форм хүлээн авна, дараа нь түүнийг бөглөөд сервер рүү буцаан илгээнэ. Сервер формоос өгөгдлийг уншиж ашиглаад дахин хоосон форм буцаан илгээнэ. Клиент болон серверийн хоорондох энэ аялалд өгөгдлийг (төлөв) авч явах нь вэб програм зохиогчдод тулгардаг том асуудал юм.

Интернетээр холбогдох клиент-сервер ажиллагаа • Хүсэлт/хариултын процесс КЛИЕНТ ВЕБ СЕРВЕР Хоосон форм ирнэ survey.htm Формыг бөглөөд илгээнэ process.htm survey.htm Хоосон форм ирнэ

Интернетээр холбогдох клиент-сервер ажиллагаа • Вэб програм: Биеийн Массын Индекс тооцоологч

Интернетээр холбогдох клиент-сервер ажиллагаа • JavaScript БМИ тооцоологч • JavaScript нь платформ болон браузераас нь хамааран клиент талд хэрэглэгддэг үндсэн хэл юм. ASP.NET нь мөн зарим клиент талд ажиллах Javascript-г автоматаар үүсгэж ашигладаг. • Дараах жишээнд клиент болон сервер талд хоёуланд нь Javascriptашиглана. Доорх кодын хэсэгт клиент хуудсыг бүрдүүлж буй НТМL ба Javascript кодыг харуулсан.

Интернетээр холбогдох клиент-сервер ажиллагаа • JavaScript БМИ тооцоологч – Жишээ <HTML> <HEADTITLE>BMI Тооцоологч</TITLE> <SCRIPT LANGUAGE="Javascript" TYPE="text/javascript"> <!- // hrefstr нь асуулгын мөр болно varhrefstr= location.search.substring(1, location.search.length); function showbmi(){ if (hrefstr ) // талбаруудын утгыг харуулах { varparms = hrefstr.split('&'); var f = self.document.forms[0]; f.bmi.value = eval(parms[0]); f.hti.value = eval(parms[2]); f.wt.value = eval(parms[3]); f.htf.value = eval(parms[1]); } }

Интернетээр холбогдох клиент-сервер ажиллагаа • JavaScript БМИ тооцоологч – Жишээ //веб сервер лүү илгээх function post () { if (verify ()) // формын агуулгыг шалгах { var f = self.document.forms[0]; f.bmi.value-0.; f. submit (); // HTTP GET ашиглан илгээнэ } } //—> </script> </HEAD> <B0DY bgcolor=#ffffff> <F0RM NAME="bmi_input" method="GET" action="bmicalculator.htm"> <table border=0 cellpadding=2 cellspacing=0 width=180bgcolor=#cccccc> …

Интернетээр холбогдох клиент-сервер ажиллагаа • JavaScript БМИ тооцоологч – Жишээ //http://localhost/ideas/bmicalculator.htm?bmi=0&htf=6&hti=1&wt=168 Сервер рүү //http://localhost/ideas/bmi.htm?bmi=22&htf=6&hti=1&wt=168 Клиент рүү

Интернетээр холбогдох клиент-сервер ажиллагаа • JavaScript БМИ тооцоологч – Жишээ <html><head></head><body > <script language="javascript"> <!- // асуулгын мөрд хандахадп location.search-г ашиглана varhrefstr = location.search.substring(1, location.search.length); varparms = hrefstr.split(*&'); feet = parms[1]; inch = parms[2]; pounds = parms[3]; totinches = eval(feet)*12 + eval(inch); //... BMI тооцоолох var h2 = totinches * totinches; bmi = Math.round(eval(pounds) * 703 * 10/ h2)/10; ... //... Анхны параметрүүд болон тооцоолсон утгыг агуулсан мөр ndx = hrefstr.indexOf(*htf'); self.location =ybmi.htm?bmi='+bmi+"&"+hrefstr.substring(ndx); //—> </script> </body> </html>

Интернетээр холбогдох клиент-сервер ажиллагаа • JavaScript БМИ тооцоологч • Асуулгын мөр ашиглах нь бага хэмжээтэй өгөгдөл дамжуулдаг програмуудад их түгээмэл байдаг. • Өгөгдөл том бол асуудал үүснэ. Учир нь зарим браузерын хувьд (тухайлбал IE) урт нь 2К-аар хязгаарлагдана. • URL дэх мөрийг хэрэглэгч засах боломжтой учраас нууцлалын хувьд сул болно. Асуулгын мөрийг encrypt-лэснээр энэ асуудлыг шийдэх боловч үүнийг хэзээ хэрэглэхийг сайн бодох хэрэгтэй. • Зөв шийдэл нь НТТР РOSТ дуудалтыг ашиглах явдал юм.

Интернетээр холбогдох клиент-сервер ажиллагаа • ASP (Active Server Pages) БМИ тооцоологч • Доорх жишээнд сервер талын Javascript кодыг ASP кодоор солиё. Өмнөх жишээний клиент код дээр РOSТ аргаар өгөгдөл илгээх, мөн ASP сервер хуудсын нэрийг action атрибутад зааж өөрчлөх хэрэгтэй. <FORM NAME="bmi_input" method=POST action=bmicalculator.asp> • Сервер талын ASP код нь маш энгийн. • Клиентын илгээсэн өгөгдөлд request объектоор дамжуулан хандана. Дараа нь хүсэлтийг VBScript функц руу дамжуулна. Ингээд БМИ утга болон бусад параметрүүдийг агуулсан URL үүсгэнэ. response.redirect метод нь формыг клиентын браузер руу илгээнэ.

Интернетээр холбогдох клиент-сервер ажиллагаа • ASP (Active Server Pages) БМИ тооцоологч– Жишээ <script language="VBScript" runat="server"> function getBMI(inch,feet,pounds) totinches = feet*12 + inch h2 = totinches * totinches getBMI= (pounds * 703 * 10/ h2)/10 end function </script> <% ‘ ... POST өгөгдөл request объектодагуулагдана inch = request("hti") feet = request("htf") pounds = request("wt") bmi= left(cstr(getBMI(inch,feet,pounds)) , 4) ‘ ... Буцаах утга болон анхны параметрүүд hrefstr = "&htf=" +cstr(feet) + "&hti=" + cstr (inch)+&wt="&cstr(pounds) response.redirect ("bmi3.htm?bmi=" + bmi+hrefstr) %>

Интернетээр холбогдох клиент-сервер ажиллагаа • ASP.NET ашигланБМИ тооцоолох • ASP.NET боломжууд 1. .NET орчинтой уялдах. Вэб форм нь CLR-н дэмжлэгтэй ажилладаг бөгөөд вэбийг дэмжих System.Web, System.Web.UI гэх мэт фрэймворкын классууд болоод бусад бүх классууд руу хандаж чадна. Зөвхөн сервер талд .NET фрэймворк байх хэрэгтэй. Хэрэглэгчид компьютер дээрээ .NET фрэймворкыг суулгах шаардлагагүй. Гол нь сервер талд ажиллах НТМL үүсгэгч код юм. Гарсан код нь ажиллах гэж буй браузерт тохируулан засвар зохицуулалт хийгдэнэ. Ингэснээр браузерын боломжуудыг бүрэн ашиглаж чадах юм.

Интернетээр холбогдох клиент-сервер ажиллагаа • ASP.NET ашигланБМИ тооцоолох • ASP.NET боломжууд 2. Клиент талын НТМL контролуудыг сервер талын контролуудтай холбох. ASP.NET дэх бүх контролууд класс байдаг. Харин браузер дээр дүрслэгдэж байгаа контролууд нь тэдгээрийн НТМL буулгалт юм. Эдгээр ялгаатай технологуудыг холбохын тулд ASP.NET нь НТМL тааг (tag) бүртэй тохирох сервер талын контролуудыг агуулдаг. Жишээлбэл, бидний өмнөх жишээнд үзсэн <Input type=“Text”> тааг нь System.Web.UI.HtmlControls нэймспэйсийн InputText класстай харгалзах юм. Вэб хуудсыг сервер рүү илгээхэд сервер дээр ажиллахаар тохируулсан HTML таагууд нь харгалзах .NET класс руу хөрвүүлэгдэж вэб формын гишүүн болдог.

Интернетээр холбогдох клиент-сервер ажиллагаа • ASP.NET ашигланБМИ тооцоолох • ASP.NET боломжууд 3. Веб хуудсыг хөрвүүлэх. Уламжлалт вэб хуудсууд нь JavaScript, VBScript, Perl болон бусад скрипт хөрвүүлэгчээр үүсгэгддэг. Эдгээртэй харьцуулахад АSР.NЕТ вэб хуудас нь НТМL хуудас болон С# эсвэл VB.NЕТ гэх мэт .NЕТ хэлүүд дээр бичигдсэн кодоос тогтоно. АSР хуудаст (.аsрх файл) эхний хүсэлт ирэхэд .NET класс руу хөрвүүлэгдэнэ. Дараагийн хүсэлтүүд нь аль хэдийн хөрвүүлэгдсэн ассемблайгаар боловсруулагдах учраас илүү хурдан байна.

Интернетээр холбогдох клиент-сервер ажиллагаа • ASP.NET ашигланБМИ тооцоолох • ASP.NET програмын кодыг гурван хэлбэрээр үүсгэж болно. • Дотоод код. НТМL болон програмын код (С#) хамтаар нэг аsрх файлд оршино. • Арын код. Програмын код НТМL кодоос тусдаа файлд байрлана. Markup нь .aspxфайлд, логик код нь.cs юмуу dll файлд байрлана. • Хагас классууд. Энэ нь арын кодын нэг хэлбэр юм. Ялгаа нь арын код нь partialклассуудад хуваагдаж байрладаг. Энэ загвар нь зөвхөн ASP.NET 2.0 болон түүнээс дээш хувилбаруудад дэмжигдэнэ.

Интернетээр холбогдох клиент-сервер ажиллагаа • Дотоод код <%@ Page Language="C#" %> <HTML> <HEAD><TITLE>БМИ тооцоологч</TITLE> <script runat="Server"> // BMI утгыг тооцоолох private void getBMI(object sender, System.EventArgs e) { try { decimal f = Convert.ToDecimal(htf.Value); decimal inch = Convert.ToDecimal(hti.Value); decimal w = Convert.ToDecimal(wt.Value); decimal totinches = f * 12 + inch; decimal h2 = totinches * totinches; decimal masslndex = (w * 703 * 10/ h2)/10; bmi.Value = masslndex.ToString("##.##") ; }catch (Exception ex) { bmi.Value=" } } </script> </HEAD> <B0DY bgcolor=#ffffff> <F0RM NAME="bmi_input" runat=server>

Интернетээр холбогдох клиент-сервер ажиллагаа • Дотоод код • HTML болон ASP.NET кодын ялгааг ойлгохын тулд өмнө үзсэн 2 жишээг харьцуулая • Хамгийн илэрхий ялгаа runat=server атрибут байна. Энэ нь НТМL элементийг НТМL сервер контрол руу хувиргахыг заадаг. Сервер контрол нь браузер руу илгээгдэхийн өмнө сервер талд боловсруулагдана гэсэн үг. Дараахь жишээнд <input> тааг хэрэглэгчийн браузер руу илгээгдэхийн өмнө хэрхэн хөрвүүлэгдэхийг харуулсан. ASP.NЕТ код: <input type=text size=3 id=wt maxlength=3 runat=server> Гарсан НТМL код: <input name="wt" type="text" size="3" maxlength="3" value="168" />

Интернетээр холбогдох клиент-сервер ажиллагаа • <form> тааг нь method эсвэл action атрибут байхгүй; автоматаар POST аргыг сонгосон байдаг. Дараах кодод харуулсан хуудас нь өөрийгөө заасан байна, өөрөөр хэлбэл уг хуудас руу формыг илгээнэ. ASP.NET код: <FORM NAME="bmi_input" runat=server> НТМL код: <form name="_ctlO" method="post" action="bmi.aspx">

Интернетээр холбогдох клиент-сервер ажиллагаа • <button> тааг нь onServerClickүзэгдэл төлөөлөгчийг агуулна. Энэ нь сервер дээрх ямар нэг код үзэгдлийг боловсруулахыг заана. Энэ нь НТМL дотор JavaScript функц дуудалтаар солигдоно. НТМLкод: <input language="javascript" onclick=" doPostBack(*_ctll','')" name="_ctll" type="button" value="Submit Form" /> ASP.NET нь мөн НТМL хуудас дотор 3 далд талбарыг нэмж браузер руу дамжуулдаг <input type=“hidden” name=“_EVENTTARGET” value=“” /> <input type=“hidden” name=“_EVENTARGUMENT” value=“” /> <input type=“hidden” name=“_VIEWSTATE” value=“dDwxMzc5NjU4NTAw0zs+iIczTTLHA74j_ T/02tIwU9FRx5uc=“/> хүсэлтийг сервер рүү илгээсэн контролыг заана (postbackгэж нэрлэгддэг) үзэгдэлд шаардлагатай бүхаргументуудыг агуулна

Интернетээр холбогдох клиент-сервер ажиллагаа Харагдах төлөв (_VIEWSTATE) • Харагдах төлөв нь клиент болон серверийн хооронд форм солилцох үед сервер талын контролуудын (runat=server гэж тодорхойлогдсон контролууд) төлвийг автоматаар хянадаг АSР.NET-н онцлог юм. Өөрөөр хэлбэл энэ онцлог ньListBox, GridViewзэрэг контролуудад өгөгдлийг байршуулж (ихэвчлэн хуудас эхний удаа ачаалагдахад) уг өгөгдлийг дараалсан хуудас дуудалтуудын туршид хэвээр үлдэх баталгааг хангадаг. • Хуудас POST үйлдлээр серверт ирэхэд _VIEWSTATЕ далд талбараас уншиж контролуудын төлвийг (агуулга, стиль) сэргээдэг. Сервер дээр боловсруулалт хийгдээд хуудсыг клиент рүү буцаан илгээхийн өмнө _VIEWSTATЕ талбар шинэчлэгдэж болно. Энэ талбарт агуулагдах утгууд нь браузер дээр хуудсыг унших үед контролын төлөв ямар байсныг санаж харуулах үүрэгтэй.

Интернетээр холбогдох клиент-сервер ажиллагаа Харагдах төлөв (_VIEWSTATE) • Харагдах төлвийг ашиглах үед түүнд сервер талын контролуудад хамаатай бүх өгөгдөл, цаашлаад контролуудын загвар, харагдах байдлын мэдээллийг агуулах учраас хуудас их хэмжээтэй болж хурдны асуудал гарна. Жишээлбэл: DataGridтохиолдолд нүднүүдийн өгөгдлөөс гадна баганы толгой, аттрибут, загварыг агуулна. Энэ нь вэб хуудсанд хэдэн мянган байтыг дор нь нэмж чадна. • Хурдыг сайжруулахын тулд вэб хуудсанд бүхэлд нь төлөв санахыг болиулж зөвхөн сонгосон контролуудын хувьд хэрэглэж болно. Төлвийг хуудсын түвшинд цуцлахын тулд @Page директивтEnableViewState атрибутыг хэрэглэнэ. <%@ Page Language=“C#” EnableViewState=“False” %>

Интернетээр холбогдох клиент-сервер ажиллагаа Харагдах төлөв (_VIEWSTATE) • Харагдах төлвийг ашиглах үед түүнд сервер талын контролуудад хамаатай бүх өгөгдөл, цаашлаад контролуудын загвар, харагдах байдлын мэдээллийг агуулах учраас хуудас их хэмжээтэй болж хурдны асуудал гарна. Жишээлбэл: DataGridтохиолдолд нүднүүдийн өгөгдлөөс гадна баганы толгой, аттрибут, загварыг агуулна. Энэ нь вэб хуудсанд хэдэн мянган байтыг дор нь нэмж чадна. • Хурдыг сайжруулахын тулд вэб хуудсанд бүхэлд нь төлөв санахыг болиулж зөвхөн сонгосон контролуудын хувьд хэрэглэж болно. Төлвийг хуудсын түвшинд цуцлахын тулд @Page директивтEnableViewState атрибутыг хэрэглэнэ. <%@ Page Language=“C#” EnableViewState=“False” %> <input type=text size=3 id=wt maxlength=3 EnableViewState=truerunat=server >

Интернетээр холбогдох клиент-сервер ажиллагаа @PAGE директив • .аsрх хуудсанд нэг л @Раде директив бичиж болно. Энэ директив нь вэб хуудсын шинж чанар, сервер талд хуудас яаж хөрвүүлэгдэхийг тодорхойлдог.

Интернетээр холбогдох клиент-сервер ажиллагаа @PAGE директив

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас • Вэб хуудсын интерфэйс код (.аsрх файл), програмын логикууд нь тусдаа байж болно.

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас • . ASPх файлын ард код холбоход @Раgе директивт ассемблай эсвэл эх кодыг зааж ашигладаг. • Өмнөх жишээний <script> тааг доторхи кодыг хуудсаас тусанд нь bmicb.csфайлд байрлуулж @Раgе директивээр холбоё. <%@ Page Language=“C#” Src=“bmicb.cs” Inherits=“BMI” %>

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас - (bmicb.cs ) using System.Web.UI.HtmlControls; public class BMI : System.Web.UI.Page { // <input type=text id=htfrunat=server> protected HtmllnputTexthtf; // <input type=text id=htirunat=server> protected HtmllnputTexthti; // <input type=text id=wt runat=server> protected HtmllnputText wt; // <input type=text id=bmirunat=server> protected HtmllnputTextbmi; // <input type="button" VALUE="Submit Form" id=bmiButton // runat=server> protected HtmllnputButtonbmiButton; override protected void Onlnit(EventArgs e) { // Delegate to handle button click on client bmiButton.ServerClick += new EventHandler(getBMI); }

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас - (bmicb.cs ) protected void getBMI(object sender, System.EventArgs e) { decimal f = Convert.ToDecimal(htf.Value); decimal inch = Convert.ToDecimal(hti.Value); decimal w = Convert.ToDecimal(wt.Value); decimal totinches = f * 12 + inch; decimal h2 = totinches * totinches; decimal masslndex = (w * 703 * 10/ h2)/10; bmi.Value = masslndex.ToString”##.##”) ; } }

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас • ASP.NET-г сурахын тулд сервер талын контролууд яаж ажилладаг болохыг ойлгох хэрэгтэй. • Ялангуяа браузер дээр дүрслэгдэх контент болон үйлдлүүд сервер талд яаж боловсруулагддаг болохыг ойлгох хэрэгтэй. Доорх дүрсд хуудас болон кодын хоорондох хамаарлыг харуулсан байна. Сервер контрол бүр BMI классын талбар байдлаар зарлагдсан байна. Контролын утгууд сервер рүү илгээгдэхэд эдгээр талбарын утгууд болж оноогдоно.

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас – HTML контролууд ба тэдгээрийн тагууд

Интернетээр холбогдох клиент-сервер ажиллагаа • Ардаа кодтой хуудас - HTML контролууд ба тэдгээрийн тагууд

Интернетээр холбогдох клиент-сервер ажиллагаа • Сервер талд үзэгдэл барих • Бидний жишээнд Submit товчийг дарснаар БМИ тооцоолох хүсэлтийг сервер рүү илгээж хариу авна. Товчны . aspх код нь дараахь байдалтай харагдана. <INPUT TYPE=“button” VALUE=“Submit Form” id=bmiButtonrunat=server> • Үүнийг өмнөх жишээн дэх товчлуур тодорхойлсон таагтай харьцуулвал: <INPUT TYPE=“button” VALUE=“Submit Form” OnServerClick=“getBMI” id=bmiButtonrunat=server> • Өмнөх кодод хулганаар дарах үзэгдлийг барих метод (getBMI) тодорхойлсон байсан. Энэ жишээнд метод маань арын кодонд байрласан учраас түүнийг . aspх файл руу заах хэрэггүй. Үүнийг сервер талын код боловсруулна. • үзэгдэл боловсруулагч метод нь (getBMI) eventHandler төлөөлөгчийн тодорхойлолттой тохирох ёстой. Ингээд товчны idутгыг ашиглан ServerClickүзэгдлийг барих боловсруулагчийг бүртгэх боломжтой болно.

Интернетээр холбогдох клиент-сервер ажиллагаа • Сервер талд үзэгдэл барих bmiButton.ServerClick += new EventHandler(getBMi); • Товчлуур дээр дарахад форм сервер рүү илгээгдэх ба сервер товчлуур дарагдсан болохыг таньж тохирох үзэгдэл боловсруулагчийг дуудна. Эндээс форм дээр олон товчлуур байвал сервер үзэгдэл үүсгэгчийг яаж ялгах вэ? гэсэн асуулт гарна. • Үүнийг шийдэх зорилгоор үзэгдлийг дэгдээсэн контролын нэрийг _EVENTTARGET нэртэй далд талбарт хадгалж илгээдэг. Үүнийг ASP.NЕТ автоматаар гүйцэтгэнэ. • Хөгжүүлэгчийн үүрэг бол төлөөлөгч болон сервер талын үзэгдэл боловсруулагчийг үүсгэх явдал юм.

HomeWork • Бие даан судлах • @Import • @Assembly • @Register болон бусад дирещтивүүдийн талаар • Лабораторийн ажил: • Web application үүсгэн BMI бодох

ASP.NET веб форм, контролууд

ASP.NET веб форм, контролууд

Presentation Transcript