Trong bài viết này chúng ta sẽ học ngày đầu tiên trong dãy series bài học dự án MVC 5 trong bảy ngày, bài học đầu tiên bao gồm các nội dung sau:
Ngày một chỉ đơn giản là là ấm người. Trong ngày đầu tiên này chúng ta sẽ hiểu tại ASP.NET MVC tốt hơn WebForms? Vấn đề của WebForms và chúng ta sẽ có 2 bài thực hành, một là về Controller và một về Views.
Với mỗi bài thực hành chúng ta sẽ đi qua phần Câu hỏi và Trả lời (question and answer) nhỏ để hiểu được nội dung của bài thực hành cũng như về cách MVC hoạt động. Vì thế cấu trúc của bài viết sẽ bao gồm hai phần và bài thực hành (lab) và phần câu hỏi và trả lời (question and answer).
Trong bất kỳ bài thực hành nào mà bạn có câu hỏi mà không có câu trả lời trong phần Q and A (thống nhất dùng từ này cho gọn nhen các bạn lười quánh quá) đừng ngần ngại hãy đặt chúng trong hộp thoại phản hồi (comment) bên dưới. Chúng tôi sẽ trả lời rõ ràng cho mọi câu hỏi và nếu chúng tôi tìm thấy các câu hỏi cho cùng một vấn đề thì chúng tôi sẽ thêm nó vào trong bài viết này, điều này sẽ giúp mạng lại lợi ích cho các bạn đọc bài viết sau này.
Chắc chắn bài viết này của chúng tôi sẽ làm bạn trở thành lập trình viên ASP.NET MVC.
Xin lỗi về điều rắc rối này, bạn vui lòng đọc lại phát biểu trên một lần nữa và nếu bạn thấy đó đúng thì loại biết này là điều bạn cần đọc.
Rất nhiều lập trình viên ASP.NET bắt đầu với MVC thì điều đâu tiên họ nghĩ là MVC là một điều khó khăn mới, một điều mới mẻ của ASP.NET. Nhưng sự thực là ASP.NET là framework (nền tảng) để tạo ứng dụng web (web application) trong khi đó MVC là kiến trúc tuyệt vời để tổ chứng và sắp xếp code(mã lập trình) của bạn một cách tốt nhất. Vì thế thay vì nói MVC bạn có thể nói là ASP.NET MVC.
OK vậy nếu ASP.NET MVC là mới mẻ vậy cái cũ của APS.NET gọi là gì? Nó được gọi là "ASP.NET WEBFORMS."
Để tôi sửa lại từ vựng của bạn (thằng cha này rãnh vãi từ vựng của nó chứ của mình đâu.)
"Bạn đọc bài viết này bởi vì bạn đã biết về ASP.NET WebForms và bạn muốn năng cấp khả năng bản thân lên thành ASP.NET MVC."
Ok, bây giờ bạn đã hiểu đúng từ vựng, chào mừng bạn đến với thế giới của ASP.NET MVC và bắt đầu bài học này.
Nếu như bạn nhìn thấy sự phát triển của các ngôn ngữ lập trình của Microsoft từ thời của VB(visual basic), nó là một dạng của RAD - Rapid Application Development (là một dạng mô hình, hay các nỗ lực để việc phát triển ứng dụng được trở nên nhanh chóng) và Visual Programming Approach (phương pháp lập trình trực quan - bạn có thể hiển đơn giản là kéo thả để tạo chương trình mà không cần dùng code). Lập trình trực quan đã được Microsoft phát triển rất công điều đó được thể hiện qua IDE - Integrated Development Environment (Môi trường phát triển tích hợp - ở đây bạn hiểu đơn giản là các chương trình dùng để hỗ trợ việc phát triển ứng dụng hay lập trình) của Microsoft có tên là "Visual Studio".
Bởi vì khi sử dụng Visual Studio, lập trình viên chó thể kéo thả các UI Elements trên khu vực thiết kế (designer area) và tại khu vực mã code phía sau (backend = code behind chả biết nó dùng sai từ hay mình dịch sai từ nữa, ghi backend đếch hiểu gì cả) sẽ tự đông sinh ra các mã tạo các đối tượng UI mà bạn vừa mới kéo thả. Các mã này được gọi là "Behind code" hoặc "Code Behind" (à hiểu rùi tác giả cố tìm một từ để thay thế code behind trước khi giới thiệu về nó). Trong "Code Behind" lập trình viết có thể viết các luận lý (logic) điều khiển hay xử lý các đối tượng UI này.
Vì thế kiến trúc RAD của Microsoft có hai điều một là UI và một là Code Behind. Vì thế ASP.NET Web Forms mà bạn thường thấy thì luôn có hai tập tin là ASPX và ASPX.CS, hoặc trong WPF bạn sẽ thấy là XAML và XAML.CS và còn nhiều thứ khác...
Hãy để chúng tôi cố gắng giải thích tại sao ASP.NET MVC có hiệu suất thơn trong thí nghiệm trên. Hãy theo dõi một đoạn code UI đơn giản và Code Behind của UI này.
Một mã UT Text Box đơn giản trên WebForm:
Trong Code Behind chúng tôi sẽ viết một vài luận lý (logic) cơ bản để điều khiển giá trị của Text Box và màu nền của Text Box như sau:
Và khi ta chạy ứng dụng ta sẽ được kết quả như bên dưới.
Now nếu bây giờ gì đoạn mã HTML mà APS.NET WebForm tạo ra ta sẽ thấy một cái gì đó như bên dưới:
Bây giờ hãy ngược đọc một lúc, nhắm mắt lại và suy nghĩ (chả nghĩ được gì hết). Hãy thử trả lời các câu hỏi bên dưới: (khổ quá nhắm rùi có đọc được câu hỏi đâu mà trả lời.)
Đây là cách hiệu quả để tạo HTML? Bạn cần thiết phải đi một chuyến du lịch dài đến Server và trở về cung cấp cho trình duyệt một đoạn mã HTML đơn giản ở trên.
Lập trình viên không thể viết mã HTML trực tiếp, điều này quá khó khăng?
Như bạn thấy thấy mỗi một request điều phải chạy qua Server Control để chuyển đổi thành mã HTML và trả về cho người dùng. The Conversion (sự chuyển đổi) này càng phức tạp hơn khi chúng ta có các mã HTML dạng lưới (grids), dạng cây (tree view) ví dụ như là viết đoạn code HTML hiển thị ra một cấu trúc table (bảng) phức tạp thì các các mã sinh ra HTML sinh ra từ ASP.NET WebForms cũng phức tạp theo cấp số nhân. Và viêc chuyển đổi (conversion) này làm ảnh hưởng tới Response Time (thời gian đáp ứng).
Dưới đây là sơ đồ hiển thị kích thước nội dụng của trang được tạo ra từ WebFrom và ASP.NET MVC.
Sự gia tăng kích thước này trong ASP.NET WebForm là vì ViewState đã tự phát sinh ra thêm các nội dung bên ngoài để thực hiện việc lưu lại States khi PostBack. Đã có rất nhiểu thảo luận rằng "ViewState có thể được vô hiêu hóa" nhưng sau đó thì chúng ta làm thể nào lưu trữ lại được States khi PostBack, tất nhiên có thể điều chỉnh sử dụng ViewState cho hợp lý tuy nhiên đó không phải là giải pháp, dưới đây là hình minh họa các nội dung và ViewSate tạo ra trên trang (web page).
Và giải pháp cho vấn đề này là "Vứt bỏ SERVER CONTROLS".
Note: Ban vấn đề còn lại bên dưới là những vấn đề của chiếc bánh ngọt ngào nảy sinh do sự hiện diện của mã phía sau (code behind) và máy chủ điều khiển (server controls), nhưng vấn đề chính ở đây vẫn là hiệu suất (performance).
Vậy thẻ Lable sẽ tạo ra là thẻ DIV hay thẻ SPAN của HTML? Khi chạy đoạn mã trên bạn sẽ sẽ nhận được đoạn mã HTML tương ứng bên dưới, the LABEL sẽ tạo ra the SPAN của HTML, thẻ Literal sẽ tạo ra một đoạn text bình thường (tức là không có bất kỳ thẻ HTML nào được tạo ra), thẻ Panel sẽ tạo ra thẻ DIV.
Vì vậy thay vì tạo ra HTML bằng cách sử dụng Server Controls tại sao lại không viết HTML một cách trực tiếp và nắm toàn quyền điều khiển hay kiểm soát HTML.
Vì vậy giải pháp cho vấn đề này là "KHÔNG SỬ DỤNG SERVER CONTROLS" và làm việc trực tiếp với HTML. Lợi ích tuyệt vời khác của việc thao tác trực tiếp với HTML là các nhà thiết kế có thể làm việc độc lập nhưng liên kết chặt chẽ với đội ngũ phát triển, hay các lập trình viên. Họ có thể tạo ra các HTML bằng các ứng dụng thiết kế yêu thích của mình như Dreamweaver, FrontPage,... và thiết kế chúng một cách độc lập. Nếu cúng ta sử dụng SERVER CONTROLS thì các ứng dụng thiết kế này sẽ không thể xác định chúng một cách dễ dàng.
"Sorry các bạn trong thời gian tới bận tối mắt tối mũi, nên chả còn time, vì vướng bận bên Java, nên loạt bài viết này minh xin tạm dừng, dự tính tháng sau mới viết tiếp lại chủ để bên C# này được, mong các bạn thông cảm và đón đọc trong thời gian tới, thank you."
- Giới thiệu.
- Bạn cần gì để học ASP.NET MVC?
- Phân biệt ASP.NET và MVC và Web Forms.
- Vấn đề của ASP.NET Web Forms.
- Giải pháp cho vấn đề của ASP.NET Web Forms là gì?
- Làm thế nào Microsoft ASP.NET MVC giải quyết các vấn để của Web Form?
- Tìm hiểu Controller trong ASP.NET MVC.
- Tìm hiểu Views trong ASP.NET MVC.
- Bài thực hành 1 - Tạo Controller Hello World đơn giản.
- Phần câu hỏi và trả lời cho bài thực hành 1.
- Bài thực hành 2 - Tạo Views.
- Phần câu hỏi và trả lời cho bài thực hành 2.
- Bài học ngày thứ 2 sẽ có gì?
Giới thiệu:
Như tiêu đề đã giới thiệu "Học MVC trong 7 ngày", vì thế loạt bài viết này có tổng công 7 bài viết và mỗi ngày sẽ học một bài viết. Vì thế nếu bạn bắt đầu đầu loại bài này vào thứ hài và trở thành chàng trai MVC và này cuối cùng của tuần.Ngày một chỉ đơn giản là là ấm người. Trong ngày đầu tiên này chúng ta sẽ hiểu tại ASP.NET MVC tốt hơn WebForms? Vấn đề của WebForms và chúng ta sẽ có 2 bài thực hành, một là về Controller và một về Views.
Với mỗi bài thực hành chúng ta sẽ đi qua phần Câu hỏi và Trả lời (question and answer) nhỏ để hiểu được nội dung của bài thực hành cũng như về cách MVC hoạt động. Vì thế cấu trúc của bài viết sẽ bao gồm hai phần và bài thực hành (lab) và phần câu hỏi và trả lời (question and answer).
Trong bất kỳ bài thực hành nào mà bạn có câu hỏi mà không có câu trả lời trong phần Q and A (thống nhất dùng từ này cho gọn nhen các bạn lười quánh quá) đừng ngần ngại hãy đặt chúng trong hộp thoại phản hồi (comment) bên dưới. Chúng tôi sẽ trả lời rõ ràng cho mọi câu hỏi và nếu chúng tôi tìm thấy các câu hỏi cho cùng một vấn đề thì chúng tôi sẽ thêm nó vào trong bài viết này, điều này sẽ giúp mạng lại lợi ích cho các bạn đọc bài viết sau này.
Chắc chắn bài viết này của chúng tôi sẽ làm bạn trở thành lập trình viên ASP.NET MVC.
Chúng ta cần gì để học ASP.NET MVC?
Chúng ta chỉ cần Visual Studio và tin tốt là Visaul Studio là hoàn toàn miễn phí. Bạn có thể download Visual Studio Community Edition (VS phiên bản cộng đồng) từ trang web http://www.visualstudio.com/, không trả phí download, không có vấn đề về bản quyền (license) và không cần móc sâu ví tiền của mình.Hiểu về ASP.NET vs MVC vs WebForms.
"Bạn đọc bài viết này là bởi vì bạn đã biết về ASP.NET và bạn muốn nân cấp khả năng bản thân với MVC."Xin lỗi về điều rắc rối này, bạn vui lòng đọc lại phát biểu trên một lần nữa và nếu bạn thấy đó đúng thì loại biết này là điều bạn cần đọc.
Rất nhiều lập trình viên ASP.NET bắt đầu với MVC thì điều đâu tiên họ nghĩ là MVC là một điều khó khăn mới, một điều mới mẻ của ASP.NET. Nhưng sự thực là ASP.NET là framework (nền tảng) để tạo ứng dụng web (web application) trong khi đó MVC là kiến trúc tuyệt vời để tổ chứng và sắp xếp code(mã lập trình) của bạn một cách tốt nhất. Vì thế thay vì nói MVC bạn có thể nói là ASP.NET MVC.
OK vậy nếu ASP.NET MVC là mới mẻ vậy cái cũ của APS.NET gọi là gì? Nó được gọi là "ASP.NET WEBFORMS."
Để tôi sửa lại từ vựng của bạn (thằng cha này rãnh vãi từ vựng của nó chứ của mình đâu.)
"Bạn đọc bài viết này bởi vì bạn đã biết về ASP.NET WebForms và bạn muốn năng cấp khả năng bản thân lên thành ASP.NET MVC."
Ok, bây giờ bạn đã hiểu đúng từ vựng, chào mừng bạn đến với thế giới của ASP.NET MVC và bắt đầu bài học này.
Giới thiệu về ASP.NET Web Form.
Trong suốt 12 năm qua ASP.NET Webform đã rất thành công trong lãnh vực phát triển ứng dụng web. Hãy để chúng tôi tìm hiểu bí mật "điều gì đã làm cho cho Webform's trở nên quá phổ biến và thành công".Nếu như bạn nhìn thấy sự phát triển của các ngôn ngữ lập trình của Microsoft từ thời của VB(visual basic), nó là một dạng của RAD - Rapid Application Development (là một dạng mô hình, hay các nỗ lực để việc phát triển ứng dụng được trở nên nhanh chóng) và Visual Programming Approach (phương pháp lập trình trực quan - bạn có thể hiển đơn giản là kéo thả để tạo chương trình mà không cần dùng code). Lập trình trực quan đã được Microsoft phát triển rất công điều đó được thể hiện qua IDE - Integrated Development Environment (Môi trường phát triển tích hợp - ở đây bạn hiểu đơn giản là các chương trình dùng để hỗ trợ việc phát triển ứng dụng hay lập trình) của Microsoft có tên là "Visual Studio".
Bởi vì khi sử dụng Visual Studio, lập trình viên chó thể kéo thả các UI Elements trên khu vực thiết kế (designer area) và tại khu vực mã code phía sau (backend = code behind chả biết nó dùng sai từ hay mình dịch sai từ nữa, ghi backend đếch hiểu gì cả) sẽ tự đông sinh ra các mã tạo các đối tượng UI mà bạn vừa mới kéo thả. Các mã này được gọi là "Behind code" hoặc "Code Behind" (à hiểu rùi tác giả cố tìm một từ để thay thế code behind trước khi giới thiệu về nó). Trong "Code Behind" lập trình viết có thể viết các luận lý (logic) điều khiển hay xử lý các đối tượng UI này.
Vì thế kiến trúc RAD của Microsoft có hai điều một là UI và một là Code Behind. Vì thế ASP.NET Web Forms mà bạn thường thấy thì luôn có hai tập tin là ASPX và ASPX.CS, hoặc trong WPF bạn sẽ thấy là XAML và XAML.CS và còn nhiều thứ khác...
Các vấn đề của ASP.NET Web Forms.
Khi ASP.NET WebForm đang rất thành công như vậy, tại sao Microsoft còn nghĩ tới việc tạo ra ASP.NET MVC. Vấn đề chính ở đây là hiệu suất, hiệu suất và hiệu suất. Trong hầu hết các ứng dụng web có hai khía cạch để định nghĩa hiệu suất.- Response time (thời gian đáp ứng): Mất bao lâu để Server (máy chủ) đáp ứng các yêu cầu.
- Bandwidth consumption (Băng thông tiêu thụ): Bao nhiêu dữ liệu được gửi đi.
Vấn đề về Response Time:
Hãy để chúng tôi thử giải thích tại sao Respone Time (thời gian đáp ứng) chậm hơn khi sử dụng ASP.NET WebForm. Chúng tôi có một bài test load website (tải website về trình duyệt) nhỏ được thí nghiệm trên ASP.NET WebForm và ASP.NET MVC chúng tôi tìm thấy ASP.NET thì nhanh hơn gấp 2 lần (twice faster). Bạn có thể đọc thêm cách mà thí nghiệm này được thực hiện tại http://www.codeproject.com/Articles/864950/ASP-NET-MVC-vs-ASP-NET-WebForm-performance-compari
Hãy để chúng tôi cố gắng giải thích tại sao ASP.NET MVC có hiệu suất thơn trong thí nghiệm trên. Hãy theo dõi một đoạn code UI đơn giản và Code Behind của UI này.
Một mã UT Text Box đơn giản trên WebForm:
<asp:TextBox ID="TextBox1" runat="server">
Trong Code Behind chúng tôi sẽ viết một vài luận lý (logic) cơ bản để điều khiển giá trị của Text Box và màu nền của Text Box như sau:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = "Make it simple";
TextBox1.BackColor = Color.Aqua;
}
{
TextBox1.Text = "Make it simple";
TextBox1.BackColor = Color.Aqua;
}
Và khi ta chạy ứng dụng ta sẽ được kết quả như bên dưới.
Now nếu bây giờ gì đoạn mã HTML mà APS.NET WebForm tạo ra ta sẽ thấy một cái gì đó như bên dưới:
<input name="TextBox1" type="text" value="Make it simple" id="TextBox1" style="background-color:Aqua;" />
Bây giờ hãy ngược đọc một lúc, nhắm mắt lại và suy nghĩ (chả nghĩ được gì hết). Hãy thử trả lời các câu hỏi bên dưới: (khổ quá nhắm rùi có đọc được câu hỏi đâu mà trả lời.)
Đây là cách hiệu quả để tạo HTML? Bạn cần thiết phải đi một chuyến du lịch dài đến Server và trở về cung cấp cho trình duyệt một đoạn mã HTML đơn giản ở trên.
Lập trình viên không thể viết mã HTML trực tiếp, điều này quá khó khăng?
Như bạn thấy thấy mỗi một request điều phải chạy qua Server Control để chuyển đổi thành mã HTML và trả về cho người dùng. The Conversion (sự chuyển đổi) này càng phức tạp hơn khi chúng ta có các mã HTML dạng lưới (grids), dạng cây (tree view) ví dụ như là viết đoạn code HTML hiển thị ra một cấu trúc table (bảng) phức tạp thì các các mã sinh ra HTML sinh ra từ ASP.NET WebForms cũng phức tạp theo cấp số nhân. Và viêc chuyển đổi (conversion) này làm ảnh hưởng tới Response Time (thời gian đáp ứng).
Vấn đề về tiêu thụ băng thông (Bandwidth consumption):
Viewstate là một người bạn rất thân thiết và một người bạn luôn ở bên các lập trình viên ASP.NET trong 10 năm qua bởi vì nó giúp tự động lưu trữ lại States (trang thái) PostBack (kiểu như thông tin người dùng điền vào sau khi gửi lên server thấy không hợp lệ thanh vì điền lại từ A-Z thì người dùng chỉ cẩn chỉnh lại những chỗ bị sai) và điều này làm giảm bớt thời gian của các lập trình viên. Tuy nhiên các tác hại đi kèm là là phải tra một chi phí lớn (ý ở đây là dung lượng mà Viewstate tạo ra là rất lớn), vì Viewsate làm tăng kích thước của trang (page) một cách đáng kể. Bạn có thể thấy điều này qua bài kiểm tra (test) của chúng tôi, bạn sẽ thấy ViewState làm tăng gấp đôi kích thước trang (page size) so với ASP.NET MVC.Dưới đây là sơ đồ hiển thị kích thước nội dụng của trang được tạo ra từ WebFrom và ASP.NET MVC.
Sự gia tăng kích thước này trong ASP.NET WebForm là vì ViewState đã tự phát sinh ra thêm các nội dung bên ngoài để thực hiện việc lưu lại States khi PostBack. Đã có rất nhiểu thảo luận rằng "ViewState có thể được vô hiêu hóa" nhưng sau đó thì chúng ta làm thể nào lưu trữ lại được States khi PostBack, tất nhiên có thể điều chỉnh sử dụng ViewState cho hợp lý tuy nhiên đó không phải là giải pháp, dưới đây là hình minh họa các nội dung và ViewSate tạo ra trên trang (web page).
Và giải pháp cho vấn đề này là "Vứt bỏ SERVER CONTROLS".
Note: Ban vấn đề còn lại bên dưới là những vấn đề của chiếc bánh ngọt ngào nảy sinh do sự hiện diện của mã phía sau (code behind) và máy chủ điều khiển (server controls), nhưng vấn đề chính ở đây vẫn là hiệu suất (performance).
Tùy chỉnh HTML (HTML customization).
Khi chúng ta đã trở thành nô lệ của mã phía sau (code behind) và ASP.NET WEB Server Controls, chúng không thể bất kỳ ý tưởng nào để có thể đưa HTML ra ngoài và làm thế nào để có thể sử dụng chúng một cách hiệu quả. Ví dụ bạn nhìn thấy một đoạn mã phía sau của ASPX code bạn có thể đoán được đoạn mã HTML nào sẽ được tạo ra từ mã phía sau (code behind) của ASP.NET WebForm?
<asp:Label ID="Label1" runat="server" Text="I am label">
<asp:Literal ID="Literal1" runat="server" Text="I am a literal">
<asp:Panel ID="Panel1" runat="server">I am a panel
<asp:Literal ID="Literal1" runat="server" Text="I am a literal">
<asp:Panel ID="Panel1" runat="server">I am a panel
Vậy thẻ Lable sẽ tạo ra là thẻ DIV hay thẻ SPAN của HTML? Khi chạy đoạn mã trên bạn sẽ sẽ nhận được đoạn mã HTML tương ứng bên dưới, the LABEL sẽ tạo ra the SPAN của HTML, thẻ Literal sẽ tạo ra một đoạn text bình thường (tức là không có bất kỳ thẻ HTML nào được tạo ra), thẻ Panel sẽ tạo ra thẻ DIV.
<span id="Label1">I am label</span>
I am a literal
<div id="Panel1">I am a panel</div>
I am a literal
<div id="Panel1">I am a panel</div>
Vì vậy thay vì tạo ra HTML bằng cách sử dụng Server Controls tại sao lại không viết HTML một cách trực tiếp và nắm toàn quyền điều khiển hay kiểm soát HTML.
Vì vậy giải pháp cho vấn đề này là "KHÔNG SỬ DỤNG SERVER CONTROLS" và làm việc trực tiếp với HTML. Lợi ích tuyệt vời khác của việc thao tác trực tiếp với HTML là các nhà thiết kế có thể làm việc độc lập nhưng liên kết chặt chẽ với đội ngũ phát triển, hay các lập trình viên. Họ có thể tạo ra các HTML bằng các ứng dụng thiết kế yêu thích của mình như Dreamweaver, FrontPage,... và thiết kế chúng một cách độc lập. Nếu cúng ta sử dụng SERVER CONTROLS thì các ứng dụng thiết kế này sẽ không thể xác định chúng một cách dễ dàng.
Sử dụng lại các lớp mã phía sau? (Reusability of code behind class).
"Sorry các bạn trong thời gian tới bận tối mắt tối mũi, nên chả còn time, vì vướng bận bên Java, nên loạt bài viết này minh xin tạm dừng, dự tính tháng sau mới viết tiếp lại chủ để bên C# này được, mong các bạn thông cảm và đón đọc trong thời gian tới, thank you."
No comments:
Post a Comment