Vấn đề
Một trong những vấn đề lớn nhất trong các trang web là phải mất thời gian khá lâu để xử lý sau khi gửi. Có thể bạn sẽ gặp phải trang ASP.NET mất đến 30 giây để xử lý và người dùng tiếp tục đẩy nút gửi hai lần hoặc nhiều lần chỉ để có được thông tin nhanh hơn (có thể gây ra vấn đề dữ liệu). Một cách để giải quyết vấn đề này là vô hiệu hoá các nút gửi khi nó đã được gửi. Nhưng nếu bạn có nhiều hơn một nút trên mẫu của bạn?
Giải pháp
Trong bài viết này, tôi sẽ cho bạn thấy làm thế nào bạn có thể vô hiệu hóa tất cả các Form điều khiển ASP.NET trong post back và cũng cho thấy người dùng một cách tốt đẹp và thân thiện GIF động trong khi trang được gửi trở lại. Trong thực tế, bạn thậm chí có thể di chuyển hộp này ít nếu bạn đang chán phải chờ đợi nó.
Yahoo
Yahoo cho chúng ta cách làm việc đầy đủ với framework của JavaScript mà chúng ta có thể tải về và sử dụng trong các ứng dụng web của chúng ta là miễn phí! Vậy tại sao không tận dụng lợi thế của nó? Bạn có thể tìm thêm thông tin về nó
ở đây .
Trong bài viết này, tôi sẽ đối tượng Panel từ Yahoo YUI. Dưới đây là vài bước đơn giản để bắt đầu:
Tải về framework scripts
ở đây (v 2.7).
Framework phải ở trong thư mục gọi là YUI (tôi đã tải về các phiên bản 2.7.0). Sao chép thư mục này vào dự án web của bạn, dự án web của bạn sẽ giống như thế này:
Bây giờ chúng ta đã thiết lập Framework Yahoo trong dự án. Dưới đây là vài bước đơn giản để thiết lập trang ASP.NET để tận dụng lợi thế của đối tượng Panel(
ở đây ).
Dưới tag <head> HTML, gồm các tập tin JavaScript:
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css"/>
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css"/>
<!-- YUI Dependencies -->
<script type="text/javascript" src="yui/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="yui/build/container/container-min.js"></script>
<script type="text/javascript">
Chúng ta hãy tạo ra một vài chức năng JavaScript đơn giản: hãy bắt đầu khởi tạo Panel với tiêu đề "Đang tải, xin vui lòng chờ ..." và có hình động GIF gọi Wait.gif (bạn có thể thêm các thuộc tính nhiều hơn đến đối tượng này, đọc các tài liệu của Yahoo).
// sets up all of the YUI dialog boxes
function InitDialogs() {
DialogBox_Loading = new YAHOO.widget.Panel("waitBox",
{ fixedcenter: true, modal: true, visible: true,
width: "230px", close: false, draggable: true });
DialogBox_Loading.setHeader("Loading, please wait...");
DialogBox_Loading.setBody('<div style="text-align:center;">
<img src="images/Wait.gif" id="Image1" /></div>');
DialogBox_Loading.render(document.body);
}Hãy tạo ra hàm JavaScript, nó có trách nhiệm hiển thị "wait box" hay giấu nó dựa trên giá trị boolean. Đảm bảo rằng các trang ASP.NET là hợp lệ (tất cả các điều khiển xác nhận ASP.NET đã thành công) trước khi chúng ta hiển thị đối tượng Panel. Chúng ta có thể sử dụng cờ Page_IsValid trên client đến Check. Để có được cờ này, buộc phải gọi phương thức JavaScript được tạo ra bởi .NET gọi là Page_ClientValidate(); trên bằng cách ấn nút.
function Loading(b) {
if (b == true && Page_IsValid == true) {
DialogBox_Loading.show();
}
else {
DialogBox_Loading.hide();
}
}Trong ví dụ này, tôi đã thêm trình quản lý kịch bản AJAX(AJAX script manager) để tôi có thể sử dụng sự kiện pageLoaded() trên client side. Để đọc thêm về nó
ở đây. Nếu bạn không muốn sử dụng Framework Ajax, thì chúng ta cần phải đưa lên sự kiện tải trang trong JavaScript. Dưới đây là ví dụ về cách để làm điều đó: Hãy thêm trợ giúp chức năng JavaScript gọi bất kỳ chức năng mong muốn cho sự kiện tải trang. Tôi đã bao gồm mẫu trong dự án mẫu tải về của tôi bởi YahooWaitLoadOnButtonServerNoAjax.aspx . Đây là một ví dụ cụ thể làm điều đó với JavaScript:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// wire up the PageLoad function with our helper function addLoadEvent
addLoadEvent(function() {
pageLoad();
})Trong sự kiện Page Load, khởi tạo hộp thoại và không hiển thị nó:
function pageLoad() {
InitDialogs();
Loading(false);
}Bây giờ chúng ta đã sẵn sàng để tạo ra một vài điều khiển ASP.NET, hãy tạo ra hộp văn bản, trường bắt buộc Validator và button ASP.NET phải mất hơn 30 giây để xử lý. Chúng ta sẽ liên kết một vài JavaScript gọi đến button.
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="false" />
<div>
<asp:TextBox ID="txtFirstName" runat ="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="VtxtFirstName" ControlToValidate="txtFirstName"
ErrorMessage="error" runat="server"></asp:RequiredFieldValidator>
<asp:Button ID="btnPushLongJob" Text ="Start Long Job" runat="server"
OnClientClick="Page_ClientValidate();Loading(true);" OnClick="btnPushLongJob_Click"/>
</div>
</form>
</body>
Tôi gọi Page_ClientValidate() là hàm JavaScript được tạo ra bởi điều khiển Validator ASP.NET. Tôi đã buộc phải gọi nó để nó có thể thiết lập cờ Page_isValid cờ trên client side được sử dụng trong chức năng Loading JavaScript. Và tôi gọi Loading(true) để hiển thị hộp thoại.
Bây giờ chúng ta hãy cắm task tiến trình dài trong mã của chúng ta cho sự kiện của Onclick của button(nhớ thêm System.Threading tên miền không gian đến lớp Thread).
protected void btnPushLongJob_Click(object sender, EventArgs e)
{
Thread.Sleep(30000);
}Vấn đề: Dừng ảnh GIF trong Postbacks
Đôi khi mọi thứ hoạt động không như mong đợi. Đối với một số lý do, Internet Explorer đã quyết định làm cho mẫu chúng ta gặp một chút khó khăn và ngăn chặn tất cả các hình ảnh động GIF trong post back. Để sửa vấn đề này, cần đặt lại gốc của hình trong JavaScript.
Tôi đã thêm mã JavaScript sau:
function UpdateImg(ctrl, imgsrc) {
var img = document.getElementById(ctrl);
img.src = imgsrc;
}
Và tôi liên kết button ASP.NET trong sự kiện Page Load.
protected void Page_Load(object sender, EventArgs e)
{
btnPushLongJob.Attributes.Add("onclick",
"setTimeout(\"UpdateImg('Image1','images/Wait.gif');\",50);");
}
Đây là một mã trang đầy đủ:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="YahooWaitLoadOnButtonServerSide.aspx.cs"
Inherits="YahooWaitLoadOnButtonServerSide" %>
<!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 id="Head1" runat="server">
<title></title>
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css"/>
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css"/>
<!-- YUI Dependencies -->
<script type="text/javascript" src="yui/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="yui/build/container/container-min.js"></script>
<script type="text/javascript">
function pageLoad() {
InitDialogs();
Loading(false);
}
function UpdateImg(ctrl, imgsrc) {
var img = document.getElementById(ctrl);
img.src = imgsrc;
}
// sets up all of the YUI dialog boxes
function InitDialogs() {
DialogBox_Loading = new YAHOO.widget.Panel("waitBox",
{ fixedcenter: true, modal: true, visible: true,
width: "230px", close: false, draggable: true });
DialogBox_Loading.setHeader("Loading, please wait...");
DialogBox_Loading.setBody('<div style="text-align:center;">
<img src="images/Wait.gif" id="Image1" /></div>');
DialogBox_Loading.render(document.body);
}
function Loading(b) {
if (b == true && Page_IsValid == true) {
DialogBox_Loading.show();
}
else {
DialogBox_Loading.hide();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="false" />
<div>
<asp:TextBox ID="txtFirstName" runat ="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="VtxtFirstName"
ControlToValidate="txtFirstName" ErrorMessage="error"
runat="server"></asp:RequiredFieldValidator>
<asp:Button ID="btnPushLongJob" Text ="Start Long Job" runat="server"
OnClientClick="Page_ClientValidate();Loading(true);" OnClick="btnPushLongJob_Click"/>
</div>
</form>
</body>
</html>
Và đây là đoạn code đầy đủ C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
public partial class YahooWaitLoadOnButtonServerSide : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
btnPushLongJob.Attributes.Add("onclick",
"setTimeout(\"UpdateImg('Image1','images/Wait.gif');\",50);");
}
protected void btnPushLongJob_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
}
}Một số mẫu Script trong Project(bạn có thể tải về để xem):
- Hover qua link, hiển thị nội dung bên dưới:
- Hiển thị Hộp thoại(DialogBox)