Phân trang trong ASP.NET với CollectionPager

Khi lập trình ứng dụng ASP.NET, để trình bày dữ liệu, chúng ta hay sử dụng các control như DataList hay Repater khá nhiều so với Gridview hay các control dữ liệu khác. Ưu điểm của những control trên thì khá rõ, tuy nhiên có hạn chế là nhiều bạn gặp khó khăn để phân trang dữ liệu cho nó. Vấn đề này đặc biệt quan trọng khi dữ liệu của các bạn nhiều lên như danh sách các sản phẩm, danh sách nhân viên…..

 

Thật may mắn khi ASP.NET hỗ trợ chúng ta viết các custom control khá mạnh, chính vì thế có một control hỗ trợ phân trang rất linh hoạt và hữu ích là CollectionPager. Nó cho phép chúng ta phân trang với DataList, Repater, hỗ trợ định dạng hiển thị mạnh mẽ…

Để sử dụng các bạn cần download thư viện CollectionPager về.

Đầu tiên cần add thư viện CollectionPager.dll vào thư mục bin của ứng dụng.

Phân trang trong ASP.NET với CollectionPager
Phân trang trong ASP.NET với CollectionPager

Tạo trang mới Pager.aspx

Các bạn chú ý thêm dòng này vào đầu trang

