Create your first ASP.NET 5 (MVC 6) from scratch with Visual Studio 2015 [Part 1]

In this post, I will show you how to create an ASP.NET 5 (MVC 6) from the empty project template in VS 2015 (i used Community RC version). I also explain some new terms used in this new version of ASP.NET. Let’s get started.

My dev environment: Windows 8.1 OS, Visual Studio 2015 Community RC.

First of all, open your VS2015, and create a new blank ASP.NET 5 application.

aspnet5_beginning_demo_1

Continue reading

Install Umbraco 7 in Visual Studio 2015 RC using Nuget Package Management

Today I try to install Umbraco CMS in the new Visual Studio 2015 RC using Nuget Package Management. I will write short because the installation made me disappointed, and took me a lot of time to wait for nothing. If you don’t know what Umbraco is, and what it can do, you can go to its official page (Umbraco website), and its community website (Umbraco Community) to figure out more .

umbraco_7_7

Besides, you can install Umbraco using Webmatrix, Web Platform Installer, or download .zip package from its website. Continue reading

Chèn Captcha vào một ứng dụng ASP.NET MVC

Khi các bạn duyệt web, vào những trang đòi hỏi phải xác minh trước khi thực hiện thao tác nào đó thì bạn thường sẽ thấy một khung nhập dãy kí tự, hoặc con số bất kì nào đó bằng hình ảnh, mà tên gọi của nó thì các bạn cũng quen thuộc đó là captcha, chẳng hạn như thế này

recaptcha_mvc_demo_22

Trong bài viết này, mình sẽ hướng dẫn các bạn đưa captcha này vào ứng dụng web của mình để phục vụ cho việc xác thực chẳng hạn. Sau đây là cách thực hiện.

Ở đây, mình tạo một ứng dụng ASP.NET MVC 4 (beta) trên Visual Studio 2011 Beta. Các bạn hoàn toàn có thể tạo ứng dụng ASP.NET MVC 2 hoặc 3 trên Visual Studio 2010 để thực hiện phần này.

recaptcha_mvc_demo_1

Mình chọn View Engine là Razor với HTML5 template.

recaptcha_mvc_demo_2

Cấu trúc một ứng dụng ASP.NET MVC cơ bản với các thành phần mặc định được Visual Studio tạo ra.

recaptcha_mvc_demo_3

Bước quan trọng tiếp theo, bạn click phải vào project vừa tạo, chọn Manage NuGet Packages… Nếu bạn không tìm thấy tính năng này thì có thể bạn chưa cài đặt tính năng mở rộng dành cho Visual Studio đó là NuGet Package Manager. Bạn có thể vào đường link này để tải về và cài đặt: link.

recaptcha_mvc_demo_4

Bạn gõ vào ô tìm kiếm ở góc trên bên phải là “web helper” và chờ trong giây lát để trình mở rộng tìm kiếm các gói cài đặt có từ khóa như bạn vừa nhập. Bạn chọn ASP.NET Web Helpers Library và chọn nút Install để tiến hành cài đặt vào trong project hiện tại của bạn.

recaptcha_mvc_demo_5

Kết quả là trong thư mục References, bạn sẽ thấy được dll mới được thêm vào trong project.

recaptcha_mvc_demo_6

Bước tiếp theo, bạn vào trang chủ của ReCaptCha để lấy cho mình các key phục vụ cho việc xác thực sau này: link.

recaptcha_mvc_demo_7

Quay lại project của bạn trong Visual Studio, trong khung xem warning và error, bạn có thể thấy những thông báo như thế này.

recaptcha_mvc_demo_8

Để xử lý chúng, bạn mở tập tin Web.config của project lên, bỏ dòng dưới này (bỏ hẳn luôn cũng được).

recaptcha_mvc_demo_9

Sau đó, bạn thực hiện Build lại project và sẽ thấy là các warning và error trước đó không còn nữa.

Bây giờ, chúng ta sẽ đi vào phần chính của bài viết này, đó là đưa captcha và trong ứng dụng web của bạn. Trong minh họa này, mình sẽ đưa captcha vào trong phần Account Register. Bạn mở tập tin Register.cshtml trong thư mục Views –> Account trong project của bạn lên. Tại đây, mình sẽ thực hiện việc đưa phần xác thực captcha vào cuối, sau các phần điền thông tin đăng kí của người dùng. Một vấn đề các bạn sẽ gặp phải là sẽ không tìm thấy @ReCaptCha ở đâu cả.

recaptcha_mvc_demo_10

recaptcha_mvc_demo_12

Bạn mở lại tập tin Web.config và thêm vào dòng dưới này.

recaptcha_mvc_demo_11

Build lại project và trở lại tập tin Register.cshtml, bạn gõ @Microsoft.Web.Helpers. thì sẽ thấy ReCaptCha xuất hiện. Vậy là bạn đã tìm được phần hỗ trợ ReCaptcha để đưa vào ứng dụng của mình.

recaptcha_mvc_demo_13

Bạn quay lên phần đầu của tập tin Register.cshtml và gõ vào dòng dưới này, trong đó phần bôi đen chính là public key mà bạn đã đăng kí với ReCaptCha. Để sử dụng ReCaptCha mà không phải khai báo lại Microsoft.Web.Helpers nhiều lần, bên dưới dòng @model…, bạn khai báo @using Microsoft.Web.Helpers.

recaptcha_mvc_demo_14

Vậy là ta đã thực hiện xong việc hiển thị phần xác thực Captcha ra ngoài giao diện. Việc còn lại là thực hiện việc chứng thực những nội dung người dùng nhập vào có đúng không. Bạn mở tập tin AccountController.cs trong thư mục Controllers của project lên. Thêm dòng sau vào phần khai báo sử dụng refrence.

recaptcha_mvc_demo_15

Vì như mình đã trình bày lúc đầu, trong minh họa này mình thực hiện việc đưa Captcha vào trong phần xác thực thông tin người đăng kí, do đó mình sẽ thực hiện việc xác thực trong Register. Bạn gõ vào đoạn code dưới đây bên trong Register, trong đó phần bôi đen chính là private key mà bạn đăng kí với ReCaptcha. Ý ngĩa của đoạn code này là nếu thông tin người dùng nhập vào không trùng khớp với những gì Captcha đưa ra thì sẽ hiển thị Failed! ra ngoài màn hình.

recaptcha_mvc_demo_16

Build lại project và xem kết quả. Trong trang đăng kí của chúng ta bây giờ đã xuất hiện mục Captcha.

recaptcha_mvc_demo_17

Bạn nhập vào một số thông tin mẫu, vả “cố tình” gõ sai vào ô nhập thông tin captcha để kiểm tra xem chức năng ta mong muốn có thực hiện đúng không.

recaptcha_mvc_demo_18

Oh oh, một thông báo exception xuất hiện.

recaptcha_mvc_demo_19

Không sao, bạn quay trở lại Visual Studio, mở lại tập tin Web.config và thêm vào những dòng sau.

recaptcha_mvc_demo_20

Build lại project và kiểm tra lại kết quả. Hooray, kết quả như mong đợi.

recaptcha_mvc_demo_21

Ngoài thuộc tính theme để chỉnh layout cho ReCaptcha, còn có các thuộc tính khác như là language, tabIndex, các bạn tìm hiểu thêm nhé.

* Trong bài viết này, mình giới thiệu sơ qua cho bạn một phần hỗ trợ cho ứng dụng ASP.NET MVC đó là Web Helpers, được cài đặt thông qua NuGet Package Manager, trong đó ReCaptcha là một phần trong đó.

Mã nguồn cho ví dụ này, các bạn có thể tải về theo đường link này: reCaptcha_Demo.zip

Cấu hình website Umbraco (dành cho IT Admin)

Sau khi đã cài đặt thành công Umbraco, chúng ta sẽ tiến hành cấu hình cơ bản cho Umbraco CMS.

Màn hình giao diện cấu hình ban đầu. Chọn Next để tiếp tục.

umbraco_23

Màn hình thông tin giấy phép bản quyền, chọn Next để tiếp tục.

umbraco_24

Màn hình cấu hình CSDL cho website. Thông tin mặc định theo như chúng ta đã khai báo lúc cài đặt website. Chọn Confirm để tiếp tục. Các bạn hoàn toàn có thể thay đổi lại tùy theo nhu cầu của mình.

umbraco_25

Một chú ý nhỏ khi thực hiện bước này, đó là các bạn nên tắt firewall của trình duyệt virus trước khi chọn nút Confirm, vì nếu không các bạn đôi khi bị chặn kết nối và không thể thực hiện được các bước cấu hình tiếp theo.

Màn hình cài đặt CSDL xuất hiện. Chọn Install để bắt đầu cài đặt.

umbraco_26

Màn hình thông báo việc cài đặt CSDL đã thành công. Chọn Next để tiếp tục cấu hình website.

umbraco_27

Bước kế tiếp là kiểm tra quyền truy cập tập tin. Nếu xuất hiện dòng “Your permission settings are perfect!” thì các quyền truy cập của bạn là hoàn hảo, điều này có nghĩa khi phát triển website, các bạn sẽ không, hoặc ít gặp các lỗi khi cài đặt package cho website của mình. Các bạn nên lưu ý ngay ở phần này, nếu không sau này phát triển website mà gặp lỗi thì sẽ rắc rối lớn, có thể bạn phải cài đặt lại website từ đầu. Chọn Next để tiếp tục.

umbraco_28

Màn hình thiết lập tài khoản cho Admin của site. Các bạn tiến hành điền vào password cho tài khoản này rồi chọn Change Password.

umbraco_29

Màn hình thông báo việc thiết lập tài khoản cho admin thành công, chọn Next để tiếp tục.

umbraco_30

Bước cấu hình cuối cùng trong phần cấu hình website. Nếu bạn chọn mục đầu tiên, có nghĩa là 1 template mang tên “Runway” sẽ được cài đặt thành mặc định, các thành phần sẽ được cài đặt sẵn. Nếu bạn chọn mục thứ 2, tức là website ban đầu sẽ rỗng, và các bạn sẽ xây dựng từ đầu (dành cho những người chuyên nghiệp). Ở đây mình chọn muc đầu tiên và chọn Next để tiếp tục. Để biết “Runway” là gì, các bạn có thể xem video giới thiệu ở ô bên phải.

umbraco_31

Màn hình cài đặt các module cho Umbraco xuất hiện. Bạn có thể chọn module nào mà bạn muốn cài đặt sẵn vào website của mình bằng cách click chọn vào các ô đó rồi chọn nút Install selected modules để tiến hành cài đặt. Nếu bạn không muốn cài đặt module thì chọn bút Continue without installing.

umbraco_32

Màn hình cấu hình cuối cùng sau khi đã thiết lập các bước trước đó thành công. Bạn có thể điền vào thông tin gồm tên (Name) và địa chỉ email để nhận các thông báo về bảo mật và cập nhật nếu có từ website của bạn. Chọn Launch Umbraco để truy cập vào website của bạn.

umbraco_33

Màn hình đăng nhập vào site với tài khoản đã tạo.

umbraco_34

Màn hình làm việc của admin trong Umbraco xuất hiện.

umbraco_35

Như vậy là bạn đã cấu hình thành công cho website Umbraco của mình.

Chúc các bạn thực hiện được những website đẹp và hiệu quả từ Umbraco CMS.

Xử lý lỗi khi cài đặt website Umbraco trên IIS dùng Web Platform Installer

Trong bài trước, mình đã trình bày với các bạn cách cài đặt Umbraco trên localhost sử dụng Web Platform Installer. Sau khi cài đặt, bạn có thể gặp một số lỗi sau khi duyệt site trên trình duyệt sau khi đã cài đặt thành công lên IIS.

Link bài viết trước ở đây.

umbraco_21

Lỗi các bạn có thể gặp như thế này.

umbraco_22

1 trong những lý do cho tình huống này đó là IIS của bạn đang sử dụng, 1 trong các Application Pools, Classic của bạn đang dùng là .NET Framework 4, trong khi đó Umbraco được xây dựng dựa trên .NET Framework 3.5, và các script này đã được hỗ trợ trong .NET Framework 4, do đó, khi load website lên, khi đọc file web.config và không tìm thấy các đoạn script này nên sẽ báo lỗi. Cách xử lý như sau:

– Đầu tiên, các bạn copy file web.config vào 1 khu vực nào đó (backup an toàn trước).

– Sau đó mở file này lên, thực hiện bỏ các dòng sau trong tập tin web.config.

<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, 
 System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
 PublicKeyToken=31BF3856AD364E35"> <!--<section name="scriptResourceHandler" 
 type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, 
 System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
 PublicKeyToken=31BF3856AD364E35" requirePermission="false" 
 allowDefinition="MachineToApplication" />--> <sectionGroup name="webServices" 
 type="System.Web.Configuration.ScriptingWebServicesSectionGroup, 
 System.Web.Extensions, 
 Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <!--<section name="jsonSerialization" 
 type="System.Web.Configuration.ScriptingJsonSerializationSection, 
 System.Web.Extensions, 
 Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
 requirePermission="false" allowDefinition="Everywhere" />--> <!--<section name="profileService" 
 type="System.Web.Configuration.ScriptingProfileServiceSection, 
 System.Web.Extensions, 
 Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
 requirePermission="false" allowDefinition="MachineToApplication" />--> <!--<section name="authenticationService" 
 type="System.Web.Configuration.ScriptingAuthenticationServiceSection, 
 System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
 PublicKeyToken=31BF3856AD364E35" requirePermission="false" 
 allowDefinition="MachineToApplication" />--> <!--<section name="roleService" 
 type="System.Web.Configuration.ScriptingRoleServiceSection, 
 System.Web.Extensions, Version=3.5.0.0, Culture=neutral, 
 PublicKeyToken=31BF3856AD364E35" requirePermission="false" 
 allowDefinition="MachineToApplication" />--> </sectionGroup>

Ở đây mình dùng dấu comment để đề phòng bất trắc thôi. Các bạn có thể xóa hoàn toàn các đoạn mã đó.

– Lưu lại và ghi đè vào file web.config trong thư mục cài đặt Umbraco trên IIS. Duyệt lại web site và xem kết quả.

umbraco_23

Màn hình cấu hình website đã xuất hiện. Như vậy là vệc cài đặt Umbraco đã hoàn tất. :).

Chúc các bạn tạo ra được các website đẹp và hiệu quả từ Umbraco.

Integrating Google Map API Into ASP.NET MVC App

Trong bài này, mình sẽ trình bày cách đưa Google Map vào trong ứng dụng ASP.NET MVC của các bạn.

Đầu tiên, các bạn tạo một project ASP.NET MVC trong Visual Studio, ở đây mình sử dụng MVC 2 và VS 2010. Trong ứng dụng mình sắp tạo dưới đây, mình sử dụng Google Map API v2 (tham khảo tài liệu về nó tại đây). Trong link tham khảo, nó chứa tất cả thông tin, code javascript mẫu mà bạn có thể sử dụng.

Sau khi tạo project, mở trang Index.aspx, bạn thêm vào mã sau:

<asp:Content ID="indexHead" ContentPlaceHolderID="HeadContent" runat="server">

    <script type="text/javascript" src="http://www.google.com/jsapi?key=[your key]"></script>

Trong đoạn mã trên, có 1 chỗ chúng ta cần lưu ý, đó là http://www.google.com/jsapi?key=%5Byour key]. Khi bạn publish website lên 1 host nào đó, bạn cần đăng kí key này từ Google Map để bạn có thể truy cập Map API của Google. Để đăng kí key, rất đơn giản, bạn chỉ việc vào địa chỉ sau vào điền vào domain website của bạn, sau đó generate key.

Dưới đây là đoạn mã javascript để load Google Map vào trang web của bạn. Đoạn mã tương tự có trong link tài liệu Google Map API mà mình đã đưa lúc đầu. Những đoạn mã javascript cần thiết Google đã cung cấp cho chúng ta, việc chúng ta cần làm là sử dụng chúng sao cho có hiệu quả Smile.

<script type="text/javascript">
        var allMarks = [];
        google.load("maps", "2");

        //This function will help us to add the mark at
        //location where user has double clicked. Then
        //we will add all the marks in our array so that
        //we can send it back to the controller
        function initialize() {
            var map = new google.maps.Map2(document.getElementById("map"));
            map.setCenter(new google.maps.LatLng(10.7591800, 106.6624980), 13);
            map.setUIToDefault();
            GEvent.addListener(map, "dblclick", function(overlay, latlng) {
                if (latlng) {
                    var mark = new GMarker(latlng);
                    allMarks.push(latlng);
                    map.addOverlay(mark);
                }
            });

        }
        google.setOnLoadCallback(initialize);

