reset and begin
Showing posts with label asp.net. Show all posts

12/04/2010

khởi tạo kết nối tới SQL Server C#

khởi tạo kết nối tới SQL Server
SqlConnection sqlConn = new SqlConnection("Server=SQLDB;uid=sa;pwd=password;database=pubs");


Insert
SqlCommand insCom = new SqlCommand("INSERT INTO employee VALUES ('AR D4372','Andrew','P','Batter','61000876','1999-10-11T00:00:00')",sqlConn);


Update
SqlCommand updCom = new SqlCommand("UPDATE employee SET job_id=1 WHERE fname='Pedro'",sqlConn);


Delete
SqlCommand delCom = new SqlCommand("DELETE FROM employee WHERE fname='Andrew'",sqlConn);
delCom.Connection.Open();
delCom.ExecuteNonQuery();
delCom.Connection.Close();

4/24/2010

tối ưu website

Tốc độ hiển thị trang web phụ thuộc vào nhiều yếu tố như tốc độ đường truyền, tốc độ xử lý của server, nội dung trang web và tốc độ xử lý của máy tính client. Để tăng tốc độ hiển thị trang web, có thể chia làm 3 phần để xử lý như sau:

- Tại server: Giảm thiểu những tính toán trên server, tối ưu CSDL, tạo bộ đệm, tối ưu chương trình...

- Đường truyền: Giảm thiểu dữ liệu truyền trên mạng bằng cách giảm kích thước các file hình, giảm yêu cầu trao đổi dữ liệu giữa server và client...

- Tại máy client: tối ưu mã html để trình duyệt hiển thị nhanh.

Với chiến lược trên, dưới đây là 10 thủ thuật có thể giúp tăng tốc độ hiển thị trang web.

1. Dùng CSS định nghĩa thuộc tính của các đối tượng trong trang web

Việc dùng CSS sẽ giúp cải thiện tốc độ tải trang web đáng kể. Trình duyệt sẽ chỉ tải file CSS về máy client một lần, những lần sau các trang web sử dụng file CSS này sẽ lấy ngay tại client. Việc tập trung toàn bộ định nghĩa thuộc tính vào file CSS giúp cho đoạn mã HTML trở nên ngắn gọn, rõ ràng đồng thời giúp giảm kích thước của trang web.

Một điểm tiện lợi nữa khi dùng file CSS là bạn có thể thay đổi màu sắc, giao diện của những trang web một cách nhanh chóng thông qua việc chỉnh sửa những thuộc tính trong file CSS.

2. Viết Javascript trên một trang và dùng cho nhiều trang

Điều này tương tự như kỹ thuật dùng file CSS cho mọi trang web. Ví dụ đoạn mã Javascript hiển thị quảng cáo dùng cho nhiều trang, nếu bạn viết toàn bộ mã Javascript trong một file rồi khai báo dùng nó ở các trang như sau:



Giống như file CSS, trình duyệt chỉ tải về file này một lần.

3. Dùng AJAX

AJAX là chữ viết tắt của Asynchronous JavaScript And XML, đây là kỹ thuật dùng Javascript và XML để tối ưu việc trao đổi dữ liệu giữa client và server. Giả sử trang web của ban chứa rất nhiều thông tin, trong đó có một phần chứa 2 combobox: Quốc Gia và Thành Phố. Khi bạn chọn một quốc gia trên combobox 1, thì trong combobox 2 các thành phố tương ứng sẽ hiện ra. Theo cách thông thường, khi chọn một quốc gia, thông số của nó sẽ được gửi về server. Tại đây nội dung của trang web được tính toán lại rồi được gửi trả cho client với combobox2 chứa các thành phố của quốc gia được chọn. Như vậy chỉ một phần nhỏ trong trang web thay đổi mà phải tải về toàn bộ trang web và vẽ lại. Với AJAX, sau khi xử lý, server chỉ gửi trả kết quả cho client danh sách các thành phố chứ không phải toàn bộ trang web. Điều này cải thiện rất nhiều tốc độ đáp ứng của trang web.

4. Mạnh dạn bỏ những gì không cần thiết

Bỏ file flash, audio nếu chúng không thực sự cần thiết. Ngoài ra, đối với người lập trình web, việc sử dụng control của HTML thay cho server control của ASP/JSP... cũng giúp giảm được thời gian biên dịch (từ ASP/JSP... sang HTML).

5. Tránh dùng table lồng trong table

Khi bạn viết table lồng trong table, trình duyệt sẽ mất nhiều thời gian hơn để hiển thị trang web. Đây là điều ít người để ý nhất nhưng lại là một kỹ thuật cải thiện tốc độ hiển thị trang web đáng kể nhất. Khi bạn đặt một table bên trong một table, sẽ mất một khoảng thời gian khá dài để trình duyệt web duyệt qua toàn bộ mã lệnh bên trong mỗi table rồi mới làm đến việc trình bày lên màn hình cho người dùng xem. Nếu có thể, bạn hãy sử dụng CSS để tạo ra những dòng và cột cho trang web.

6. Không dùng table bao toàn bộ nội dung trang web

Nếu bạn dùng một table lớn để tạo layout cho trang web như sau:


























Top
Left MenuContentRight Menu
Footer




Trình duyệt sẽ phải tải toàn bộ thông tin của các thành phần trong bảng gồm: Top, LeftMenu, Content... về máy client, rồi xử lý tính toán toàn bộ control, khoảng trắng, hình ảnh... bên trong table. Khi mọi việc đã thực sự hoàn tất, trình duyệt web lúc đó mới hiển thị toàn bộ nội dung bên trong table lên màn hình cùng lúc.

Nếu không dùng table bao toàn bộ nội dung trang web, thì ngoài việc giảm được dung lượng trang web, thời gian xử lý hiển thị tại máy client, nó còn cho phép trình duyệt web hiển thị dần từng phần đã xử lý xong, cho người dùng có một vài thông tin để đọc trước, trong khi chờ những phần khác tiếp tục hiển thị, điều này tạo cho người dùng cảm giác trang web của bạn có tốc độ hiển thị nhanh.

7. Phân trang web thành các trang nhỏ hơn

Thay vì hiển thị toàn bộ thông tin trên 1 trang web, bạn hãy phân trang web thành nhiều mục nhỏ và hiển thị trên nhiều trang khác nhau. Giống như Yahoo Mail, tại mỗi thời điểm, các bạn chỉ có thể xem được tiêu đề của 50 email lên màn hình, để xem danh sách các email khác bạn phải nhấn liên kết next/previous...

Điều này không chỉ giúp tăng tốc độ hiển thị trang web mà trên thực tế, phần lớn người dùng thật sự không thích phải ngồi chờ vài phút để rồi xem một trang web có nội dung khá dài, phải dùng đến scroll bar mới xem được hết toàn bộ nội dung.

8. Xóa các khoảng trắng không cần thiết

Cố gắng xóa tất cả những khoảng trắng không cần thiết trong đoạn mã html. Hãy nhớ là một lần ấn phím space sẽ làm tăng kích thước trang web của bạn lên 1 byte. Việc loại bỏ khoảng trắng này có thể làm bằng tay hoặc dùng công cụ hỗ trợ như HTML code Cleaner (có thể tìm với Google).

9. Dọn dẹp mã chương trình cho sáng sủa

Hãy loại bỏ toàn bộ những thẻ trống như
hay . Điều này không những giúp cải thiện dung lượng trang web, tăng tốc độ hiển thị mà còn giúp cho mã lệnh của bạn trở nên rõ ràng, giúp dễ dàng hiệu chỉnh hoặc nâng cấp.

10. Tối ưu hình ảnh

Hạn chế dùng hình ảnh: Hình ảnh giúp cho trang web của bạn trở nên sống động và lôi cuốn, tuy nhiên hình ảnh cũng chính là một trong những nguyên nhân làm chậm tốc độ hiển thị trang web.

Chỉ định rõ kích thước của hình ảnh: Khi trình duyệt hiển thị hình ảnh của trang web, nó phải biết kích thước của tấm ảnh để có thể chừa khoảng trống trên màn hình cho việc hiển thị tấm ảnh này, và việc hiển thị sẽ theo trình tự từ trên xuống. Nếu bạn không định rõ kích thước của tấm ảnh (ví dụ: ), trình duyệt phải tải tấm ảnh trước để xác định kích thước rồi mới xử lý hiển thị nội dung. Điều này cũng tương tự như việc sử dụng table bao toàn bộ nội dung. Vì vậy nếu được, bạn nên sử dụng khai báo “width”, “height” để chỉ định trước kích cỡ của hình ảnh.

Giảm kích thước hình ảnh: Hãy giảm tối đa kích thước hình ảnh. Đôi khi bạn không cần phải trương lên trang web những hình ảnh có chất lượng thật cao mà có thể dùng thumbnail thay thế. Định dạng GIF/JPG là lựa chọn hàng đầu cho trang web vì kích thước nhỏ.
Ví dụ dùng CSS thay cho table


Trình bày 3 cách hiển thị một form đăng nhập đơn giản:
- Dùng bảng
- Không dùng bảng
- Không dùng bảng và dùng CSS

1. Dùng bảng













Name: 
Email:  
  


Kết quả của đoạn mã lệnh trên sẽ như hình dưới đây


2. Không dùng bảng

Name


E-mail




Kết quả của đoạn mã lệnh trên sẽ như hình dưới đây

3. Dùng CSS
Từ cách 2 ở trên nếu bạn định nghĩa CSS cho đối tượng Label và Submit Input như dưới đây bạn sẽ có kết quả như cách 1 mà không cần sử dụng bảng.
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 4.5em;
}

Kết quả sau khi định nghĩa CSS cho đối tượng Label và Submit Input

Bây giờ, nếu muốn thêm màu và tạo khung bạn có thể sử dụng tag và như dưới đây:
Khai báo CSS
fieldset
{
border: 1px solid #781351;
width: 20em
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
Mã HTML

This is my form

Name


E-mail





Tag bên trong tag sẽ tạo ra phần header cho khung bao quanh nội dung form, kết quả sẽ như hình dưới đây.

Trên đây chỉ là các kỹ thuật tối ưu cơ bản cho mã HTML. Hẹn gặp lại các bạn trong các bài viết sau về kỹ thuật tối ưu trang web với mã lệnh cơ sở dữ liệu, VB, C#, JSP...

8/12/2009

asp.net-Ajax Tutorial for Beginners

asp.net-Ajax Tutorial for Beginners
AJAX1.jpg
Introduction

Hello everyone. This is my first article on The Code Project. I hope you will get some benefit from it. I have been learning Ajax for the last 5 months and now I want to share my knowledge with you. Please provide feedback on any mistakes which I have made in this article. Believe me guys, your harsh words would be received with love and treated with the top most priority.

I have explained Ajax with XML and JSON in part 2, which you can read here

There are many books and articles out there explaining the 5 Ws (Who, What, Where, When, Why) of Ajax, but I will explain to you in my own simple way. So what is Ajax? The term AJAX (Asynchronous JavaScript and XML) has been around for three years created by Jesse James Garrett in 2005. The technologies that make Ajax work, however, have been around for almost a decade. Ajax makes it possible to update a page without a refresh. Using Ajax, we can refresh a particular DOM object without refreshing the full page.
Background of Ajax

In Jesse Garrett’s original article that coined the term, it was AJAX. The “X” in AJAX really stands for XMLHttpRequest though, and not XML. Jesse later conceded that Ajax should be a word and not an acronym and updated his article to reflect his change in heart. So “Ajax” is the correct casing. As its name implies, Ajax relies primarily on two technologies to work: JavaScript and the XMLHttpRequest. Standardization of the browser DOM (Document Object Model) and DHTML also play an important part in Ajax’s success, but for the purposes of our discussion we won't examine these technologies in depth.
How Ajax Works

At the heart of Ajax is the ability to communicate with a Web server asynchronously without taking away the user’s ability to interact with the page. The XMLHttpRequest is what makes this possible. Ajax makes it possible to update a page without a refresh. By Ajax, we can refresh a particular DOM object without refreshing the full page. Let's see now what actually happens when a user submits a request:

AJAX2.JPG

1. Web browser requests for the content of just the part of the page that it needs.
2. Web server analyzes the received request and builds up an XML message which is then sent back to the Web browser.
3. After the Web browser receives the XML message, it parses the message in order to update the content of that part of the page.

AJAX uses JavaScript language through HTTP protocol to send/receive XML messages asynchronously to/from Web server. Asynchronously means that data is not sent in a sequence.
Common Steps that AJAX Application Follows

The figure below describes the structure of HTML pages and a sequence of actions in Ajax Web application:

How Ajax Works

1. The JavaScript function handEvent() will be invoked when an event occurred on the HTML element.
2. In the handEvent() method, an instance of XMLHttpRequest object is created.
3. The XMLHttpRequest object organizes an XML message within about the status of the HTML page, and then sends it to the Web server.
4. After sending the request, the XMLHttpRequest object listens to the message from the Web server.
5. The XMLHttpRequest object parses the message returned from the Web server and updates it into the DOM object.

Let's See How Ajax Works in the Code

Let’s start to put these ideas together in some code examples.
Collapse

form id="form1" runat="server"

div
input type="text" id="lblTime"

br
input type="button" id="btnGetTime" value="Get Time" onclick="GetTime();"

div
form

1. From the above code, our DOM object is (input type="text" id="lblTime") which we have to refresh without refreshing the whole page. This will be done when we press the event of a button, i.e. onclick.
2. In this code, our handEvent() is GetTime() from the above Figure-2 if you take a look at it.

Let's see now how we create an XmlHttpRequest object and make Ajax work for us.

The basic implementation of the XMLHttpRequest in JavaScript looks like this:
Collapse

var xmlHttpRequest;

function GetTime()
{
//create XMLHttpRequest object
xmlHttpRequest = (window.XMLHttpRequest) ?
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

//If the browser doesn't support Ajax, exit now
if (xmlHttpRequest == null)
return;

//Initiate the XMLHttpRequest object
xmlHttpRequest.open("GET", "Time.aspx", true);

//Setup the callback function
xmlHttpRequest.onreadystatechange = StateChange;

//Send the Ajax request to the server with the GET data
xmlHttpRequest.send(null);
}
function StateChange()
{
if(xmlHttpRequest.readyState == 4)
{
document.getElementById('lblTime').value = xmlHttpRequest.responseText;
}
}

1.

Now from the above Figure-2 handEvent() i.e. GetTime() creates an XMLHttpRequest object inside it like this:
Collapse

//create XMLHttpRequest object
xmlHttpRequest = (window.XMLHttpRequest) ?
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

2.

If the browser does not support Ajax, it will return false.
3.

Next we open our connection to the server with our newly created XMLHttpRequest object. Here the Time.aspx page is the page from which we will get XML message that is stored on the Web server.
Collapse

//Initiate the XMLHttpRequest object
xmlHttpRequest.open("GET", "Time.aspx", true);

4.

You often hear the term “callback” replace the term “postback” when you work with Ajax. That’s because Ajax uses a “callback” function to catch the server’s response when it is done processing your Ajax request. We establish a reference to that callback function like this. Here StateChange is a function where we update or set a new value to our DOM object, i.e "lblTime".
Collapse

//Setup the callback function
xmlHttpRequest.onreadystatechange = StateChange;

Let's have a look at our callback function:
Collapse

function StateChange()
{
if(xmlHttpRequest.readyState == 4)
{
document.getElementById('lblTime').value = xmlHttpRequest.responseText;
}
}

onreadystatechange will fire multiple times during an Ajax request, so we must evaluate the XMLHttpRequest’s “readyState” property to determine when the server response is complete which is 4. Now if readyState is 4, we can update the DOM object with the response message we get from the Web server.
5.

As the request method we are sending is "GET" (remember it is case sensitive), there is no need to send any extra information to the server.
Collapse

//Send the Ajax request to the server with the GET data
xmlHttpRequest.send(null);

In Time.aspx.cs on Page_Load event, write a simple response like this which is our response message:
Collapse

Response.Write( DateTime.Now.Hour + ":" + DateTime.Now.Minute +
":" + DateTime.Now.Second );

That’s it. That’s Ajax. Really.

Key Points to be Remembered in Ajax

There are three key points in creating an Ajax application, which are also applicable to the above Tutorial:

1. Use XMLHttpRequest object to send XML message to the Web server
2. Create a service that runs on Web server to respond to request
3. Parse XMLHttpRequest object, then update to DOM object of the HTML page on client-side

http://www.codeproject.com/KB/ajax/AjaxTutorial.aspx

List

Profiles Information


About me : Nothing is 1 vài thứ - 1985

Places I've Lived : I Hà Nội

Home Page : http://www.shimivn.blogspot.com/

Think : 1:1000000000

Languages spoken : Vietnamese,English.

Mobile : sony C2305

dell : i3-Ram 3GB- HDD 250GB .