<%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %>
<!--/* FileName: Pager.aspx
Project Name: AjaxDemo
Date Created: 5/12/2015 8:49:08 PM
Description: Auto-generated
Version: 1.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: tuanitpro@gmail.com
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/
-->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pager.aspx.cs" Inherits="Pager" %>
<%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Phân trang với ColelctionPager</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Phân trang trong ASP.NET với CollectionPager</h1>
            <table>
                <thead>
                    <tr>
                        <th>StudentId</th>
                        <th>Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rptStudents" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td><%#Eval("StudentId") %></td>
                                <td><%#Eval("Name") %></td>
                               <td> <%#Eval("Status") %></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                             <cc1:CollectionPager ID="pager" runat="server" PageSize="20" ></cc1:CollectionPager>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <hr />
           <a href="http://tuanitpro.com">http://tuanitpro.com</a>
        </div>
    </form>
</body>
</html>

Thêm dòng này vào sau DataList, Repater

 <cc1:CollectionPager ID="pager" runat="server" PageSize="20" ></cc1:CollectionPager>

Các thuộc tinh của CollectionPager

phan-trang-aspnet-collectionpager-2

Code trang Pager.aspx.cs

/* FileName: Pager.aspx.cs
Project Name: AjaxDemo
Date Created: 5/12/2015 8:49:08 PM
Description: Auto-generated
Version: 1.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: tuanitpro@gmail.com
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/

using System;
using System.Data;
using System.Data.SqlClient;

public partial class Pager : System.Web.UI.Page
{
    string connectionString = @"Data Source = .\SQLEXPRESS; Initial Catalog = DemoDI; User ID=sa; Password=sa";
    // Code table Students
    string db = @"CREATE TABLE [dbo].[Students](
	                [StudentId] [int] IDENTITY(1,1) NOT NULL,
	                [Name] [nvarchar](max) NULL,
	                [Status] [nvarchar](max) NULL)";
    /// <summary>
    /// Get All Student form DB
    /// </summary>
    /// <returns></returns>
    public DataTable GetAllStudents()
    {
        using (SqlConnection cnn = new SqlConnection(connectionString))
        {
            cnn.Open();
            string sql = "Select * from Students";
            SqlCommand cmd = new SqlCommand(sql, cnn);
           
            DataTable table = new DataTable();
            table.Load(cmd.ExecuteReader());
            cnn.Close();
            return table;
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Set DataSource of Pager to Sample Data 
            pager.DataSource = GetAllStudents().DefaultView;

            pager.BindToControl = rptStudents;

            rptStudents.DataSource = pager.DataSourcePaged;
             
        }
    }
}

Kết quả

Phân trang ASP.NET với CollectionPager
Phân trang ASP.NET với CollectionPager

Chúc các bạn thành công.

Javascript Popup Window to return value to Parent Window

Chào các bạn.
Khi lập trình, hay thiết kế web chúng ta có nhu cầu lấy dữ liệu từ một trang thứ 2 mà không muốn load lại trang chính. Chúng ta có thể dùng popup windows. Ví dụ như chọn một sản phẩm từ danh sách sản phẩm, chọn một nhân viên từ danh sách…. Tất nhiên cũng ta vẫn còn có nhiều cách khác nhau.

Javascript Popup Window to return value to parent window
Javascript Popup Window to return value to parent window

Hướng dẫn sau cho phép bạn tạo một trang popup và lấy dữ liệu đưa vào form của chúng ta. Đây chỉ là code HTML và Javascript, vậy nên bạn có thể áp dụng bất cứ chỗ nào bạn muốn (PHP, ASP.NET, MVC….).

Chúng ta cần 2 file. 1 file chứa form (parent) và 1 file chứa dữ liệu chúng ta muốn lấy (child).

Code trang parent.html

<body>
    <div class="container">
        <h3>Javascript Popup Window to return value to parent Window</h3>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Họ tên:&nbsp;
                </td>

                <td>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Chọn nhân viên..." id="txtName">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="SelectName()">Chọn...</button>
                        </span>
                    </div><!-- /input-group -->
                </td>
            </tr>
        </table>
        <br />
        <p>            
            <a href="http://tuanitpro.comjavascript-popup-window-to-return-value-to-parent-window">Hướng dẫn lấy dữ liệu từ Popup Javascript.</a>
        </p>
        <script type="text/javascript">
            var popup;
            function SelectName() {
                popup = window.open("/Home/Popup", "Popup", "width=400,height=300"); // Thay dường dẫn file bạn muốn mở
                popup.focus();
            }
        </script>
    </div>

Code file child.html

<body>
    <div>
        <h3>Danh sách nhân viên</h3>
        Click vào tên nhân viên để chọn
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td><a href="#" onclick="return SetName('Ngọc Trinh');">Ngọc Trinh</a></td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="#" onclick="return SetName('Phương Trinh');">Phương Trinh</a></td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td><a href="#" onclick="return SetName('Lệ Rơi');">Lệ Rơi</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td><a href="#" onclick="return SetName('Bà Tưng');">Bà Tưng</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td><a href="#" onclick="return SetName('Kenny Sang');">Kenny Sang</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        function SetName(value) {
            if (window.opener != null && !window.opener.closed) {
                var txtName = window.opener.document.getElementById("txtName"); // ID này là của parent form
                txtName.value = value;
            }
            window.close();
        }
    </script>
</body>

Chúc các bạn thành công.

Vừa gà vừa chó, bó lại cho tròn, ba mươi sáu con, một trăm chân chẵn. Hỏi mấy gà, mấy chó?

Vừa gà vừa chó, bó lại cho tròn, ba mươi sáu con, một trăm chân chẵn. Hỏi mấy gà, mấy chó?
Vừa gà vừa chó, bó lại cho tròn, ba mươi sáu con, một trăm chân chẵn. Hỏi mấy gà, mấy chó?

Có một bài toán dân gian khá thú vị như sau:

Vừa gà vừa chó
Bó lại cho tròn
Ba mươi sáu(36) con
Một trăm(100) chân chẵn
Hỏi mấy gà, mấy chó?

Đây là bài toán vui, từ khi học tiểu học mình đã biết, lên trung học, học giải phương trình cũng gặp lại nó. Và bây giờ, làm lập trình, tự dưng nhớ tới nó, nên viết ra đây, coi như chia sẻ cho các bạn mới học lập trình có thêm hào hứng, giải quyết các bài tập nho nhỏ, vui vẻ tương tự.

Cách giải nó như sau:

Gọi x là số gà
Số chó là: 36 – x
Số chân gà: 2x
Số chân chó: 4(36-x)
theo đề bài ta có:
2x + 4(36 – x) =100
2x + 144 – 4x = 100
2x = 144 – 100
2x = 44
x = 22
Vậy số gà là 22 con
Số chó : 36 – 22 = 14

Bạn bảo mấy con chó đặt 2 chân trước lên ghế,tổng số chân dưới đất sẽ là 36 x 2  = 72 chân. Suy ra số chân trên ghế là 28 chân.
Vậy có 14 con chó ….

Dùng hệ phương trình
Gọi x là gà, y là chó
Ta có hệ pt:
x + y = 36
2x + 4y = 100
Giải hệ pt
x = 22,y = 14
Vậy gà có 22 con, chó có 14 con. Mời các bạn chia sẻ thêm cách giải hay, thú vị khác nữa nhé.

Vậy thì làm sao để giải nó bằng cách lập trình. Đây không phải vấn đề khó với nhiều bạn, tuy nhiên mình thấy vui vẻ, nên vẫn viết ra đây.

Sau đây là cách giải trong một số ngôn ngữ lập trình như Pascal, C++, C#, Java, PHP, ASP.NET, Javascript. Trường hợp máy bạn không cài sẵn IDE, bạn có thể sử dụng trang web http://ideone.com để chạy thử code.

Vì số con là 36 và số chân là 100. Giả sử tất cả là chó, thì số con tối đa là 100/4 = 25 (con). Tối thiểu là 36 / 4 = 9 (con). Như vậy chúng ta chỉ cần sử dụng vòng lặp for từ 9->25. Tối ưu hơn so với từ 0 -> 36

Pascal

program HelloWorld;
var i :Integer;
begin
  	writeln('Giai bai toan dan gian bang Pascal');
	writeln('Vua ga vua cho');
	writeln('Bo lai cho tron');
	writeln('Ba muoi sau(36) con');
	writeln('Mot tram(100) chan chan');
	writeln('Hoi may ga, may cho?');
	for i:= 9 to 25 do
		if((i * 2 + (36 - i) * 4) = 100) then
			writeln('So ga la: ', i);
			writeln('So cho la: ', 36 - i);
	
end.

C++

#include <string>
#include<iostream>;
#include<stdio.h>;
 
using namespace std;

int main(){
	cout << "Gia bai toan dan gian trong C++\n";
	cout << "Vua ga vua cho\n";
	cout << "Bo lai cho tron\n";
	cout << "Ba muoi sau(36) con\n";
	cout << "Mot tram(100) chan chan\n";
	cout << "Hoi may ga, may cho?\n";
	cout << "\n";
	for (int i = 9; i < 25; i++)
	{
		if ((i * 2 + (36 - i) * 4) == 100){
			cout << "So ga la: " << i << "\n";
			cout << "So cho la: " << (36 - i) << "\n";
                        break;
		}
	}
}

Java

public class Main {

	public Main() {
		// TODO Auto-generated constructor stub
	}

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		System.out.println("Giải bài toán dân gian trong Java");
		System.out.println("Vừa gà vừa chó");
		System.out.println("Bó lại cho tròn");
		System.out.println("Ba mươi sáu(36) con");
		System.out.println("Một trăm(100) chân chẵn");
		System.out.println("Hỏi mấy gà, mấy chó?\n");
		for(int i = 9; i < 25; i++){
			if((i*2+(36-i)*4)==100){
				System.out.println("Số gà là: " + i);
				System.out.println("Số chó là: " + i);
			}
		}
	}
}

C#

class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Gia bai toan dan gian trong C#");
            Console.Write("Vua ga vua cho\n");
            Console.Write("Bo lai cho tron\n");
            Console.Write("Ba muoi sau(36) con\n");
            Console.Write("Mot tram(100) chan chan\n");
            Console.WriteLine("Hoi may ga, may cho?\n");
            for (int i = 9; i <= 25; i++)
            {
                if ((2 * i + (36 - i) * 4) == 100)
                {
                    Console.WriteLine("So ga la: " + i);
                    Console.WriteLine("So cho la: " + (36 - i));
                    break;
                }
            }

            Console.ReadKey();
        }
    }

ASP.NET

void GiaiBaiToanDanGian()
    {
        StringBuilder sb = new StringBuilder();
        for (int i = 9; i < 25; i++)
        {
            if ((i * 2 + (36 - i) * 4) == 100)
            {
                sb.AppendLine("Số gà là: " + i);
                sb.AppendLine("Số chó là: " + (36 - i));
            }
        }
        Label1.Text = sb.ToString();
    }

PHP

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>Bài toán dân gian</title>				
	</head>
	<body>
		<b>Giải bài toán dân gian trong PHP</b></br>
		Vừa gà vừa chó </br>
		Bó lại cho tròn </br>
		Ba mươi sáu(36) con </br>
		Một trăm(100) chân chẵn</br>
		Hỏi mấy gà, mấy chó?</br>
		</br>
		<?php 
			for($i = 9; $i < 25; $i ++)
			{
				if(($i * 2 + (36-$i)*4) == 100)
				{
					echo 'Số gà là: '.$i.'</br>';
					echo 'Số chó là: '.(36 - $i);
				}
			}
		?>
	</body>
</html>

Javascript

<script type="text/javascript">
	alert('Giai bai toan dan gian');
	for(i = 9; i < 25; i++)
	{
		if((i * 2 + (36-i)*4) === 100){
			alert('Số gà là: ' + i + '; Số chó là: '+(36-i));
		}
	}
</script>

Chúc các bạn học lập trình vui vẻ

Convert DataTable to List trong C#

Khi làm việc với .NET, thì MS đã cung cấp cho chúng ta đối tượng DataTable. Tuy nhiên trong nhiều trường hợp, DataTable tỏ ra không linh hoạt và tiện dụng như List. Do đó chúng ta rất có nhu cầu chuyển đổi từ DataTable sang List để tiện sử dụng.

Convert Datatable to List
Convert Datatable to List

Class này cung cấp cho các bạn 2 phương thức để chuyển đổi từ DataTable sang List và ngược lại.

/* 
FileName: ConvertListToDataTable.cs
Project Name: ColorLife
Date Created: 11/30/2014 8:44:44 AM
Description: Convert Between List and DataTable
Version: 1.0.0.0
Author:	Lê Thanh Tuấn
Author Email: tuanitpro@gmail.com
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/

using System;
using System.Collections.Generic;
using System.Data;
using System.Reflection;

public static class ConvertListToDataTable
{
	
	// List<Student> students = Data.GetStudents();	
	// Converts List To DataTable
	// DataTable studentTbl = students.ToDataTable(); 

	public static DataTable ListToDataTable<T>(this IList<T> data)
	{
		DataTable dataTable = new DataTable(typeof(T).Name);
		PropertyInfo[] props = typeof(T).GetProperties(BindingFlags.Public | BindingFlags.Instance);
		foreach (PropertyInfo prop in props)
		{
			dataTable.Columns.Add(prop.Name, Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType);
		}
		foreach (T item in data)
		{
			var values = new object[props.Length];
			for (int i = 0; i < props.Length; i++)
			{
				values[i] = props[i].GetValue(item, null);
			}
			dataTable.Rows.Add(values);
		}
		return dataTable;
	}

	//  Converts DataTable To List
	//  DataTable dtTable = GetEmployeeDataTable();
	//  List<Employee> employeeList = dtTable.DataTableToList<Employee>();
	
	public static List<T> DataTableToList<T>(this DataTable table) where T : class, new()
	{
		try
		{
			List<T> list = new List<T>();

			foreach (var row in table.AsEnumerable())
			{
				T obj = new T();

				foreach (var prop in obj.GetType().GetProperties())
				{
					try
					{
						PropertyInfo propertyInfo = obj.GetType().GetProperty(prop.Name);
						propertyInfo.SetValue(obj, Convert.ChangeType(row[prop.Name], propertyInfo.PropertyType), null);
					}
					catch
					{
						continue;
					}
				}

				list.Add(obj);
			}

			return list;
		}
		catch
		{
			return null;
		}
	}	
}

Lưu ý: Có thể code không chạy trong một vài trường hợp như dữ liệu kết hợp phức tạp. Tên cột trong DataTable khác với thuộc tính trong List.

Chúc các bạn thành công.

Ajax là gì?

AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền. Đây đều là công nghệ sẵn có nhưng Javacript đã lắp ráp chúng lại để thực hiện những “sứ mệnh” đáng khâm phục.

Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 năm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

  • HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
  • Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
  • Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web.
  • XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.

AJAX hoạt động như thế nào?

Ứng dụng web truyền thống (trái) và ứng dụng AJAX.
Ứng dụng web truyền thống (trái) và ứng dụng AJAX.

Theo mô hình hoạt động bình thường, client sẽ gửi một HTTP Request lên Server, sau đó Server thực hiện một số khâu xử lý như lấy lại dữ liệu, tính toán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trang HTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật, phương pháp này nghe có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực hiện vai trò của nó thì người dùng sẽ làm gì? Có vấn đề gì ở đây? Mỗi lần như vậy Client sẽ gửi toàn bộ nội dung website lên Server, và Server cũng trả về tương ứng. Bạn hình dung, khi xem một bài báo, hay website chia sẻ hình ảnh, bạn chỉ quan tâm nội dung bài báo, hình ảnh đó mà thôi, không cần tải hết cả trang làm gì đó. Đó là hạn chế, bạn sẽ phải tốn thời gian chờ đợi thứ không mong muốn. Không ai muốn chờ đợi cả.

Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian – cơ chế xử lý AJAX – giữa máy khách và máy chủ. Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình “đi lại” của thông tin và giảm thời gian phản ứng. Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác, thời gian chờ có thể thay bằng thông điệp ‘loading…’, ‘đang tải dữ liệu…’… Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát – dấu hiệu cho thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang. Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng.

Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX. (
Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và bất đồng bộ trong ứng dụng AJAX.

Các ứng dụng AJAX

Hiện nay thì khá nhiều website đã và đang ứng dụng ajax. Đơn giản thì chúng ta hay đăng ký thành viên trên các diễn đàn, website. Ngay sau khi chúng ta nhập xong username hay email, hệ thống đã phản hồi cho chúng ta biết tài khoản đó tồn tại hay chưa, mà không cần nhấn nút Submit như truyền thống. Đó là một trong vô số các ứng dụng của AJAX.

Ưu điểm và hạn chế

Cũng như bất kỳ công nghệ khác, AJAX có thể bị sử dụng quá nhiều trong một website, vì họ chỉ thấy những ưu điểm mà AJAX mang lại chớ không quan tâm đến những khuyết điểm của AJAX, để tranh tình trang trên, có thể liệt kê một số đặc điểm của AJAX như sau:

– Ưu điểm

  • Nó giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với người dùng.
  • Nó sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng
  • Nhờ tính phổ biến của nó, đã khuyến khích việc phát triển các khuôn mẫu mà sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước.
  • Được hỗ trợ trong các trình duyệt phổ biến hiện nay.
– Hạn chế
  • Bạn không thể bookmark nó vào favourite trên trinh duyệt hay gởi link đến cho bạn bè, vì tất cả quá trình nó thực hiện ngầm và không hiển thị trên address.
  • Không thể hiện thị nội dung trên các trang tìm kiếm vì các trang tìm kiếm hiện nay vẫn chưa hỗ trợ tìm vì rất khó tìm và gần như không thể tìm đc.
  • Không thể sử dụng nút back vì back cũng là chính nó.
  • Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiện javascript nên ajax không thể chạy, hay trong một vài host, không hỗ trợ vào sâu cấu hình server nên hay bị lỗi “Access denied”

Nhưng với những điểm hạn chế nói trên thì AJAX vẫn đang được các lập trình viên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó, ví dụ như vừa update thông tin trên web, vừa thay đổi trên thanh address để có thể sử dụng một số chức năng liên quan tới địa chỉ tuyệt đối này.

Kết: sử dụng ajax là cả một nghệ thuật.

Ví dụ về việc sử dụng Ajax đơn giản

(Note: Ở đây thực hiện trong ASP.NET, bạn hoàn toàn có thể thực hiện trên ngôn ngữ khác được)
Ví dụ sau đây chúng ta thực hiện việc lấy giờ trên Server. Thông qua AJAX sẽ cho chúng ta biết thời gian của Server mà không cần tải lại toàn bộ trang web. Chỉ lấy những gì chúng ta cần mà thôi.
Chúng ta sẽ có 3 file. ajax.js, Default.aspx, Ajax.aspx (Có thể khác với ngôn ngữ khác. defaul.php, ajax.php….)
Đầu tiên chúng ta tạo 1 file ajax.js (File javascript này đảm nhiệm việc gọi XMLHttpRequest để trao đổi dữ liệu)
Code
File ajax.js

/** FileName: ajaxcore.js
Project Name: Ajax
Date Created: 30/10/2014 10:28:58 PM
Description: File Ajax core, thuần JavaScript, dùng để gọi Server xử lý
Version: 0.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: tuanitpro@gmail.com
Author Mobile: 0976060432
Author URI: http://tuanitpro.com

License: 
*/
var xmlHttp = null;

function loadXmlHttp() {
    if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
        } catch (e) {}
    }
}

function sendRequest(url) {
    loadXmlHttp();
    if (xmlHttp) {
        xmlHttp.open("GET", url, true); // true = async
        xmlHttp.onreadystatechange = onCallback;
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlHttp.send(null);
    }
}

function onCallback() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var r = document.getElementById('results');
            r.innerHTML = xmlHttp.responseText;
        } else {
            alert('Error: ' + xmlHttp.status);
        }
    }
}

function loading() {
    document.getElementById("results").innerHTML = 'Đợi em tí...';
}

function getContent(url) {
    loading();
    sendRequest(url);
}

Cách dùng:

Trang default.aspx Ajax Demo

1. Trên trang HTML tạo một div.
Nơi chứa dữ liệu
2. gọi hàm getContent('URL'); VD: Load Content%MINIFYHTML4409fc734ee5cbc43925e38afb0838884%

Ajax Demo

DateTime: Ajax DateTime:
Vùng chứa dữ liệu, sẽ bị thay thế
http://tuanitpro.com

Trang default.aspx.cs

/** FileName: Default.aspx.cs
Project Name: DateTime Ajax
Date Created: 30/10/2014 10:28:58 PM
Description: Default.aspx, hiển thị dữ liệu
Version: 0.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: tuanitpro@gmail.com
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 
*/
using System;

