ASP.NET ႏွင့္ jQuery
2010 အတြင္းက အေမရိကန္ႏိုင္ငံ ေလာ့အိန္းဂ်လိစ္မွာ က်င္းပသြားတဲ့ MIX 2010 conference မွာ Microsoft က သတင္းတစ္ခု ထုတ္ျပန္ ခဲ့ပါတယ္။ အဲဒါကေတာ့ “Microsoft Loves jQuery” ပါ။ Microsoft က သူတို႔ ရဲ႔ နည္းပညာ တစ္ခုျဖစ္တဲ့ Microsoft AJAX Client Library ကေန jQuery ကို ေျပာင္းဖို႔ ေျခလွမ္း လွမ္းလိုက္တာလည္း ျဖစ္ပါတယ္။ jQuery core team တစ္ခုကို ဖြဲ႔ထားျပီး templating, Script Loader, Data Binding ေတြအတြက္ ဆက္လက္ အေကာင္အထည္ ေဖာ္သြားမယ္လို႔ ေျပာပါတယ္။ အနာဂတ္ရဲ႕ Client side script ေတြမွာ jQuery ကို အသံုးျပဳျပီးေတာ့ Server side script ေတြမွာေတာ့ AJAX Control TooolKit ကိုပဲ ဆက္လက္ အသံုးျပဳမယ္လို႔ Microsoft ကေတာ့ ထုတ္ေျပာ လိုက္ပါျပီ။ Asp.net ရဲ႔ Team leader ျဖစ္တဲ့ Scottgu ကိုယ္တိုင္က Asp.net MVC, Asp.net Web Form ေတြမွာ jQuery ေတြကို Fully Supported လုပ္ပါျပီလို႔ ေျပာခဲ့ပါတယ္။ VS 2010 မွာဆိုရင္ jQuery ကို တခါတည္း integrated အျဖစ္ တြဲပါလာပါျပီ။ jQuery site မွာလည္း Microsoft Visual Studio အတြက္ Intellisense ကို support လုပ္တဲ့ documentation ေတြ ေဒါင္းလုပ္ ရယူႏိုင္ပါတယ္။
Loading jQuery
Asp.net Web Form, Asp.net MVC ေပၚမွာ jQuery library ကို Loading လုပ္တဲ့ နည္းလမ္းေတြ အမ်ိဳးမ်ိဳး ရွိပါတယ္။ ရိုးရိုး Script tag ေတြနဲ႔ ေရးလို႔ ရသလို Script Manager control ေတြ ယူျပီးလည္း ေရးလို႔ရပါတယ္။
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
OR
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.js" />
</Scripts>
</asp:ScriptManager>
Writing Simple jQuery example
VS 2010 မွာ ASP.NET Web Application Project ယူလိုက္ရံုနဲ႔ jQuery Library ကို သူ႔ အလိုအေလွ်ာက္ Project ထဲမွာ ေပါင္းထည့္ ၿပီးသားပါ။
jQuery library ကို reference ယူဖို႔အတြက္ လြယ္လြယ္ကူကူပါပဲ။ Solution Explorer ထဲမွာ ရွိတဲ့ jquery-1.4.1.js ကို Drag လုပ္ျပီး MainContent ေအာက္နားမွာ Drop လုပ္လိုက္ပါ။ ေနာက္တနည္းအေနနဲ႔ ကိုယ့္ဟာကို
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
လို႔ ေရးလိုက္ရင္လည္း ျဖစ္ပါတယ္။
အဲဒီ ေအာက္မွာ ဆက္ေရးၾကည့္ရေအာင္
<script type="text/javascript">
$(document).ready(function () {
$('p').css('background-color', 'RED');
})
</script>
Coding အျပည့္အစံုက ဒီလိုပါ။
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="WebApplication2._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p').css('background-color', 'RED');
})
</script>
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
Web Application ကို run ၾကည့္ရင္ ေအာက္ကပံုလုိေတြ႔ရမွာပါ။
အဲဒီမွာ paragraph p tag ေတြရဲ႔ background ေတြမွာ css style မထည့္ထားပဲနဲ႔ အနီေရာင္ ေနာက္ခံေတြ ျဖစ္ေနတာ သတိထားမိၾကမွာပါ။ jQuery နဲ႔ p tag ေတြရဲ႔ ေနာက္ခံ အေရာင္ကို အနီေရာင္ေျပာင္းထားလို႔ပါ။ jQuery မွာ $ sign ဟာ ေတာ္ေတာ္ေလး အသံုး၀င္ပါတယ္။ $ ဟာ jQuery ရဲ႔ function ပါ။ jQuery object retun ျပန္ပါတယ္။ function ရဲ႔ parameter အျဖစ္ ပံုစံအမ်ိဳးမ်ိဳးကို အသံုးျပဳလို႔ရပါတယ္။
$('p').css('background-color', 'RED');
jQuery ရဲ႔ function ျဖစ္တဲ့ $ ထဲကို parameter p ထည့္ပါတယ္။ p ဆိုတာ page ထဲမွာ ရွိသမွ် paragraph p tag အားလံုးကို ဆုိလိုတာပါ။ ျပီးေတာ့ css function ကိုထပ္ေခၚပါတယ္။ parameter အျဖစ္ background-color နဲ႔ RED ကို ထည့္လိုက္ပါတယ္။ အဲဒီ တစ္ေၾကာင္းလံုးအလုပ္လုပ္သြားတဲ့အခါ page ထဲမွာ ရွိသမွ် p tag ေတြရဲ႔ background ေတြဟာ အနီေရာင္ေျပာင္းသြားပါတယ္။ html code ကို နည္းနည္း ျပင္ၾကည့္ရေအာင္။
<h2 id="myheader">
Welcome to ASP.NET!
</h2>
h2 tag ကို id သတ္မွတ္ေပးလိုက္တာပါ။ myheader လို႔အမည္ေပးထားပါတယ္။ jQuery ကိုလည္း ေအာက္ကလို ျပင္ၾကည့္လိုက္ရေအာင္။
<script type="text/javascript">
$(document).ready(function () {
$('#myheader').css('background-color', 'RED');
})
</script>
$ function ထဲကို parameter အျဖစ္ p အစား #myheader လို႔ျပင္လုိက္တာပါ။ # ဆိုတာ ID ကို ကုိယ္စားျပဳတယ္ဆိုတာ css ေရးဖူးသူတိုင္း သိၾကမွာပါ။ တနည္းအားျဖင့္ေျပာရရင္ h2 tag ရဲ႔ id myheader ကို parameter အျဖစ္ထည့္ေပးလိုက္တာပါ။ save လုပ္ျပီး run ၾကည့္လိုက္ရင္ p tag ေတြမွာ ေနာက္ခံ အနီေရာင္ေတြ ေပ်ာက္သြားျပီးေတာ့ h2 tag နဲ႔ ေရးထားတဲ့ Welcome to ASP.NET! ရဲ႔ ေနာက္ခံဟာ အနီေရာင္ ေျပာင္းသြားမွာပါ။
$(document).ready(function (){…..})
အဲဒီတစ္ေၾကာင္းကေတာ့ html page ready ျဖစ္မွ သူ႔ထဲက jQuery function ေတြ အလုပ္လုပ္္မယ္လို႔ ဆိုလိုတာပါ။ ကြ်န္ေတာ္တို႔ coding ကို ထပ္ျဖည့္ ေရးလိုက္ရေအာင္။
<div id="div1">Click Me</div>
Div tag တစ္ခုကို ထပ္ျဖည့္လိုက္တာပါ။ jQuery မွာလည္း ျပင္ေရးပါမယ္။
<script type="text/javascript">
$(document).ready(function () {
$('#div1').click(function () {
$('p').toggle('slow');
});
})
</script>
ClickMe ကို ႏွိပ္ၾကည့္ရင္ p tag ေတြဟာ ေပၚတလွည့္ ၊ ေပ်ာက္တလွည့္ အလုပ္လုပ္ေနမွာပါ။
$('#div1').click(function () {…});
အဲဒီတစ္ေၾကာင္းရဲ႔ အဓိပၸာယ္က div1 ကို click ႏွိပ္ရင္… ဆိုတဲ့ ၊ တနည္းအားျဖင့္ click event ကို ဆိုလိုတာပါ။
$('p').toggle('slow');
ဒီတစ္ေၾကာင္းကေတာ့ paragraph p tag ေတြဟာ ေပၚတလွည့္ ၊ ေပ်ာက္တလွည့္ လုပ္မယ္လို႔ ေျပာတာပါ။ Coding အျပည့္အစံုက ဒီလိုပါ။
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="WebApplication2._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div1').click(function () {
$('p').toggle('slow');
});
})
</script>
<h2 id="myheader">
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<div id="div1">Click Me</div>
</asp:Content>
Server Side Control and jQuery
Server Side Control ေတြဟာ Server မွာ processing လုပ္ျပီး HTML Tag ေတြအျဖစ္ Render ျပန္လုပ္တဲ့အခ်ိန္မွာ ေတာ္ေတာ္ေလးကို ရွဳပ္ေထြးတာ ေတြ႔ရပါတယ္။ div tag ရဲ႔ ေအာက္မွာ Asp.net server control တစ္ခုျဖစ္တဲ့ asp.net button control ကို အသစ္ ယူလိုက္ပါမယ္။
<asp:Button ID="Button1" runat="server" Text="Button" />
Button ID ကို Button1 လို႔ ေပးထားပါတယ္။ save လုပ္ျပီး run ၾကည့္လိုက္ရင္ Button control တစ္ခု ပိုလာတာကို ေတြ႔ရမွာပါ။ Brower ကေန page source ကိုၾကည့္လုိက္ရင္ asp.net button control ကို HTML tag အျဖစ္ ေအာက္ကလို ေတြ႔ရမွာပါ။
<input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" />
Asp.net button control ကို html input tag submit အျဖစ္ အစားထိုး လိုက္ပါတယ္။ id မွာေတာ့ ကြ်န္ေတာ္တို႔ ေမွ်ာ္လင့္ထားသလို Button1 မဟုတ္ပါဘူး။ MainContent_Button1 ပါ။ Web Form ေတြကို Master page ေတြနဲ႔ တြဲသံုးတဲ့ အခါမွာ ContentPlaceHolder ေတြအသံုးျပဳရပါတယ္။ Button1 ဟာ ContentPlaceHolder တစ္ခုျဖစ္တဲ့ MainContent ထဲမွာ ရွိတဲ့အတြက္ HTML code အျဖစ္ server ကေန generate လုပ္တဲ့အခါမွာ MainContent ကို ထည့္ေပါင္း ေပးလိုက္တာပါ။ အဲဒါေၾကာင့္ ID= Button1 ဟာ MainContent_Button1 အျဖစ္ ေျပာင္းလဲ သြားတာပါ။ ဒါဆိုရင္ ကြ်န္ေတာ္တို႔ jQuery နဲ႔ Button1 ေနာက္ခံ အေရာင္ကို အနီေရာင္ ေျပာင္းၾကည့္ရေအာင္။
$('#MainContent_Button1').css('background-color', 'RED');
ဒါက ContentPlaceHolder နဲ႔ Control ေတြက နည္းေနေသးလို႔ အဆင္ေျပ သလိုလို ျဖစ္ေနတာပါ။ တကယ္လို႔ ContentPlaceHolder နဲ႔ Contorl ေတြမ်ားလာရင္ ဘယ္ဟာက ဘယ္တခုေအာက္မွာဆိုတာ ခြဲျခားဖို႔ ခက္ပါလိမ့္မယ္။ အဲဒီအတြက္ အဆင္ေျပဆံုး နည္းလမ္းကေတာ့ ClientID ဆိုတဲ့ properties ကို အသံုးျပဳဖို႔ပါပဲ။
$('#<%:Button1.ClientID %>').css('background-color', 'RED');
jQuery မွာ အေပၚကလို ျပင္ေရးလိုက္ရံုနဲ႔ အဆင္ေျပသြားပါျပီ။ <%:Button1.ClientID%> ဆိုတာက Button1 ကို HTML tag အျဖစ္ generate လုပ္ရင္ အသံုးျပဳမယ့္ ID ကို ဆုိလိုတာပါ။
Coding အျပည့္အစံုက ဒီလိုပါ။
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="WebApplication2._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div1').click(function () {
$('p').toggle('slow');
});
$('#<%:Button1.ClientID %>').css('background-color', 'RED');
})
</script>
<h2 id="myheader">
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<div id="div1">Click Me</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Content>
jQuery CDN
တကယ္လို႔ jQuery library ေတြကို ကိုယ့္ရဲ႔ local ထဲကေန မသံုးခ်င္ဘူးဆိုရင္ Internet ေပၚမွာ jQuery တင္ထားတဲ့ site ေတြ ဒုနဲ႔ေဒးပါ။ Google,Microsoft,jQuery web site အစရွိတဲ့ site ေတြေပၚကေန reference လုပ္ယူလို႔ရပါတယ္။ ဒါေပမယ့္ security အရ ကိုယ္က Trusted ျဖစ္တယ္ဆိုတဲ့ site ေပၚက ယူတာ ပိုေကာင္းပါတယ္။
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.mini.js
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js
Facebook comments:
