JavaScript là ngôn ngữ hướng client rất mạnh dùng trong lập trình web, tuy nhiên, nó vẫn có nhiều hạn chế gây khó khăn trong việc lập trình. Các nhà phát triển web đã bỏ nhiều công sức tạo ra các thư viện dựa trên JavaScript để làm cho việc lập trình trở nên hiệu quả và ít tốn sức hơn.

jQuery

jQuery là thư viện JavaScript, được giới thiệu lần đầu tiên bởi John Resig vào năm 2006 và đến nay đã trở thành một trong những nền tảng phổ biến nhất hiện nay. Microsoft đã tích hợp jQuery vào nền tảng ASP.NET MVCVS 2012.

Có 4 cách sử dụng jQuery:

  • Tải mã nguồn thư viện jQuery từ website jquery.com.
  • Dùng NET Web Forms Site template với thư mục Script chứa các tập tin jQuery cần thiết.
  • Dùng CDN (Content Delivery Network).
  • Dùng NuGet, một bộ quản lí gói thư viện mã nguồn mở (Library Package Manager).

NuGet

NuGet là một bộ quản li gói thư viện được phát triển đầu tiên bởi Microsoft nhưng bây giờ nó đã trở thành một dự án mã nguồn mở (open source project). NuGet là phần mở rộng của VS (kể từ VS 2012) và với nó, chúng ta có thể dễ dàng thêm, xoá, cập nhật các thư viện bên ngoài vào dự án Visual Studio, trong đó có jQuery. Chúng ta có thể tìm hiểu chi tiết về NuGet tại website nuget.org.

Để quản lí các thư viện với NuGet chúng ta có hai cách là dùng hộp thoại Manage NuGet Packages và dùng Pakage Manager Console.

 Hộp thoại Manage NuGet Packages

Dùng hộp thoại Mange NuGet Packages bằng cách nhấp chuột phải vào Site trong cửa sổ Solution Explorer và chọn Manage NuGet Packages:

Khung bên trái có một số tuỳ chọn sau:

  • Innstalled packages: hiển thị danh sách các gói thư viện đã được cài trong website.
  • Online: cho phép tìm kiếm các gói trực tuyến qua Internet.
  • Updates: cập nhật các phiên bản mới nhất cho các gói đã được cài đặt.
  • Recent packages: danh sách các gói được dùng trước đó.

Package Manager Console

Cho phép quản lí các gói thông qua giao diện dòng lệnh (command line). Sử dụng bằng cách vào Tools > Library Package Manager > Package Manager Console

Nếu chúng ta gõ lệnh (như hướng dẫn) get-help NuGetEnter sẽ hiển thị danh sách các lệnh dùng trong NuGet:

Để tìm hiểu chi tiết hơn các lệnh này, chúng ta vào http://docs.nuget.org. Dùng Package Manager Console tuy có nhiều lợi ích nhưng không thân thiện, phổ biến vẫn là dùng hộp thoại Manage NuGet Packages.

Cài đặt các gói bằng Manage NuGet Packages

  • Mở hộp thoại Manage NuGet Packages. Chọn tuỳ chọn Online khung bên trái (lưu ý phải có kết nối Internet)

  • Chọn jQuery và nhấn Install

Khi hoàn tất cài đặt sẽ xuất hiện dấu check như sau:

  • Đóng hộp thoại và mở thư mục Scripts trong cửa sổ Solution Explorer sẽ thấy xuất hiện các tập tin .js:

Sử dụng thư viện jQuery

Chúng ta có thể dùng thư viện jQuery theo hai cách, tuỳ vào mục đích sử dụng:

  • Dùng trong các trang web hay user controls.
  • Dùng trong trang master, do đó, có thể áp dụng cho tất cả các trang trong website.

Liên kết đến thư viện jQuery

Nhúng liên kết đến thư viện jQuery vào trang, controls,… bằng thẻ <script>. Ví dụ nhúng thư viện jQuery vừa thêm vào VS trong một trang nào đó:

<script src="/Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>

Nhúng thư viện jQuery vào ScriptManager control:


<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Path="~/Scripts/jquery-3.1.1.min.js" />

</Scripts>

</asp:ScriptManager>

Một cách khác là dùng CDN (Content Delivery Network) của Microsoft hay Google.

Thực hành tạo trang jQuery đầu tiên

Trong bài thực hành này chúng ta sẽ nhúng thư viện jQuery vào trang Frontend.master và vì vậy tất cả các trang đều dùng được jQuery.

  • Mở trang Frontend.master trong thư mục MasterPages ở chế độ Source, tìm đến ScriptManager và thêm <script> như sau:

  • Lưu và đóng trang master. Tạo một trang tên jquery.aspx trong thư mục Demos (lưu ý chọn MyBasePageTitlejQuery Demo).
  • Mở trang jquery.aspx ở chế độ Source và thêm đoạn mã jQuery sau vào phần cpMainContent:

  • Lưu và Ctrl + F5. Giao diện nội dung sẽ có màu xanh (green), khi chúng ta nhấn button sẽ xuất hiện hiệu ứng và xuất hiện màu đỏ:

Sau khi nhấn button

Ở bài thực hành trên chúng ta đã biết cách nhúng thư viện jQuery vào trang và sử dụng một vài đoạn mã jQuery cơ bản. Trong bài thực hành kế tiếp chúng ta sẽ tạo hiệu ứng động cho Contact Form trong website của chúng ta.

Tạo hiệu ứng động cho Contact Form

  • Thêm một đoạn văn bản (thẻ p) phía dưới Label Message trong ContactForm.ascx ở chế độ Source. Đoạn text này (Ví dụ: Cảm ơn thông tin của bạn. Chúng tôi sẽ liên hệ lại bạn nếu cần thiết.) sẽ hiển thị sau khi thông tin trong Contact Form được gửi đến server. Chú ý các thuộc tính thẻ p của đoạn văn bản được thêm vào:

  • Thêm thuộc tính CssClass với giá trị là Attention (là một lớp CSS chúng ta sẽ tạo trong chốc lát) vào Label (Message) ở trên:

  • Bao bọc toàn bộ bảng trong thẻ <div> với thuộc tính id có giá trị là TableWrapper và chúng ta sẽ tạo hiệu ứng cho bảng thông qua <div>:





<div id="TableWrapper">



<table class="auto-style1" runat="server" id="FormTable">

...

</table>



</div>



  • Ngay trên thẻ </script> thêm đoạn mã JavaScript thực thi phương thức pageLoad() sau khi một phần nội dung trang cập nhật (với UpdatePanel):

  • Thêm đoạn mã jQuery vào cuối file ContactForm.ascx. Đoạn mã này tạo hiệu ứng với Table (phương thức slideUp) khi thông tin người dùng được gửi đến server (submit):

  • Chuyển đến file ContactForm.ascx.vb và thêm đoạn code sau vào SendButton_Click:

  • Lưu tất cả và đóng lại. Thêm đoạn CSS định nghĩa lớp Attention vào cuối hai file Monochrome.cssDarkGrey.css:

  • Lưu tất cả. Mở trang Contact.aspx (hoặc mở một trang bất kỳ và chọn menu About > Contact Us) từ thư mục AboutCtrl + F5. Nhập thông tin vào Form, nhấn Send và xem hiệu ứng xảy ra.

jQuery và hợp lệ

Như trong chương IX chúng ta đã tìm hiểu về hợp lệ dữ liệu người dùng và các validation controls. Các validation controls hoạt động bằng cách sinh ra các mã JavaScript được thêm đến trang. Điều này làm cho trang trở nên cồng kềnh với nhiều đoạn mã lặp lại.

Các nhà phát triển ASP.NET đã khắc phục tình trạng này bằng cách tận dụng sức mạnh của jQuery và tạo ra một khái niệm mới gọi là unobtrusive JavaScript hay unobtrusive validation, một nơi mà các đoạn mã được tách riêng với cấu trúc và nội dung trang, đồng thời dùng thư viện jQuery (thay vì JavaScript) làm cho kích thước dữ liệu của trang giảm đáng kể.

Để sử dụng unobtrusive validation với jQuery, chúng ta thực hiện hai bước:

  • Khai báo unobtrusive validation trong Web.config.
  • Đăng kí thư viện jQuery với ScriptManager trong trong file Global.asax.

Chúng ta đã làm việc với các sự kiện như Click hay Load chỉ dành cho các controls hay trang aspx cụ thể, tuy nhiên, trong ASP.NET có những sự kiện toàn cục được dành cho toàn bộ ứng dụng hay website. Ví dụ, khi ứng dụng ASP.NET bắt đầu thì sự kiện Application_Start được kích hoạt, bên cạnh các sự kiện như BeginRequest hay Application_Error. Khi các sự kiện toàn cục được kích hoạt, các đoạn mã của chúng sẽ được thực thi và các đoạn mã này được đặt trong tập tin Global.asax. Chúng ta sẽ tìm hiểu cách thêm Global.asax và khai báo unobtrusive validation qua bài thực hành dưới đây.

Thực hành với Global.asax và unobtrusive validation

  • Chúng ta sẽ xem cách các validation controls phát sinh code JavaScript như thế nào bằng cách chọn trang Contact.aspxCtrl + F5. Trên trình duyệt web (Chrome), nhấp chuột phải chọn View page source sẽ thấy các đoạn mã HTMLJavaScript. Tìm đến một validation control nào đó, chẳng hạn RequireFieldValidator1, sẽ thấy mã HTML như sau:
<span id="cpMainContent_ContactForm_RequiredFieldValidator1" class="ErrorMessage" style="visibility: hidden;">*</span>

Và phát sinh mã JavaScript tương ứng (cuộn xuống phía dưới Chrome):

var cpMainContent_ContactForm_RequiredFieldValidator1 = document.all ? document.all["cpMainContent_ContactForm_RequiredFieldValidator1"] : document.getElementById("cpMainContent_ContactForm_RequiredFieldValidator1");
cpMainContent_ContactForm_RequiredFieldValidator1.controltovalidate = "cpMainContent_ContactForm_Name";
cpMainContent_ContactForm_RequiredFieldValidator1.errormessage = "Nhập tên bạn";
cpMainContent_ContactForm_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
cpMainContent_ContactForm_RequiredFieldValidator1.initialvalue = "";
  • Trở lại VS, nhấp chuột phải vào Site trong cửa sổ Solution Explorer chọn Add > Add New Item > Global Application Class. Giữ nguyên tên file là Global.asax và nhấn Add. Tập tin Global.asax trông như thế này:

  • Thêm đoạn mã đăng kí thư viện jQuery đến ScriptManager vào trong phương thức Application_Start:

  • Lưu và đóng Global.asax. Để khai báo unobtrusive validation, mở Web.config và tìm đến <appSettings> và thay đổi giá trị của thuộc tính value trong thẻ <add> từ None đến WebForms

  • Mở trang master (Frontend.master), tìm đến ScriptManager và thay đổi nội dung trong <Scripts> như sau:

  • Lưu tất cả. Mở trang Contact.aspxCtrl + F5. Nhập một vài thông tin vào form và nhấn Send. Chờ khi các hiệu ứng kết thúc, nhấp chuột phải vào Chrome và chọn View page Source, tìm đến RequireFieldValidator1 xem mã HTML:
<span id="cpMainContent_ContactForm_RequiredFieldValidator1" class="ErrorMessage" style="visibility: hidden;">*</span>

Cuộn trình duyệt xuống dưới tìm đoạn mã JavaScript (như bước 1) nhưng đoạn mã này không còn tồn tại. Thay vì vậy, chúng ta sẽ thấy các <script> ở đầu trang (bắt đầu bằng /ScriptResource.axd).