public partial class Ajax_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblDatTime.Text = DateTime.Now.ToString();
        }
    }
}

Trang Ajax.aspx.cs. Không quan tâm phần giao diện HTML.

/** FileName: Ajax.aspx.cs
Project Name: DateTime Ajax
Date Created: 30/10/2014 10:28:58 PM
Description: Ajax.aspx, trả về kết quả hiển thị lên website
Version: 0.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: tuanitpro@gmail.com
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 
*/
using System;

public partial class Ajax_Ajax : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write(DateTime.Now.ToString());
    }
}

Demo kết quả:

ajax-datetime
Demo Ajax DateTime

[ASP.NET] Hướng dẫn chèn logo vào hình ảnh

Chèn logo vào hình ảnh ASP.NET
Chèn logo vào hình ảnh ASP.NET

Trong bài viết Hướng dẫn chèn chữ vào hình ảnh thì chúng ta đã biết cách làm thế nào để đánh dấu bản quyền cho hình ảnh trên website của mình. Khá là thú vị, tuy nhiên chúng ta có quyền đặt câu hỏi rằng, tại sao không chèn Logo của mình vào bức ảnh đó. ASP.NET có làm được không? Nếu có, thì làm thế nào để chèn Logo vào hình ảnh?

Tất nhiên là ASP.NET có hỗ trợ và chúng ta hoàn toàn làm được điều đó, không hề khó khăn gì cả.
Đầu tiên chúng ta sẽ tạo ra một trang LogoOnImage.aspx. Trong trang LogoOnImage.aspx.cs chúng ta sẽ thêm vào 2 thư viên sau:
<prelang=”csharp”> using System.Drawing; using System.Drawing.Imaging;

