Đỉnh NGUYỄN

life's a journey not a destination


Leave a comment

[ASP.NET MVC 5] – Thêm 1 Controller



Tutorials \ ASP.NET MVC 


Bắt đầu với ASP.NET MVC 5 

(Cập nhật: 30/11/2013) 

—————————————————————————————————————

MVC là viết tắt của Model-View-Controller. MVC là một kiến trúc lập trình giúp các nhà phát triển dễ dàng kiểm thử và duy trì ứng dụng. Ứng dụng dựa trên MVC chứa:

·         Models: Các lớp đại diện cho cấu trúc dữ liệu của ứng dụng và cũng được dùng để kiểm chứng các quy tắc nghiệp vụ của dữ liệu.

·         Views: Các tập tin mẫu dùng để tạo ra HTML động khi có yêu cầu từ người dùng.

·         Controllers: Các lớp tiếp nhận yêu cầu đầu vào từ trình duyệt, truy xuất dữ liệu dựa trên model và chỉ định các mẫu view sẽ được trả về cho trình duyệt.

Bắt đầu bằng cách tạo 1 lớp controller. Trong Solution Explorer, click phải lên thư mục Controller và chọn Add, sau đó chọn Controller.

clip_image001

Trong hộp thoại Add Scaffold, chọn MVC 5 Controller – Empty, và chọn Add.

clip_image002

Đặt tên controller là “HelloWorldController” và chọn Add.

clip_image003

Chú ý trong Solution Explorer có 1 tập tin mới được tạo ra tên HelloWorldController.cs và 1 thư mục mới tên Views\HelloWorld. Controller cũng được mở trong IDE.

clip_image005

Thay thế / chỉnh sửa nội dung tập tin như sau:

 

using System.Web;

using System.Web.Mvc;

 

namespace MvcMovie.Controllers

{

    public class HelloWorldController : Controller

    {

        //

        // GET: /HelloWorld/

 

        public string Index()

        {

            return "This is my <b>default</b> action…";

        }

 

        //

        // GET: /HelloWorld/Welcome/

 

        public string Welcome()

        {

            return "This is the Welcome action method…";

        }

    }

}

 

 

Các phương thức của controller sẽ trả về chuỗi HTML như trong ví dụ. Controller đặt tên là HelloWorldController và phương thức đầu tiên tiên tên Index. Chạy ứng dụng (nhấn F5 / Ctrl-F5). Trong trình duyệt, bổ sung / thay đổi đường dẫn trên thanh địa chỉ; bạn sẽ nhìn thấy hệ thống trả về 1 số HTML.

clip_image006

ASP.NET sẽ gọi các lớp controller khác (và các phương thức khác trong controller) phụ thuộc vào địa chỉ URL. Quy tắc định hướng URL mặc định được dùng bởi ASP.NET MVC có định dạng sau:

/[Controller]/[ActionName]/[Parameters]

Bạn thêm / thay đổi định dạng cho việc định hướng URL trong tập tin App_Start/RouteConfig.cs:

 

public static void RegisterRoutes(RouteCollection routes)

{

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 

    routes.MapRoute(

        name: "Default",

        url: "{controller}/{action}/{id}",

        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

    );

}

 

 

 

Khi bạn chạy ứng dụng mà không chỉ định controller cụ thể, nó mặc định sẽ là “Home” controller và “Index” action method.

Phần đầu tiên trong URL sẽ xác định lớp controller được thực thi. Vì thế /HelloWorld sẽ ánh xạ với lớp HelloWorldController. Phần thứ hai của URL xác định phương thức hành động của lớp controller. Vì thế /HelloWorld/Index sẽ gọi phương thức Index của controller “HelloWorldController”. Lưu ý rằng chúng ta chỉ cần chỉ định rõ /HelloWorld, còn Index là mặc định được sử dụng. Đây là bởi vì phương thức Index mặc định sẽ được gọi khi 1 controller được gọi. Phần thứ ba của URL (Parameters) được dùng định hướng dữ liệu. Chúng ta sẽ bàn đến sau.

Khi gọi URL: http://localhost:xxxx/HelloWorld/Welcome. Phương thức Welcome sẽ được gọi và trả về chuỗi “This is the Welcome action method…”. Quy tắc định hướng mặc định của MVC là /[Controller]/[ActionName]/[Parameters]. Đối với trường hợp URL này, controller là HelloWorld và hành động là Welcome.Chúng ta chưa dùng đến [Parameters] của URL và đây là tùy chọn.

clip_image008

Bây giờ hãy thay đổi ví dụ trên 1 chút để có thể truyền 1 vài thamsố  từ URL đến controller (ví dụ, /HelloWorld/Welcome?name=DinhNN&numtimes=3). Thay đổi phương thức Welcome như bên dưới. Lưu ý là đoạn code có dùng đặc tính gọi là tham số tùy chọn của C#, tham số numTimes mặc định sẽ có giá trị bằng 1 nếu không được truyền.

 

public string Welcome(string name, int numTimes = 1) {

     return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);

}

 

 

