Cách thức thực thi một trang web động

Một điều thật tuyệt vời là Visual Studio sử dụng một trình IDE chung cho toàn bộ ngôn ngữ lập trình (ASP.NET, VB.NET, C#,…). Điều này đảm bảo tính nhất quán cho các ngôn ngữ trên nền .NET, giúp bạn chỉ cần “Học một lần nhưng áp dụng mọi nơi”.

Tr o n g đó:

C ửa s ổ giao d i ện chính c ủ a mô i t r ư ờng phá t tr i ể n tích h ợ p.

Tab Design: để hiển thị trang web ở chế độ Design, tức là cho phép sửa chữa nội dung trang web trực quan.

M ở trang ở c hế độ Design

• Tab Source: Mở trang ở chế độ mã nguồn HTML. Tại đây người dùng có thể soạn thảo trực tiếp các thẻ HTML.

M ở trang ở c hế độ Source

Tab Split: Cho phép xem trang web đồng thời ở cả hai chế độ.

M ở trang ở c hế độ kết h ợp, v ừa xem code HTML v ừ a xem Design.

M ở c ửa s ổ s oạn Code (C#, VB.NET

Ngoài thao tác trực tiếp thông qua hệ thống menu, nút lệnh, người dùng còn có thể sử dụng tổ hợp các phím tắt. (Mở menu bar và xem tổ hợp phím tắt bên cạnh). Ví dụ: Shift+F7 để xem ở chế độ Design, F7 xem ở chế độ Code, F4 Focus tới Properties….

Giao d iệ n c ủa h ệ th ố ng IDE.

Để tạo một trang web động đơn giản chúng ta cần tối thiểu một cơ sở dữ liệu có thể là Access có thể là sql server hoặc file database… Sau đó là việc ta kết nối website với Database trên để có thể thực hiện chức năng cập nhật sửa xóa thông tin.

Chúng ta có thể bắt đầu xây dựng một trang web động đơn giản với ASP.NET đầu tiên.

Ví dụ:

Ta có cơ sở dữ liệu là Nhanxet là tập hợp tất cả những lời nhận xét của mỗi chúng ta trong quá trình học môn công nghệ web đã thực hiện.

Chương trình sẽ hiển thị tất cả những lời nhận xét và một hộp thoại cho phép người dùng thêm một nhận xét.

Cơ sở dữ liệu được xây dựng ngay trên nên visual studio 2008 gồm database có tên là nhanxet.mdf gồm một table duy nhất NX(manhanxet (numberic),noidungnhanxet (nvachar(500))).

Các bước thực hiện:

Bước 1: Tạo ứng dụng web

Mở Visual studio 2008 chọn File/New/Web site… Sau đó bạn chọn Language là C#, chọn ứng dụng là ASP.NET web site và đặt tên ứng dụng là nhanxet.

Bước 2: Tạo cơ sở dữ liệu

• Chọn Add new item
• Chọn SQL server database và đặt tên cho cơ sở dữ liệu là nhanxet chọn Add sau đó chọn yes.
• Click phải vào table trong data connection của cửa số server explorer chọn add new table
• Tạo bảng nhanxet cho trường manhanxet tự động tăng 1 đơn vị khi ta thêm dữ liệu vào bảng:

• Để hiển thị nội dung nhận xét chúng ta kéo thẳng bảng nhận xét vào phần Design của trang Default.aspx sau đó tiến hành tô điểm cho Gridview.

• Tiến hành chỉnh sửa Gridview phần Header:

• Sau khi tiến hành chỉnh sửa ta thêm vào điêu khiển TextBox và nút Button như hình vẽ sau:

• Toàn bộ việc thiết kế đã hoàn tất chúng ta có thể thêm điều khiển vào Gridview như chỉnh sửa thông tin và xóa thông tin:

• Chúng ta tiến hành viết code đầu tiên ta click kép vào màn hình và viết sự kiện Page load (khi vào trang web) nội dung như sau:

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

GridView1.DataBind();

}

}

• Tiếp theo chúng ta viết thêm sự kiện thêm thông tin:

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Data.Sql;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

GridView1.DataBind();

}

protected void Button1_Click(object sender, EventArgs e)

{

string con = ConfigurationManager.ConnectionStrings[

"nhanxetConnectionString1"].ConnectionString;

SqlConnection cn = new SqlConnection(con);

cn.Open();

SqlCommand cmd = new SqlCommand(

"insert into nhanxet(noidungnhanxet) values('" + TextBox1.Text + "')", cn);

cmd.ExecuteNonQuery();

cmd.Dispose();

cn.Close();

GridView1.DataBind();

}

}

• Chúng ta đã hoàn thành xong trang web tập hợp nhận xét của học viên tham gia môn công nghệ web chúng ta có thể khởi động website bằng phím F5 hoặc nhấn vào nút start.