Trong sự kiện Page_Load chúng ta sẽ viết code cho nó như sau:

protected void Page_Load(object sender, EventArgs e)
    {
        // Đường dẫn file ảnh. 
        string imageFile = Server.MapPath("~/images/fruit.jpg");
        // Đường dẫn file Logo cần chèn
        string logo = Server.MapPath("~/images/logo.png");

        // Tạo đối tượng Bitmap truyền vào đường dẫn File ảnh
        Bitmap myBitmap = new Bitmap(imageFile);
        // Tạo đối tượng Graphic từ Bitmap
        Graphics myGraphics = Graphics.FromImage(myBitmap);
       
        // Vẽ lại hình ảnh, chèn nội dung mới vào.
        Bitmap myBitmapLogo = new Bitmap(logo);
       
        myGraphics.DrawImage(myBitmapLogo, new Point(550, 400));

        // Xuất hình ảnh mới
        Response.ContentType = "image/jpeg";
        myBitmap.Save(Response.OutputStream, ImageFormat.Jpeg);

        // Dùng code này nếu lưu ảnh vào ổ cứng của bạn.
        // myBitmap.Save(Server.MapPath("~/images/aodai.jpg"));
    }

Thât đơn giản và thú vị. Chúc các bạn thành công.

[ASP.NET] Hướng dẫn chèn chữ vào hình ảnh

Write Text On Image in ASP.NET
Nguồn: flickr.com – Ton Ten

