Trong Asp.net, cách tốt nhất để gọi một hàm ở server-side là thông qua postback. Tuy nhiện chúng ta cũng có một vài cách khác nhau để gọi một đoạn mã Javascript mà không cần sử dụng postback để làm.
Và bài ngày hôm nay tôi sẽ hướng dẫn cho bạn một cách như thế. Ở đây, chúng ta có một User control, giả sử tên là Greeter để đưa ra 1 đoạn thông báo cho người dùng chẳng hạn. Trong ví dụ này, chúng ta có một trang Default để gọi một vài đoạn Javascript dựa trên sự kiện click vào một phần tử nào đó của page. Đoạn Javascript sẽ gọi ra một hàm Javascript nằm trong Control Greeter với đoạn mã như sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<%@ Control Language="vb" %> <%-- Server-side code. --%> <script runat="server"> Private _greeterName As String = Nothing Public ReadOnly Property GreeterName As String Get If _greeterName Is Nothing Then _greeterName = "Greeter_" + Guid.NewGuid.ToString("N") End If Return _greeterName End Get End Property </script> <%-- JavaScript. --%> <script type="text/javascript"> window["<%= Me.GreeterName %>"] = function () { var messageId = "<%= divMessage.ClientID %>"; var messageElement = document.getElementById(messageId); messageElement.style.display = "block"; }; </script> <%-- Markup. --%> <div runat="server" id="divMessage" style="display: none;"> Hello </div> |
Greeter.ascx bao gồm một thẻ div ẩn mang thông tin là dòng chữ “hello”. Các bạn chú ý trong Control trên, có 2 đoạn Javascript. Đoạn thứ nhất khai báo chạy trên server, nó là 1 hàm chỉ đọc có tên GreeterName. Hàm thứ hai là đoạn Javascript chạy trên Client Side để gọi ra hàm GreeterName bên trên. Hàm này có nhiệm vụ là tìm thẻ có ID=divMessage và gán cho nó thuộc tính display = block. Tức là cho hiện thẻ div đó ra.
Và trang Default.aspx có nội dung như bên dưới.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<%@ Page Language="vb" %> <%@ Register Src="~/Greeter.ascx" TagPrefix="people" TagName="greeter" %><!DOCTYPE html> <%-- The doctype is on the above line to prevent preceding whitespace, which some browsers dislike. --%> <html> <head> <title>Greeter Test</title> </head> <body> <%-- Markup. --%> <div> <a runat="server" id="aClicker" href="#">Click!</a> </div> <people:greeter runat="server" ID="doorman" /> <%-- JavaScript. --%> <script type="text/javascript"> (function () { var clickerId = "<%= aClicker.ClientID %>"; var clickerElement = document.getElementById(clickerId); clickerElement.onclick = function () { var fnName = "<%= doorman.GreeterName%>"; var fnHandle = window[fnName]; fnHandle(); return false; }; })(); </script> </body> </html> |
File này làm nhiệm vụ gọi UserControl kia ra và thực thi sự kiện click của người dùng.
Vậy là xong, đây cũng là một cách khác để bạn có thể tùy biến sao cho linh hoạt việc sử dụng Javascript và UserControl trong Project của mình. Chúc bạn thành công!
