Lab 2 sử dụng các ASP NET web control cơ bản

Lab 2: Sử dụng ASP.NET Web control Mục tiêu - Sử dụng thành phần web server control - Sử dụng lớp StreamReader StreamWriter để đọc ghi file dạng text - Các thao tác xử lý chuỗi, chia chuỗi, thay chuỗi Yêu cầu - Đã làm quen với server control bản, - Đã học qua lớp xử lý nhật xuất file C# Kịch - Các trang web thường có phần GuestBook, cho phép user lưu lại comment cho chủ nhân trang web Trong tạo form minh họa dạng GuestBook, cho user nhập vào thông tin: o Tiêu đề o Họ tên o Địa email o Nội dung comment - Các thông tin lưu lại server (thông qua file text) - Những entry user trước post lên hiển thị trang - Hình minh họa form GuestBook Hình 1: Giao diện form GuestBook thực Hướng dẫn - Phần thiết kế form Guestbook.aspx sau: Hình 2: Phần thiết kế form - Chi tiết control form trình bày bảng Tên control Kiểu Thuộc tính Ý nghĩa txtTieuDe TextBox TextMode = SingleLine Nhập tiêu đề comment txtHoTen TextBox TextMode = SingleLine Nhập họ tên txtEmail TextBox TextMode = SingleLine Địa email txtNoiDung TextBox TextMode = MultiLine Nhập nội dung comment Rows = Btn_GoiND Button Thực thi hành động post comment lên server Trình xử lý kiện thêm entry vào file EntryComment Span Runat = server Chứa toàn entry (HTML comment lấy từ server file server control) Bảng 1: Mô tả chi tiết control web form - Phần xử lý code behind bao gồm có phần o Phần 1: Xử lý thêm entry vào file lưu server, phần xử lý đặt trình xử lý kiện click button Btn_GoiND Toàn phần xử lý button liệt kê bên code Code 1: Trình xử lý kiện click button Btn_GoiND Lưu ý: đoạn code lưu entry file text server cuối entry có ký tự nhận dạng kết thúc “#END”, mục đích để sau ta nhanh chóng lọc entry hiển thị bước sau File chứa nội dung comment “data.txt” đường dẫn với page chứa thông tin dạng text sau: Hình 3: Minh họa file chứa nội dung comment o Phần 2: Phần hiển thị toàn entry comment lên form Phần xử lý phương thức ReadComment(), gọi kiện Page_Load Web form Code 2: Gọi hàm hiển thị comment kiện Page_Load Code 3: Đọc file “data.txt” chứa nội dung comment - Trong phần xử lý đọc ta làm theo bước sau o Đọc toàn nội dung file comment o Chia entry vào chuỗi o Với chuỗi chứa entry, tat hay ký tự xuống dòng tab break để hiển thị trình duyệt o Cuối định dạng nội dung comment vào tag đưa vào thuộc tính InnerHTML span có tên EntryComment Tóm lại: có nhiều cách hiển thị nội dung comment form, sinh viên tùy ý chọn thức thích hợp theo quan điểm cá nhân Code tham khảo, sinh viên nên dựa vào mà viết lại hoàn chỉnh Phần mở rộng: - Sinh viên bổ sung thêm trường thông tin o Ngày tháng năm viết comment hiển thị thông tin lên với entry comment o Thử không sử dụng tag span EntryComment mà dùng Web control Table để hiển thị comment Tìm hiểu lớp Table, TableRow TableCell… o Design lại form GuestBook cho hợp lý =oOo= Lab 3: Sử dụng Web control & Validation Controls Mục tiêu - Sử dụng web control trang ASP.NET o TextBox, Button, DropDownList - Sử dụng input validation controls trang ASP.NET o RequiredFieldValidator o CompareValidator o RegularExpressionValidator o ValidationSummary - Hiển thị thông báo lỗi nhập liệu không hợp lệ Yêu cầu - Đã làm quen với server control - Biết xử lý kiện ASP.NET web control Kịch - Xây dựng trang web đăng ký phòng cho hội thảo khoa học Các nhà khoa học phải đăng ký online trước, tạo cho account sau đăng ký xong thì, họ đăng nhập vào trang web hội nghị để đăng ký phịng, xem tiện ích khác, dịch vụ mà suốt trình lưu trú user dùng Trong lab xây dựng trang Register_room, yêu cầu user phải nhập thông tin sau o Họ tên, đơn vị công tác, địa email (làm username đăng nhập), mật để đăng nhập, ngày check in số ngày ở, chọn loại phịng - Trang web phải có đầy đủ chức validate liệu user nhập vào Sau tất liệu hợp lệ việc đăng ký thành công! Hướng dẫn - Xây dựng trang web có dạng sau: Hình 1: Mơ tả control web page - Bảng mô tả web control form Bảng 1: Mô tả control thiết kế web page Tên Kiểu Thuộc tính Giá trị txtHoTen TextBox txtCoQuan TextBox txtEmail TextBox txtMatKhau TextBox TextMode Password txtNLMatKhau TextBox TextMode Password Items {“Phòng đơn”, txtCheckin TextBox txtSoNgay TextBox cbxLoaiPhong DropDownList “Phịng đơi”,”Phịng VIP đơn”, “Phịng VIP đơi”} btnDangKy Button lblThongBao Label rfvHoTen RequiredFieldValidator rfvCoQuan revEmail ControlToValidate txtHoTen ErrorMessage “Nhập họ tên” ControlToValidate txtCoQuan ErrorMessage “Nhập quan” RegularExpressionValidato ControlToValidate txtEmail r ErrorMessage “Nhập địa ValidationExpressio email” n Internet email RequiredFieldValidator address rfvMatKhau RequiredFieldValidator ControlToValidate txtMatKhau ErrorMessage “Nhập mật khẩu” rfvNLMatKha RequiredFieldValidator u ControlToValidate txtNLMatKhau ErrorMessage “Nhập mật lần 2” cmvMatKhau CompareValidator ControlToValidate txtNLMatKhau ErrorMessage “Mật không khớp” cmvCheckin CompareValidator ControlToCompare txtMatKhau ControlToValidate txtCheckin ErrorMessage “Nhập ngày Type checkin” Operator Date DataTypeChec k cmvSoNgay CompareValidator ControlToValidate txtSoNgay ErrorMessage “Nhập số 34 35 datagrid 36 37 38 39 } } // hiển thị kết danh sách hát dgSongs.DataSource = dt.DefaultView; dgSongs.DataBind(); Khai báo trình xử lý kiện click button btnSearch protected void btnSearch_Click(object sender, EventArgs e) { FillDataGrid(); // thực tìm kiếm hiển thị ds hát } Thiết kế lại DataGrid để hiển thị danh sách tên hát Trong datagrid ta hiển thị cột, cột tên hát, cột lại chức “chọn”, Chọn chức Property Builder… cho datagrid, chọn tab Columns Thêm Bound Column kết buộc với field SongNam tên hát 10 Thêm button kểu Select cho chức chọn, khai báo thuộc tính “Command Name” SelectSong 11 Chức “chọn” hát vào danh sách để tạo album, chức chọn user kích vào datagrid liệt kê danh sách hát giao diện Do hát chứa dịng datagrid nên kích chọn vào ta phải biết id hát đó, để làm điều ta thiết lập thuộc tính DataKeyField cho datagrid dgSong với id hát Trong hình thiết kế form ta chọn dgSong thiết lập thuộc tính DataKeyField SongID hình minh họa 12 Hình: Khai báo thuộc tính DataKeyField SongID Ta chứa danh sách ID hát chọn biến đối tượng Session[“SelectedSongs”], dạng ArrayList - Khai báo trình xử lý kiện ItemCommand cho DataGrid, kiện gọi cột dạng button kích 13 Nội dung hàm xử lý kiện ItemCommand DataGrid protected void dgSongs_ItemCommand(object source, DataGridCommandEventArgs e) { // lấy id hát dòng chọn int SongID = Convert.ToInt32(dgSongs.DataKeys[e.Item.ItemIndex]); // xử lý button Select chọn if (e.CommandName == "SelectSong") { // kiểm tra xem có id hát chọn hay không if (Session["SelectedSongs"] != null) { ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; 14 if (!SelectedSongs.Contains(SongID)) // chưa có -> thêm SelectedSongs.Add(SongID); } else // khởi tạo session chưa có { ArrayList SelectedSongs = new ArrayList(); SelectedSongs.Add(SongID); Session["SelectedSongs"] = SelectedSongs; } } // hiển thị thông tin số hát chọn lblStatus.Text = "Số hát chọn: " + ((ArrayList)Session["SelectedSongs"]).Count; } Khai báo xử lý user kích vào button “Tạo Album”, button cho phép chuyển user sang trang Album.aspx để thêm album Để gọi chuyển ta dùng: // chuyển hướng sang trang quản lý album Response.Redirect("album.aspx"); Tạo trang Album.aspx có layout sau: Các control page 15 Tên Kiểu Thuộc tính Diễn giải txtAlbumName TextBox Nhập tên album btnCreateAlbum Button Chức tạo album rfvAlbumName RequiredFieldValidator ControlToValidate = txtAlbumName Xác nhận xem user có nhập tên album hay khơng, khơng nhập không tạo ErrorMessage=”Phải nhập tên Album” dgSongs DataGrid lblStatus Label DataKeyField = SongID Hiển thị hát chọn trang SongManaging.aspx Hiển thi thông tin: lỗi hồn tất… Khai báo DataGrid dgSongs có cột, cột đầu là: tên hát, tên tác giả, thể loại dạng Bound Column, cột cuối dạng Button Column 16 Hình: khai báo cột tên hát, hiển thị field SongName 17 Hình: khai báo tên tác giả, hiển thị trường ArtisName 18 Hình: Khai báo cột thể loại hiển thị trường GenreName 19 Hình: khai báo cột Xóa, có Command name RemoveSong 10 Tạo hàm FillDataGrid: lấy hát chọn hiển thị lên datagrid protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { FillDataGrid(); } } private void FillDataGrid() { 10 // kiểm tra xem session có tạo chưa 11 if (Session["SelectedSongs"] == null) 12 { 13 lblStatus.Text = "Chưa chọn hát"; 20 14 15 16 17 18 btnCreateAlbum.Enabled = false; return; } ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; 19 // kiểm tra số item chọn 20 if (SelectedSongs.Count < 1) 21 { 22 lblStatus.Text = "Chưa chọn hát"; 23 btnCreateAlbum.Enabled = false; 24 return; 25 } 26 27 // có chọn hát 28 // tạo danh sách id hát 29 string SongIDs=""; 30 foreach (int id in SelectedSongs) 31 SongIDs += id + ", "; 32 // xóa dấu ', cuối 33 SongIDs = SongIDs.Remove(SongIDs.Length - 2, 2); 34 // tạo đối tượng comand, connection, adapter 35 string scnn = ConfigurationManager.AppSettings["ConnectionString"].ToString(); 36 SqlConnection cnn = new SqlConnection(scnn); 37 SqlCommand cmd = new SqlCommand(); 38 cmd.Connection = cnn; 39 cmd.CommandText = "SELECT songid,songname, artistName, genrename FROM songs, artists, genres where songs.artistid = artists.artistid and songs.genreid = genres.genreid and songid in ("+SongIDs+")"; 40 41 SqlDataAdapter da = new SqlDataAdapter(cmd); 42 // tạo bảng lưu liệu 43 DataTable dt = new DataTable(); 44 da.Fill(dt); 45 // fill vào datagrid 46 dgSongs.DataSource = dt.DefaultView; 47 dgSongs.DataBind(); 48 } 11 Khai báo trình xử lý kiện ItemCommand datagrid, chức cho phép user xóa hát danh sách chọn protected void dgSongs_ItemCommand(object source, DataGridCommandEventArgs e) 21 { // chọn cột xóa if (e.CommandName == "RemoveSong" && Session["SelectedSongs"] != null) { ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; //lấy id hát int SongID = Convert.ToInt32(dgSongs.DataKeys[e.Item.ItemIndex]); 10 11 12 13 SelectedSongs; 14 15 16 17 } if (SelectedSongs.Contains(SongID)) { SelectedSongs.Remove(SongID); Session["SelectedSongs"] = FillDataGrid(); } } 12 Khai báo trình xử lý kiện click button: “Tạo album” Hàm xử lý sau protected void btnCreateAlbum_Click(object sender, EventArgs e) { if (!IsValid) return; // nế u chứa validation xong // lấy tên album string AlbumName = txtAlbumName.Text.Trim(); // lưu AlbumID int AlbumID=0; // thực thao tác thêm album string scnn = ConfigurationManager.AppSettings["ConnectionString"]; SqlConnection cnn = new SqlConnection(scnn); SqlCommand cmd = new SqlCommand(); cmd.Connection = cnn; cmd.CommandText = "Insert into Albums values(@albumname,@createDate); select MAX(AlbumID) from albums"; // tạo tên album cmd.Parameters.Add("@albumname", SqlDbType.VarChar); cmd.Parameters["@albumname"].Value = AlbumName; // ngày tạo album cmd.Parameters.Add("@createDate", SqlDbType.SmallDateTime); 22 cmd.Parameters["@createDate"].Value = DateTime.Now.ToString(); try { cnn.Open(); AlbumID = Convert.ToInt32(cmd.ExecuteScalar());// thực thi if (AlbumID > 0) // thêm thành công lblStatus.Text = "Thêm album thành công!"; } catch (SqlException ex) { Response.Write(ex.Message); } finally { cnn.Close(); } // thêm thông tin vào bảng AlbumSong cmd.CommandText = "INSERT INTO AlbumSong values(@AlbumID,@SongID)"; cmd.Parameters.Add("@AlbumID", SqlDbType.Int); cmd.Parameters["@AlbumID"].Value = AlbumID; cmd.Parameters.Add("@SongID", SqlDbType.Int); ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; try { cnn.Open(); foreach (int id in SelectedSongs) { cmd.Parameters["@SongID"].Value = id; cmd.ExecuteNonQuery(); } } catch (SqlException ex) { Response.Write(ex.Message); } finally { cnn.Close(); } // xóa tất chọn SelectedSongs.Clear(); Session["SelectedSongs"] = SelectedSongs; 23 // cập nhật lại giao diện dgSongs.DataSource = null; dgSongs.DataBind(); FillDataGrid() } Bài : - Sinh viên bổ sung thêm trang thêm hát, thêm nghệ sỹ, thêm thể loại thêm hát - Xây dựng trang chính, chứa menu o Quản lý hát – Album: gọi trang SongManaging.aspx o Thêm hát o Thêm nghệ sỹ o Thêm thể loại =oOo= 24 ... the sun Too hard to say good bye GenreID 1 1 1 1 ArtisID 1 3 4 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 All out of love The unforgiven II Nothing else matters My Apocalypse... * FROM genres"; 20 break; 21 22 case 2: // lấy danh sách album 23 cmd.CommandText = "SELECT * FROM albums"; 24 break; 25 } 26 try 27 { 28 da.Fill(dt); // đưa liệu vào datatable 29 } 30 catch (SqlException... Sử dụng Web control & Validation Controls Mục tiêu - Sử dụng web control trang ASP.NET o TextBox, Button, DropDownList - Sử dụng input validation controls trang ASP.NET o RequiredFieldValidator