Khi bạn sở hữu một website, bạn chia sẻ hình ảnh lên đó, và lý do nào đó bạn không muốn người khác sử dụng lại. Ví dụ như đó là hình ảnh ngôi sao nổi tiếng mà bạn chụp được. Ảnh sản phẩm bạn đang kinh doanh, không thể cho đối thủ cạnh tranh lấy và sử dụng trên website của họ, hoặc đơn giản là bạn muốn đánh dấu bản quyền lên hình ảnh của mình. Bạn có lý do chính đáng để làm như vậy, và bạn sẽ đánh dấu lên bức ảnh (watermark) của mình. Điều này chúng ta hay gặp khi lướt web, bạn cứ thử vào một trang web bất kỳ, sẽ thấy họ ghi chú lên ảnh logo hay tên website….
Có nhiều công cụ khác nhau giúp bạn làm điều đó, bạn có thể dùng công cụ online như https://www.watermark.ws, hoặc photoshop, mình thì hay dùng phần mềm FastStone Photo Resizer để chèn chữ (chèn logo) lên ảnh. Và còn rất nhiều công cụ khác…
Tuy vậy ở khía cạnh là một lập trình viên, bạn có thể không muốn dùng chúng, vì nó không chủ động. Bạn muốn tạo ra một công cụ hay chức năng hay ho nào đó, hình ảnh đưa lên website của bạn sẽ tự động chèn watermark vào. Thật thú vị phải không nào? Nếu bạn đang lập trình web với ASP.NET thì thật đơn giản để làm điều đó. Chúng ta sẽ sử dụng các thư viện .NET cung cấp sẵn và bắt tay vào ngay thôi. Hướng dẫn sau sẽ giúp bạn chèn chữ lên ảnh trong ASP.NET.

Đầu tiên chúng ta tạo ra một trang TextOnImage.aspx. Trong sự kiện Page_Load chúng ta sẽ viết code cho nó như sau:

Chú ý: Ta cần 2 thư viên sau – hãy thêm chúng vào.

using System.Drawing;
using System.Drawing.Imaging;

Code

 
protected void Page_Load(object sender, EventArgs e)
    {
        // Đường dẫn file ảnh. 
        string imageFile = Server.MapPath("~/images/girlvn.jpg");
        string textToWrite = "AO DAI VIET NAM";

        // Tạo đối tượng Bitmap truyền vào đường dẫn File ảnh
        Bitmap myBitmap = new Bitmap(imageFile);
        // Tạo đối tượng Graphic từ Bitmap
        Graphics myGraphics = Graphics.FromImage(myBitmap);
        // Định dạng Style
        StringFormat myStringFormat = new StringFormat();
        myStringFormat.Alignment = StringAlignment.Near;

        myGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
        Font myFont = new Font("Tahoma", 35, FontStyle.Regular);
        Color fontColor = Color.White;
        SolidBrush myBrush = new SolidBrush(fontColor);

        // Vẽ lại hình ảnh, chèn nội dung mới vào.
        myGraphics.DrawString(textToWrite, myFont, myBrush, new Point(430, 410), myStringFormat);

        // Xuất hình ảnh mới
        Response.ContentType = "image/jpeg";
        myBitmap.Save(Response.OutputStream, ImageFormat.Jpeg);

        // Dùng code này nếu lưu ảnh vào ổ cứng của bạn.
        // myBitmap.Save(Server.MapPath("~/images/aodai.jpg"));
    }

OK. Chúng ta F5 để xem kết quả. Nếu hiện ra như hình ở đầu bài viết thì chúc mừng bạn đã thành công.
Để sử dụng ở trang khác, ở đây chúng ta tạo thêm một trang Default.aspx.
Thêm code này vào và xem kết quả nhé.


Tuyệt vời. Tuy nhiên không dừng lại ở đó, chúng ta muốn nó phải chèn chữ vào hình cho chúng ta chọn, chứ không phải gán cứng như trên.
Chúng ta sửa lại một chút hàm Page_Load như sau: Chỉ cần sửa 2 dòng dưới này thôi nhé

 
string imageFile =Server.MapPath( Request.QueryString["file"]);
string textToWrite = Request.QueryString["text"];

Trên trang Default.aspx thay bằng. Từ nay về sau bạn chỉ cần dùng đường dẫn này thì mọi hình ảnh trên website của bạn sẽ được chèn nội dung vào. Thật đơn giản phải không nào?


Kết quả

Write Text On Image in ASP.NET
Nguồn: flickr.com – Ton Ten

Chúc các bạn thành công.

Tạo biểu đồ với Google Chart trong ASP.NET MVC

Khi làm việc với các ứng dụng liên quan đến số liệu chúng ta hay có nhu cầu thống kê. Có thể thống kê theo dạng bảng, tuy nhiên nó không trực quan như biểu đồ. Các ứng dụng được sử dụng biểu đồ nhiều nhất phải kể đến các ứng dụng phân tích tài chính như chứng khoán…, phân tích dữ liệu, thời tiết, địa lý, kinh tế… và nhiều lĩnh vực khác của cuộc sống. Biểu đồ cung cấp cho chúng ta cái nhìn trực quan, từ đơn giản đến chi tiết, từ đó đưa ra các phân tích, đánh giá, định hướng một cách hiệu quả hơn.
Để tạo biểu đồ trong ứng dụng web ASP.NET MVC chúng ta có thể dùng các plugin jQuery như Highcharts, Charts.JS , FlotjqPlot… trong đó có cả miễn phí và có phí.
Trong bài viết này sẽ hướng dẫn các bạn sử dụng biểu đồ trong ASP.NET MVC kết hợp JSON, thông qua một thư viện miễn phí, đó là Google Charts. Thư viện này cung cấp cho chúng ta rất nhiều kiểu biểu đồ khác nhau, tùy vào mục đích ứng dụng, như biểu đồ cột, biểu đồ phần trăm (pie), biểu đồ line, biểu đồ bar, area…

Yêu cầu bài toán đơn giản như sau:
Xây dựng website đơn giản bằng ASP.NET MVC thống kê số lượng sinh viên theo lớp học, thứ tự xếp hạng của từng lớp.

Bước 1: Tạo class Lop. Class này chứa các thuộc tính như Tên lớp, số lượng sinh viên, xếp hạng (thứ hạng)

Bước 2: Tạo Controller & View. Chúng ta tạo ra một Controller tên là Chart, View = Index
Index.cshtml

Bước 3: Tạo JsonResult trả về kiểu JSON. Hàm này viết luôn trong file ChartController.cs
Bước 4: Tạo hàm Ajax jQuery lấy dữ liệu từ JsonResult (Các bạn chú ý thêm thư viện jQuery vào.)

Bước 5: Tạo hàm javascript để tạo biểu đồ với Google Chart (Các bạn chú ý thêm thư viện jsapi của Google) Ví dụ 1: Vẽ biểu đồ phần trăm (pie) thể hiện số lượng sinh viên từng lớp.

Demo

Tạo biểu đồ với Google chart trong MVC
Tạo biểu đồ với Google Chart trong MVC

Ví dụ 2: Vẽ biểu đồ cột, thể hiện số lượng sinh viên và xếp hạng từng lớp.
Demo

Tạo biểu đồ cột với Google Chart trong ASP.NET MVC
Tạo biểu đồ cột với Google Chart trong ASP.NET MVC

Code full

ChartController.cs
Index.cshtml

Chúc các bạn thành công.

Pro ASP.NET 4.5 in C#, 5th Edition

Pro ASP.NET 4.5 in C#, 5th Edition
Pro ASP.NET 4.5 in C#, 5th Edition

ASP.NET 4.5 remains Microsoft’s preferred technology for creating dynamic websites, providing developers with unrivaled power and flexibility.

Pro ASP.NET 4.5 in C# is the most complete reference to ASP.NET that you will find. This comprehensively revised fifth edition will teach you everything you need to know in order to create well-designed ASP.NET websites. Beginning with core concepts the book progresses steadily through key professional skills. You’ll be shown how to query databases in detail, consider the myriad applications of XML, and step through all the considerations you need to be aware of when securing your site from intruders. Finally, you’ll consider advanced topics such as using client-side validation, jQuery and Ajax.

By the time you have read this book you will have learned all the skills you need to use ASP.NET 4.5 with confidence.

What you’ll learn

  • Understand why ASP.NET 4.5 is so special, what its fundamental principles are, the basics of Visual Studio, how ASP.NET controls are created and how they fit into ASP.NET pages, ultimately creating full applications.
  • Become familiar with Web API , one of the biggest additions to ASP.NET 4.5, and understand how to use it and integrate it within your existing ASP.NET applications.
  • Discover and the Entity Framework and how to perform data binding to in web applications.
  • Learn the ASP.NET security features and how to best apply them.
  • Examine in detail advanced user interface techniques, including user controls, server controls, custom controls and client-side JavaScript.
  • Use HTML and jQuery with an emphasis on contemporary web development techniques.

Who this book is for

This book is aimed at developers with a basic understanding on the .NET Framework who want to learn how to use it in a professional environment. Migrating readers without this foundation would be well served by reading Beginning ASP.NET 4.5 in C#, also by Apress, before tackling this book.

Book Details

Publisher:Apress
By:Adam Freeman, Matthew MacDonald, Mario Szpuszta
ISBN:978-1-4302-4254-3
Year:2013
Pages:1228
Language:English
File size:17.2 MB
File format:PDF
Download Ebook  Source Code

Table of Contents

Part I
01 – Your First ASP.NET Application
02 – Putting ASP.NET in Context
03 – Essential Language Features
04 – Using jQuery
05 – Essential Development Tools
06 – SportsStore: A Real Application
07 – SportsStore: Navigation & Cart
08 – SportsStore: Completing the Cart
09 – SportsStore: Administration
10 – SportsStore: Deployment
11 – Testable Web Apps
Part II
12 – Working with Web Forms
13 – Lifecycle Events & Context
14 – Modules
15 – Handlers
16 – Page & Control Lifecycle Events
17 – Managing Request Execution
18 – Managing State Data
19 – Caching Data
20 – Caching Output
21 – Handling Errors
22 – Managing Paths
23 – URL Routing
24 – Advanced URL Routing
25 – Authentication
26 – Membership
27 – ASP.NET Configuration
28 – Asynchronous Request Handling
Part III
29 – Working with Controls
30 – Forms and Request Validation
31 – Creating Custom Controls
32 – Stateful Controls
33 – Server-Side HTML Elements
34 – Model Binding
35 – Data Binding
36 – Basic Data Controls
37 – Complex Data Controls
38 – Other Controls
Part IV
39 – Managing Scripts & Styles
40 – Ajax & Web Services
41 – Client-Side Validation
42 – Targeting Mobile Devices

Download Ebook  Source Code

Tấn công SQL Injection trong ASP.NET

Với mỗi lập trình viên chúng ta, tạo ra một sản phẩm website chính là đứa con tinh thần, bởi vì bạn đã bỏ ra rất nhiều công sức, ý tưởng sáng tạo để xây dựng nên. Nếu chúng ta làm cho khách hàng, thì nó còn là uy tín, thương hiệu cá nhân của bạn. Để có một sản phẩm như vậy đòi hỏi chúng ta phải làm rất nhiều việc, từ thiết kế giao diện, xây dựng cơ sở dữ liệu, viết code…

Tấn công SQL Injection trong ASP.NET
Tấn công SQL Injection trong ASP.NET

Và còn một điều cực kỳ quan trọng đó chính là vấn đề bảo mật website. Trong thời đại thông tin ngày nay, bảo mật luôn là yếu tố hàng đầu, nhất là những công ty lớn như Facebook, Micrcosoft, các công ty tài chính, ngân hàng. Bạn nghe nói về bảo mật, an toàn thông tin hàng ngày, hàng giờ. Chúng ta, những lập trình viên thì càng nên có ý thức xây dựng sản phẩm bảo mật ngay từ đầu, tức là từ trong code của chúng ta. Nếu bạn nào giữ suy nghĩ rằng, website của mình nhỏ, cần gì bảo mật… thì bài viết này sẽ không phù hợp với bạn. Bài viết này phù hợp với những bạn mới bước chân vào thế giới lập trình web. Còn nếu bạn pro rồi, thì không sao cả, bạn có thể đưa ra những đóng góp ý kiến giúp mình hoàn thiện hơn

Nói về bảo mật thì có rất nhiều lý thuyết mà hẳn bạn đã nghe qua, các hình thức tấn công như:

  1. Tấn công trên tham số truyền
  2. Chèn mã lệnh thực thi trên trình duyệt nạn nhân (Cross Site Scripting)
  3. Tràn bộ đệm (Buffer OverFlow)
  4. Tấn công SQL (SQL Injection)
  5. Mã hoá URL
  6. Tấn công bằng mã độc
  7. Directory Transversal attack?
  8. Local attack
  9. Tấn công phiên làm việc
  10. Đánh cắp phiên làm việc (Session Hijacking)
  11. Để lộ thông tin
  12. Upload dữ liệu bất hợp lệ
  13. Tấn công từ chối dịch vụ (DDos)
  14. Kỹ thuật tấn công Cross Site Request Forgery (CSRF hay XSRF)

(Bạn nào chuyên sâu, còn hình thức tấn công nào nữa, xin góp ý mình bổ sung thêm)
Nhưng ở đây mình chỉ xin bàn về SQL Injection, là lỗ hổng bảo mật do sự chủ quan, hay thiếu kinh nghiệm của coder chúng ta. Và chỉ chính chúng ta mới khắc phục được, chứ không phải nhờ firewall hay server tốt.
Thật vậy, một sản phẩm dù đẹp như thế nào, bạn quảng cáo nó tốt đến đâu, chạy nhanh ra sao, nhưng nếu bảo mật kém thì hẳn là thiếu sót lớn. Hacker có thể khai thác được cơ sở dữ liệu của bạn, nếu cơ sở dữ liệu của bạn chứa thông tin khách hàng của bạn (Ngân hàng chẳng hạn…) thì bạn đã gián tiếp gây nguy hại cho an toàn thông tin của khách hàng. Tệ hại hơn nó làm gián đoạn hoạt động trên website của bạn, mất uy tín với khách hàng, và nhiều thứ khác nữa…

Vậy SQL Injection là gì? Nó có thể gây hại như thế nào đối với trang web của bạn?
SQL injection là một kỹ thuật cho phép những kẻ tấn công lợi dụng lỗ hổng của việc kiểm tra dữ liệu đầu vào trong các ứng dụng web và các thông báo lỗi của hệ quản trị cơ sở dữ liệu trả về để inject (tiêm vào) và thi hành các câu lệnh SQL bất hợp pháp. SQL injection có thể cho phép những kẻ tấn công thực hiện các thao tác, delete, insert, update,… trên cơ sở dữ liệu của ứng dụng, thậm chí là server mà ứng dụng đó đang chạy, lỗi này thường xảy ra trên các ứng dụng web có dữ liệu được quản lý bằng các hệ quản trị cơ sở dữ liệu như SQL Server, MySQL, Oracle, DB2, Sysbase…
Các khai thác phổ biển của SQL Injection:
– Đăng nhập không mật khẩu
– Truy vấn lấy thông tin
– Cập nhật thông tin
– Xóa thông tin
– Xóa bảng
– Tấn công sử dụng stored-procedures
– …
Video Demo Tấn công SQL Injection trong ASP.NET

Tóm tắt Video

  • Tạo Cơ sở dữ liệu bảng Member (Lưu thông tin thành viên)
  • Tạo dự án ASP.NET mới
  • Tạo trang Đăng nhập, trang quản lý Member
  • Viết code đăng nhập, code tìm kiếm thành viên
  • Demo tấn công SQL Injection
  • Đăng nhập không mật khẩu
  • Truy vấn lấy thông tin bảng Member
  • Thêm, Xóa, Sửa trên bảng Member
  • Xóa bảng Member…
  • Cách phòng tránh.
Trong thực tế thì hoàn toàn không đơn giản như vậy, nhưng không vì thế mà chúng ta chủ quan, lơ là vấn đề bảo mật.
Nếu bạn đã hoàn thành theo hướng dẫn mà vẫn gặp khó khăn, hãy tải mã nguồn ứng dụng tại đây:  Download

Cảm ơn bạn đọc và mình luôn đánh giá cao phản hồi của bạn.