Summary of DirectEvents
(Tóm tắt các sự kiện trực tiếp)Các sự kiện mỗi ví dụ sau sẽ kích hoạt yêu cầu sự kiện Ajax lên máy chủ và trả về một thông báo cho trình duyệt.
Ví dụ 1 các bạn xem ở đây nhé! Bin sẽ giải thích cho các bạn hiểu từng phần trong ví dụ!
Đầu tiên Bin sẽ gửi cho bạn xem code của tất cả các ví dụ nhé!
<%@ Page Language="C#" %> <%@ Import Namespace="System.Threading" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server">
// Hàm trên server xử lý các sự kiện protected void UpdateTimeStamp(object sender, DirectEventArgs e) { X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show(); } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DirectEvents Summary - Ext.NET Examples</title> <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .box { width : 100px; height : 50px; border : 1px solid #000; cursor : pointer; text-align : center; margin-bottom : 4px; background-color : white; } .red { color : #fff; cursor : default; background-color : red; } .blue { color : #fff; background-color : blue; } </style> </head> <body> <form runat="server"> <ext:ResourceManager runat="server"> <CustomDirectEvents> <ext:DirectEvent Target="Button2" OnEvent="UpdateTimeStamp" /> <ext:DirectEvent Target="Button3" OnEvent="UpdateTimeStamp" /> <ext:DirectEvent Target="Span1" OnEvent="UpdateTimeStamp" /> <ext:DirectEvent Target="${div.box:not(div.red)}" OnEvent="UpdateTimeStamp" /> </CustomDirectEvents> </ext:ResourceManager> <h1>Summary of DirectEvents</h1> <p>The action of each of the following samples will trigger a DirectEvent Ajax request to the server and return a Notification Window to the browser.</p>
// Ví dụ Button 1: <h2>Add a <Click> DirectEvent to <ext:Button></h2> <ext:Button ID="Button1" runat="server" Text="Click Me" OnDirectClick="UpdateTimeStamp" />
// Ví dụ Button 2: <h2>Add a <Click> DirectEvent with confirmation to <ext:Button></h2> <ext:Button ID="Button4" runat="server" Text="Click Me"> <DirectEvents> <Click OnEvent="UpdateTimeStamp"> <Confirmation ConfirmRequest="true" Title="Title" Message="Sample Confirmation Message..." /> </Click> </DirectEvents> </ext:Button>
// Ví dụ Button 3:
<h2>Add a Click DirectEvent to <asp:Button></h2> <asp:Button ID="Button2" runat="server" Text="Click Me" />
// Ví dụ Button 4: <h2>Add a Click DirectEvent to a standard html <input> button</h2> <input id="Button3" type="button" value="Click Me" />
// Ví dụ Button 5:
<h2>Add a Click DirectEvent to html <span> element</h2>
<span id="Span1" style="cursor: pointer;">*Click Me*</span>
<h2>Add a Click DirectEvent to several html <div> elements by using a Target Query</h2>
<p>By using a Target Query we can attach the same DirectEvent (or Listener) to several html elements or Controls and fire a server-side event.</p>
<p>The target(s) do not require an "id" and do not need a runat="server" attribute. The elements can be any html element available on the Page.</p>
<p>The following Target Query will select all <div> elements on the Page that contain the css class "box", but do not contain the css class "red".</p>
<div class="box">Click Me</div>
<div class="box red">Not Me</div>
<div class="box blue">Click Me too!</div>
</form>
</body>
</html>
Nhìn code choáng quá phả không nào! Nhưng các bạn đừng lo, đã có Bin rồi!
Bây giờ Bin giải thích từng phần trong code, sau khi giải thích code xong chắc chắc bạn sẽ nói code này chỉ là "ruồi" mà thôi!
Nào bây giờ Bin và các bạn cúng ta đi từng ví dụ nhé!
1. Ví dụ đầu tiên:
