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.