Cách gọi JavaScript trong một Asp.net User Contro

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

<%@ 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>

<%@ Control Language="vb" %>

<%-- Server-side code. --%>

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. --%>

window["<%= Me.GreeterName %>"] = function () {

var messageId = "<%= divMessage.ClientID %>";

var messageElement = document.getElementById(messageId);

messageElement.style.display = "block";

};

</script>

<%-- Markup. --%>

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.

<%@ 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>

<%@ 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. --%>

(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!

Cách gọi JavaScript trong một Asp.net User Control

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu