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. jQueryjQuery 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 MVC và VS 2012. Có 4 cách sử dụng jQuery:
NuGetNuGetlà 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 PackagesDù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:
Package Manager ConsoleCho 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 NuGet và Enter 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 PackagesTrong Visual Studio 2019 Community, thư viện jQuery được cài đặt sẵn (bên cạnh thư viện Bootstrap) trong thư mục Scripts. Nếu muốn cài phiên bản mới nhất của jQuery có thể thực hiện như sau: Trong các Visual Studio phiên bản cũ hơn:
Khi hoàn tất cài đặt sẽ xuất hiện dấu check như sau:
Sử dụng thư viện jQueryChúng ta có thể dùng thư viện jQuery theo hai cách, tuỳ vào mục đích sử dụng:
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> Chú ý: Cần chọn đúng phiên bản jQuery đã cài đặt trong thư mục Scripts. 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ênTrong 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.
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
<div id="TableWrapper">
<table class="auto-style1" runat="server" id="FormTable">
...
</table>
</div>
Mã C# MessageSentPara.Visible = true;
jQuery và hợp lệNhư trong chương IXchú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:
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
<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 = "";
Mã C# void Application_Start(object sender, EventArgs e)
{
ScriptManager.ScriptResourceMapping.AddDefinition("jquery",
new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-3.1.1.min.js"
});
}
<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). Kết nối cơ sở dữ liệu > |