Lưu ý về bảo mật: Đoạn mã trên dùng HttpServerUtility.HtmlEncode để bảo vệ ứng dụng khỏi các đoạn dữ liệu nhập chứa mã nguy hiểm (như JavaScript). Thông tin thêm, xem How to: Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings.

Chạy ứng dụng và thay đổi URL (http://localhost:xxxx/HelloWorld/Welcome?name=DinhNN&numTimes=4). Bạn có thể thử các giá trị khác cho name và numtimes trong URL.

clip_image009

Trong ví dụ trên, đoạn URL segment (Parameters) cũng không được dùng, name và numtimes được truyền theo dạng query strings.Dấu chấm hỏi (?) trong URL trên chỉ là đường phân cách, và chuỗi query strings theo sau nó. Ký tự & phân tách các thành phần trong chuỗi query strings.

Thay đổi phương thức Welcome như sau:

 

public string Welcome(string name, int ID = 1)

{

    return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);

}

 

 

Chạy ứng dụng và nhập URL: http://localhost:xxxx/HelloWorld/Welcome/3?name=Rick

clip_image010

Đây chính là URL segment (Parameters) ánh xạ tham số ID. Phương thức Welcome chứa tham số ID khớp với quy tắc URL được đăng ký trong phương thức RegisterRoutes.

 

public static void RegisterRoutes(RouteCollection routes)

{

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 

    routes.MapRoute(

        name: "Default",

        url: "{controller}/{action}/{id}",

        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

    );

}

 

 

Trong ứng dụng ASP.NET MVC, có nhiều cách để truyền tham số cho controller (giống như đã làm với ID) thay vì dùng như query strings. Bạn có thể thêm quy tắc định hướng cho name và numTimes trong tham số của URL. Trong tập tin App_Start\RouteConfig.cs, thêm định hướng “Hello”:

 

public class RouteConfig

{

    public static void RegisterRoutes(RouteCollection routes)

    {

        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 

        routes.MapRoute(

            name: "Default",

            url: "{controller}/{action}/{id}",

            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

        );

 

        routes.MapRoute(

             name: "Hello",

             url: "{controller}/{action}/{name}/{id}"

         );

    }

}

 

 

Chạy ứng dụng và nhập đường dẫn URL: http://localhost:xxxx/HelloWorld/Welcome/Scott/3.

clip_image011

Với định hướng mặc định làm việc tốt. Bạn sẽ học cách truyền dữ liệu dùng model binder, và vì thế cũng không cần thiết thay đổi định hướng URL mặc định.

Trong ví dụ này, controller đã mô tả được hành động “VC” trong MVC – đó là view và controller cùng hoạt động. Controller trả về trực tiếp HTML. Thực tế, bạn sẽ cần các tập tin giao diện mẫu giúp hiển thị HTML. Hãy theo dõi bài học kế tiếp.

Advertisements


Leave a comment

[ASP.NET MVC 5] – Bắt đầu với ASP.NET MVC 5



Tutorials \ ASP.NET MVC

Bắt đầu với ASP.NET MVC 5

(Cập nhật: 30/11/2013)

———————————————————————————————————————-

Bắt đầu

Bắt đầu bằng cách cài đặt và chạy Visual Studio Express 2013 hoặc Visual Studio 2013.
Visual Studio là môi trường phát triển tích hợp (Integrated Development Environment – IDE). Giống như bạn dùng Microsoft Word để viết tài liệu, bạn sẽ dùng IDE để tạo ra ứng dụng và website.

Tạo ứng dụng đầu tiên

Chọn New Project từ trang Start hoặc dùng menu và chọn File > New Project.

 
 

Trong hộp thoại New Project, chọn Visual C# bên tay trái, sau đó chọn Web và chọn ASP.NET Web Application. Đặt tên dự án là "MvcMovie" và chọn OK.


Trong hộp thoại New ASP.NET Project, chọn MVC và chọn OK.

image 

Visual Studio sẽ dùng các mẫu dự án mặc định có sẵn để tạo dự án ASP.NET MVC.

image

Click F5 Visual Studio sẽ khởi động IIS Express và chạy ứng dụng web.Visual Studio sẽ mở trình duyệt và truy xuất trang chủ của ứng dụng. Lưu ý thanh địa chỉ của trình duyệt có dạng localhost:port#. Đó là bởi vì localhost là địa chỉ máy tính cục bộ đang chạy ứng dụng. Khi Visual Studio chạy ứng dụng web, một cổng (port) ngẫu nhiên được dùng cho web server.

image 

Dùng chuột kéo các góc để thu gọn vùng hiển thị của trình duyệt. Các liên kết Home, About và Contact sẽ không hiển thị, phụ thuộc vào kích thước cửa sổ trình duyệt mà bạn nhìn thấy các liên kết Home, About, Contact hoặc phải click vào icon để nhìn thấy các liên kết.

image

image

Ứng dụng cũng hỗ trợ việc đăng ký và đăng nhập. Bước tiếp theo là xem cách hoạt động của ứng dụng và học một ít về ASP.NET MVC.