Đoạn javascript dưới đây được dùng để chuyển dữ liệu đến controller. Ở đây chúng ta sẽ tạo ra một đối tượng GMap để lưu dữ liệu.

        //This function will be called for saving the mark
        //for that it will send the data back to the controller
        function saveMap() {

            //gmap object with all values of the map mark
            var gmap = {
                Locations: allMarks,
                Description: Description.value
            }

            //Ajax call for saving the data at the server. It will send the gmap
            //object tot the server
            $.ajax({
                type: "POST",
                url: "/Home/Create",
                data: gmap
            });

Sau khi đã hoàn tất những gì cần thiết trên View, bây giờ chúng ta sẽ thực hiện xử lý trong lớp HomeController, cụ thể là trong hàm Create.

public ActionResult Create(GMap gmap)
{
        Session["MapData"] = gmap;
        return View();
}

Kiểu GMap mà chúng ta dùng có dạng như sau:

public class GMap
{
    public object[] Locations { get; set; }
    public string Description { get; set; }
}

Như vậy công việc của chúng ta đã hoàn tất. Dưới đây là screenshot của ứng dụng khi chạy trên trình duyệt.

googlemap_mvc

 

Link download source code mẫu: here.

Chúc các bạn thành công Smile! Web is beautiful.

P/s: Bài viết này có tham khảo blog Toward Next.

Tutorial: Creating a Simple CRUD Web Application Using ASP.NET MVC 2 (Part 2)

Bây giờ chúng ta sẽ tạo view cho trang Detail để liệt kê thông tin chi tiết một record trong bảng dữ liệu mà chúng ta đã tạo trước đó. Các bạn thực hiện như sau: click phải vào Details trong class HomeController –> Add View.

crud_aspmvc_28

crud_aspmvc_29

Khi bạn click vào nút Details trên trang Index, lúc đó trình duyệt sẽ gửi request đến ứng dụng web của chúng ta và lúc này ứng dụng sẽ nhận phương thức GET, lấy PhoneId của record mà chúng ta đã chọn để xem chi tiết. Do đó công việc của controller lúc này là truy vấn dựa trên thông tin PhoneId đã được gửi đến trong phương thức GET và lấy những dữ liệu cần thiết để “đổ” lên Details View và trả reponse là HTML về cho trình duyệt và người dùng sẽ thấy được thông tin cần thiết.

crud_aspmvc_2

Để thực hiện việc này, trong class HomeController ta gõ mã sau:

public ActionResult Details(int id) { var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id).FirstOrDefault(); return View(phone); }

 

 

 

Build project và xem kết quả trên trình duyệt (click chọn Details trên trình duyệt).

crud_aspmvc_31

Tiếp theo chúng ta sẽ tạo View cho trang Edit và thực hiện các xử lý cho chức năng này. Tương tự với Details, click phải vào Edit –> Add View.

crud_aspmvc_32

Trong class HomeController ta viết mã sau:

// // GET: /Home/Edit/5 public ActionResult Edit(int id) { var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id).FirstOrDefault(); return View(phone); } // // POST: /Home/Edit/5 [HttpPost] public ActionResult Edit(Phone editedPhone) { try { var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == editedPhone.PhoneId) .FirstOrDefault(); phone.Name = editedPhone.Name; phone.PhoneNum = editedPhone.PhoneNum; phone.Desciption = editedPhone.Desciption; phone.GroupName = editedPhone.GroupName; _db.SaveChanges(); return RedirectToAction(“Index”); } catch { return View(); } }

Build project và xem kết quả trên trình duyệt.

crud_aspmvc_33

Chỉnh sửa và xem kết quả.

crud_aspmvc_34

crud_aspmvc_35

 

Bây giờ chúng ta sẽ thực hiện 2 chức năng còn lại là tạo mới và xóa. Thực hiện tương tự, chúng ta tạo các view và xử lý trong class HomeController.

crud_aspmvc_36

crud_aspmvc_37

 

Xử lý cho phương thức Create trong class HomeController:

// // GET: /Home/Create public ActionResult Create() { return View(); } // // POST: /Home/Create [HttpPost] public ActionResult Create([Bind(Exclude = “PhoneId”)]Phone newPhone) { try { _db.Phones.AddObject(newPhone); _db.SaveChanges(); return RedirectToAction(“Index”); } catch { return View(); } }

Khi thực hiện phương thức Create, người dùng không cần phải biết PhoneId là gì. Do đó, bạn có thể dùng Bind và từ khóa Exclude kèm theo thuộc tính không muốn kết xuất để thực hiện việc này. Bên cạnh đó, bạn cũng không mong muốn người dùng thấy giá trị PhoneId này, bạn có thể xóa phần mã mà hiển thị nội dung PhoneId lên trình duyệt trong tập tin Create.aspx.

<div class=”editor-label”> <%: Html.LabelFor(model => model.PhoneId) %> </div> <div class=”editor-field”> <%: Html.TextBoxFor(model => model.PhoneId) %> <%: Html.ValidationMessageFor(model => model.PhoneId) %> </div>

Build project và xem kết quả.

crud_aspmvc_38

Phần PhoneId không hiển thị đúng như yêu cầu. Và điểm đặc biệt trong ASP.NET MVC mà mình muốn giới thiệu đó là khả năng validate thông tin. Chẳng hạn như trong ví dụ trên, mình không điền vào 2 ô Name và PhoneNum, khi chọn nút Create thì ứng dụng sẽ tự động kiểm tra thông tin những trường (field) này trong model mà mình đã tạo ra, những trường nào không hợp lệ sẽ hiển thị lỗi lên trình duyệt cho người dùng biết. Khi hợp lệ thì việc tạo mới sẽ thành công.

crud_aspmvc_39

 

Xử lý cho phương thức Delete trong class HomeController.

// // GET: /Home/Delete/5 public ActionResult Delete(int id) { var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id) .FirstOrDefault(); return View(phone); } // // POST: /Home/Delete/5 [HttpPost] public ActionResult Delete(int id, FormCollection collection) { try { var phone = _db.Phones.Select(p => p).Where(p => p.PhoneId == id) .FirstOrDefault(); if (phone != null) _db.DeleteObject(phone); _db.SaveChanges(); return RedirectToAction(“Index”); } catch { return View(); } }

Build project và xem kết quả.

crud_aspmvc_40

Sau khi xóa thành công.

crud_aspmvc_41

 

Như vậy chúng ta đã xây dựng được một ứng dụng web crud đơn giản bằng ASP.NET MVC một cách dễ dàng và nhanh chóng, kết hợp bộ công cụ Visual Studio.

*Tóm lại:

– ASP.NET MVC là nền tảng phát triển web thế hệ mới của Microsoft, được Scott Guthie đề xuất năm 2007 và phiên bản đầu tiên 1.0 được ra mắt vào năm 2009.

– ASP.NET MVC được phát triển dựa trên mẫu thiết kế trong phát triển phần mềm. MVC là từ viết tắt của Model – View – Controller, 3 thành phần trong cấu trúc MVC.

– Vai trò của Model, View và Controller trong nền tảng ASP.NET MVC:

  + Controller: là một (nhiều) lớp (.cs hoặc .vb), đóng vai trò trung tâm và chủ đạo trong kiến trúc MVC. Khi một request được gửi từ trình duyệt đến ứng dụng web MVC của bạn, controller của ứng dụng sẽ xử lý nội dung của request, tìm ra đâu là view cần, dữ liệu nào cần để “đổ” lên view đó. Sau đó nó gửi thông điệp response chứa nội dung cần thiết về lại trình duyệt.

  + Model: đại diện cho dữ liệu được xử lý trên View.

  + View: lấy template cần thiết và dữ liệu từ Model, sau đó gửi trả về trong thông điệp response.

crud_aspmvc_2

 

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

P/s: link download source-code của bài tutorial này (here).

 

 

 

 

 

 

 

 

 

 

 

 

 

Tutorial: Creating a simple CRUD Web Application using ASP.NET MVC 2 (Part 1)

Đầu tiên các bạn tạo 1 project ASP.NET MVC 2 dạng empty project. Sau khi tạo, project sẽ có các thành phần như sau:

crud_aspmvc_1

Có 2 cách để tạo và kết nối CSDL.

– Cách 1: dùng SQL Server tạo bên ngoài và kết nối với Visual Studio thông qua Server Explorer.

– Cách 2: tạo CSDL và thực hiện kết nối ngay trong Visual Studio.

Ở đây mình sẽ hướng dẫn các bạn tạo CSDL và kết nối ngay trong Visual Studio.

Các bạn thêm thư mục App_Data vào project để lưu trữ tập tin CSDL của mình.

crud_aspmvc_3

Thư mục App_Data đã được tạo trong project.

crud_aspmvc_4

Click phải vào App_Data –> Add –> New Item.

crud_aspmvc_5

Ở cột bên trái chọn Data –> SQL Server Database –> đặt tên cho tập tin –> Add.

crud_aspmvc_6

Tập tin CSDL dữ liệu vừa tạo đã được xuất hiện trong project.

crud_aspmvc_7

crud_aspmvc_8

Để thêm một bảng, click phải vào Table –> Add New Table.

crud_aspmvc_9

Các bạn thiết lập các thuộc tính cho bảng của mình, chẳng hạn dưới đây là các thuộc tính có trong bảng của mình, trong đó PhoneId là khóa chính.

crud_aspmvc_10

Đặt tên cho bảng và lưu lại.

crud_aspmvc_11

Bảng mà chúng ta vừa tạo sẽ được xuất hiện ngay trong cửa số Server Explorer bên trái.

crud_aspmvc_12

Để đưa dữ liệu vào bảng, click phải vào bảng vừa tạo –> Show Table Data.

crud_aspmvc_13

Sau đó các bạn tiến hành nhập dữ liệu cần thiết cho bảng của mình.

Bây giờ chúng ta sẽ thực hiện tạo controller, view và model để hoàn thành ứng dụng crud hoàn chỉnh.

Bây giờ chúng ta sẽ thực hiện tạo Model. Click phải vào thư mục Models trong project –> Add –> Add New Item.

 

crud_aspmvc_14

Ở đây mình dùng Entity Framework để tạo data model. Cột bên trái bạn chọn Data –> ADO.NET Entity Data Model và đặt tên cho model –> nút Add.

crud_aspmvc_15

Chọn Generate from database để tạo model từ CSDL mà mình đã tạo trong phần I –> Next.

crud_aspmvc_16

Chọn CSDL tương ứng –> Next. Visual Studio sẽ tự động sinh cho chúng ta entity connection và lưu vào trong tập tin Web.Config. Bạn hoàn toàn có thể thay đổi chuỗi này, theo mình thì nên để mặc định như vậy.

crud_aspmvc_17

Chọn table cần thiết –> Finish.

crud_aspmvc_19

Sau đó, trên màn hình Visual Studio sẽ xuất hiện Model của CSDL.

crud_aspmvc_20

Bây giờ, chúng ta sẽ tạo controller để xử lý các tác vụ thêm, xóa, sửa và xem thông tin chi tiết. Click phải vào thư mục Controllers trong project –> Add –> Controller.

crud_aspmvc_21

Đặt tên cho controller và check vào ô bên dưới để Visual Studio tạo giúp chúng ta các phương thức cần thiết –> nút Add.

crud_aspmvc_22

Bây giờ chúng ta build ứng dụng và xem trên trình duyệt hiển thị những gì. Kết quả là báo lỗi tùm lum Nyah-Nyah.

crud_aspmvc_23

Lý do là chúng ta chưa tạo ra cái View nào cho ứng dụng của chúng ta cả. Mặc định của ứng dụng ASP.NET thông thường nói chung là nó sẽ tìm nhưng tập tin Index.* để hiển thị trước (ưu tiên, dạng như trang chủ). Và để khắc phục vấn đề này, đơn giản chúng ta tạo View cho trang Index.aspx (view engine mặc định trong ASP.NET MVC).

Để thực hiện việc này, các bạn vào trong tập tin HomeController mà chúng ta đã tạo ở trên, click phải vào Index –> Add View.

crud_aspmvc_24

Ở đây mình bỏ chọn ô Select master page vì không cần đặt trang Index là trang master, chọn ô Create a strongly-typed view –> chọn View data là model mà chúng ta đã tạo lúc trước –> chọn kiểu List vì ta muốn hiển thị danh sách tất cả record có trong table –> nút Add.

crud_aspmvc_25

Đoạn mã được Visual Studio phát sinh cho trang Index.aspx vừa tạo như sau:


<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SimplePhoneNotebook.Models.Phone>>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
</head>
<body>
    <table>
        <tr>
            <th></th>
            <th>
                PhoneId
            </th>
            <th>
                Name
            </th>
            <th>
                PhoneNum
            </th>
            <th>
                Desciption
            </th>
            <th>
                GroupName
            </th>
        </tr>

    <% foreach (var item in Model) { %>

        <tr>
            <td>
                <%: Html.ActionLink("Edit", "Edit", new { id=item.PhoneId }) %> |
                <%: Html.ActionLink("Details", "Details", new { id=item.PhoneId })%> |
                <%: Html.ActionLink("Delete", "Delete", new { id=item.PhoneId })%>
            </td>
            <td>
                <%: item.PhoneId %>
            </td>
            <td>
                <%: item.Name %>
            </td>
            <td>
                <%: item.PhoneNum %>
            </td>
            <td>
                <%: item.Desciption %>
            </td>
            <td>
                <%: item.GroupName %>
            </td>
        </tr>

    <% } %>

    </table>

    <p>
        <%: Html.ActionLink("Create New", "Create") %>
    </p>

</body>
</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Nó chính là cấu trúc của 1 trang Web Forms mà bạn đã từng làm trước đây, và bạn hoàn toàn có thể design nó, dùng ToolBox Control để kéo thả các control vào trang này như thực hiện trên Web Forms. Từ đây, các bạn có thể nhận thấy rằng, ASP.NET MVC là một nền tảng mới dựa trên ASP.NET nhưng nó không phải ra đời để thay thế cho Web Forms.

crud_aspmvc_26

Kết quả trên trình duyệt sau khi build ứng dụng.

crud_aspmvc_27

(Xem tiếp phần 2)

Web Services Intro.

1. Khái niệm về Web Service:

Có một định nghĩa mà mình đọc trong 1 cuốn ebook rất hay và tóm gọn khái niệm về Web Services. Khái niệm đó như thế này: “A Web Services is application logic accessible to programs via standard web protocols in a platform independent way.”

Bây giờ chúng ta hãy cũng cắt nghĩa những từ trong đó ha:

– Application logic: một Web Service

– Accessible to programs: hầu hết các website ngày nay được truy cập bởi người dùng thông qua trình duyệt, các Web Services sẽ được truy cập bởi các chương trình máy tính.

– Standard web protocols: toàn bộ khái niệm về Web Service được dựa trên một tập các giao thức web như là HTTP, XML, SOAP, WSDL và UDDI.

– Platform independent: Các Web Service có thể được thực thi trên bất kì nền tảng nào.

Một Web Service được truy cập bởi một chương trình. Chương trình đó có thể là một ứng dụng web, một ứng dụng windows hay bất kì kiểu ứng dụng nào như được trình bày trong minh họa dưới đây:

web-ser-1

Một điểm lưu ý nhỏ ở đây là một Web Service có thể được một Web Service khác sử dụng.

2. Một số kiến trúc hạ tầng và công nghệ có thể tái sử dụng trong quá trình triển khai Web Service:

– Web Servers: các web server không nhất thiết phải có khi triển khai một Web Service nhưng một Web Service hoàn toàn có thể được thực thi bằng cách sử dụng các web server đã có trước đó. Chẳng hạn, không có .NET Framework, bạn có thể thực thi một Web Service bằng cách sử dụng XML Parser và một đoạn mã ASP chạy trên IIS.

– Authentication (chứng thực): một Web Service có thể cần chức thực người dùng trước khi sử dụng Web Service đó.

– Encrytion (mã hóa): Các Web Service sẽ thường gửi và nhận dữ liệu nhạy cảm. Dữ liệu nhạy cảm được chuyển đổi với một Web Service cần được mã hóa. Việc mã hóa có thể được thực hiện bằng cách tương tự như ta thường làm với các web traffic thông thường. Giao thức SSL (Secure Sockets Layer) có thể được sử dụng với các Web Service.

– Các kỹ thuật cân bằng tải (loading balancing): vì các Web Service không có trạng thái, các kỹ thuật cân bằng tải để cân bằng tải các trang web và kỹ thuật cân bằng tải Web Service tương tự nhau.

– Application servers: Các Web Service cần nhiều dịch vụ tương tự như các component truyền thống bên cạnh các transactional service, object pooling, connection pooling,…

3. Gọi các Web Service:

ASP.NET hỗ trợ 3 giao thức để gọi các Web Service:

– HTTP-GET

– HTTP-POST

– SOAP

Trong tất cả trường hợp, HTTP được sử dụng và dữ liệu được gửi đi trong HTTP request, và được trả về trong HTTP response như minh họa dưới đây:

web-ser-2

Các tham số HTTP-GET và HTTP-POST được truyền vào như là cặp tên/giá trị. HTTP-GET truyền các tham số trong URL. HTTP-POST truyền các tham số trong thông điệp HTTP request. Trong cả hai trường hợp, response được encode thành XML. SOAP sử dụng XML trong cả khi gửi request và nhận response.

Vì các tham số cho Web Service chỉ có thể là các cặp tên/giá trị, HTTP-GET và HTTP-POST bị giới hạn hơn là SOAP. Chúng không được hỗ trợ rộng rãi như là SOAP. Tuy nhiên HTTP-GET và HTTP-POST rất hữu ích trong việc tích hợp với các hệ thống đang có đã được xây dựng. HTTP-GET cũng được sử dụng cho việc kiểm thử các Web Service ASP.NET.

Khi sử dụng ASP.NET, bạn không phải chọn bất kì giao thức nào. Một Web Service ASP.NET có thể hỗ trợ tất cả giao thức tại cùng một thời điểm.

Để gọi các Web Service, bạn thực thi các phương thức trên dịch vụ này. Để làm việc này, bạn cần biết những phương thức nào nó hỗ trợ, những tham số nào Web Service lấy, và những gì nó trả về.

4. SOAP (Simple Object Access Protocol):

Đây là phần quan trọng trong chồng nghi thức Web Service. Khái niệm về SOAP được W3C khái quát như sau: “SOAP is a lightweight protocol for exchange of information in a decentralized, distributed environment.”

SOAP rất đơn giản, nó không thử xây dựng một kiến trúc hạ tầng mới hoàn toàn. Chẳng hạn, xem xét vấn đề bảo mật của Web Service. Hiển nhiên bảo mật là một vấn đề quan trọng, nhưng SOAP không đánh địa chỉ nó. Thay vào đó, nó nó định nghĩa một ràng buộc đến HTTP và gọi các cơ chế bảo mật có sẵn với HTTP.

(còn tiếp)