Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

avatar

Admin
Admin
Loading
Bắt đầu với ASP.NET MVC3 (Phần 3: Adding a View)
Trong phần này bạn sẽ điều chỉnh class HelloWorldController để sử dụng file view template (dùng để generate HTML reponse về cho client).
Bạn sẽ tạo file view template sử dụng Razor view engine được giới thiệu cùng với ASP.NET MVC 3. Razor-base view template có phần mở rộng là .cshtml, và cung cấp cách thức tạo HTML output sử dụng c#, Razor giúp cho code của chúng ta rõ ràng xúc tích và ngắn gọn hơn.
Bắt đầu sử dụng view template với phương thức Index trong class HelloWorldContronller. Hiện tại phương thức này trả về một chuỗi với một message gọi là hard-code (theo mình hiểu hard code nghĩa là gán tĩnh dữ liệu) trong class controller. Thay đổi phương thức Index để return về một đối tượng View như sau:
public ActionResult Index()
{
          return View();
}
Đoạn code này sử dụng view template để generate HTML reponse đến trình duyệt. Trong project, chúng ta sẽ tạo một view template sử dụng cho phương thức Index bằng cách click phải vào phương thức Index chọn Add View.

Hộp thoại Add View xuất hiện và bạn cứ để mặc định và click Add.

trong Solution Explorer lúc này bạn sẽ thấy xuất hiện thư mục /Views/HelloWorld file /View/HelloWorld/Index.cshtml được tạo ra:

đây là nội dung file Index.cshtml vừa được tạo:

hãy thêm vài HTML markup vào bên dưới thẻ bên trong file /Views/HelloWorld/Index.cshtml:
@{
    ViewBag.Title = "Index";
}

Index



Hello from our View Template!


Chạy ứng dụng và browse đến controller HelloWorld (http://localhost:xxxx/HelloWorld). Phương thức Index trong controller sẽ không làm nhiều việc. Nó chỉ đơn giản là thực hiện return View(), nó xác định phương thức nên sử dụng view template nào để render ra một reponse cho trình duyệt, ASP.NET MVC mặc định sẽ sử dụng file view Index.cshtml trong /Views/HelloWorld.  Hình bên dưới cho thấy kết quả trả về trên trình duyệt là chuỗi hard code được bên trong view.

Thay đổi Views và Layout Pages

Trước hết, bạn muốn thay đổi tiêu đề phí trên của trang “My MVC Application” . Đây chỉ là đoạn text dùng chung cho mỗi trang. Thực tế nó được triển khai chỉ ở một nơi duy nhất trong project, mặc dù chúng ta thấy nó xuất hiện ở mọi trang trong ứng dụng. Giờ bạn hãy tìm đến thư mục /Views/Shared trong Solution Explorer và mở file _Layout.cshtml. File này được gọi là layout page  và nó chia sẽ cho các trang khác sử dụng.

Layout template cho phép định nghĩa HTML container ở một nơi và sau đó có thể apply cho nhiều trang. Bạn hãy chú ý thành phần @RenderBody() gần cuối file. RenderBody là một placeholder mà ở đó tất cả các view pages bạn tạo sẽ hiển thị, được bao bọc trong layout page. bạn hãy thay đổi tiêu đề ở đầu trang từ “My MCV Application” thành “MVC Movie App”.

         

MVC Movie App



Bây giờ khi chạy ứng dụng bạn sẽ thấy tiêu đề là “MVC Movie App”. Click vào liên kết About bạn sẽ thấy tiêu đề như thế. Chúng ta có thể chỉnh sửa một lần trong layout template và có thể áp dụng cho tất cả các trang.

Bên dưới là file _Layout.cshtml hoàn chỉnh:



   
    @ViewBag.Title
    type="text/css" />
    type="text/javascript">
    type="text/javascript">


   

       

           

               

MVC Movie App


           

           

                @Html.Partial("_LogOnPartial")
           

           
       

       

            @RenderBody()
       

       

       

   



Bây giờ chúng ta sẽ thay đổi tiêu đề của trang Index (view).
Mở file /HelloWorld/Index.html. Có hai chỗ cần phải thay đổi: đầu tiên, đầu tiên là tiêu đề xuất hiện trên trình duyêt, và kế tiếp là header bên trong thẻ

.
@{
    ViewBag.Title = "Movie List";
}

My Movie List



Hello from our View Template!


Để chỉ định tiêu đề trang, trong đoạn mã trên chúng ta gán thuộc tính Title của đối tượng ViewBag (bên trong view template Index.cshtml). Nếu bạn nhìn trở lại souce code của layout template, bạn sẽ thấy template sử dụng giá trị trong của thẻ . Sử dụng phương pháp này, bạn có thể dễ dạng truyền các tham số giữa view template và layout file.
Nội dung trong view template Index.cshtml được hợp nhất với +Layout/cshtml tạo ra một HTML reponse duy nhất để gửi đến trình duyệt.

Trong hình trên ta thấy message hiển thị (trong trường hợp này là “Hello from our View Template!”) là ở dạng hard code. Mặc dù ứng dụng của chúng ta đã có “V” (view) và “C” (control), nhưng vẫn chưa có “M” (Model). Bây giờ chúng ta đi tiếp phần sau để biết cách tạo database và nhận dữ liệu từ nó như thế nào.

Truyền dữ liệu từ controller đến view

Trước khi đi tới database, chúng ta hãy nói về việc truyền thông tin từ controller đến view. các class controller được gọi  để reponse lại URL request.  Một class controller là nơi mà chúng ta ghi code xử lí các tham số truyền vào, nhận dữ liệu từ database, và cuối cùng quyết định loại response gì để gửi trở về cho trình duyệt. View template có thể được sử dụng bởi controller để generate và định dạng HTML response.
Controller response hỗ trợ bất kì loại dữ liệu hay đối tường được yêu cầu cho view template để render một response đến trình duyệt. Một view template sẽ không bao giờ thực hiện các thao tác nghiệp vụ (business logic) hay tương tác trược tiếp với database. Thay vào đó, nó sẽ làm việc với dữ liệu được cung cấp bởi controller.
Hiện tại, Welcome action method trong class HelloWorldController nhận tham số name và numTimes và sau đó xuất giá trị trực tiếp ra trình duyệt.  thay vì controller render một chuỗi để response, bạn hãy điều chỉnh controller để sử dụng view template thay thế cho nó. View template sẽ generate ra response động, điều này có nghĩa là bạn phải truyền dữ liệu thích hợp từ controller đến view để generate response. Bạn có thể làm điều này bằng cách đặt dữ liệu động mà vào đối tường viewBag để view template có thể truy suất khi cần.
Quay trở lại với file HelloWorldController.cs và hãy điều chỉnh phương thức Welcome để thêm  giá trị Message và NumTimes cho đối tượng ViewBag. ViewBag là đối tượng động, bạn có thể đặt bất cứ thứ gì mà bạn muốn vào trong nó. ViewBag không được định nghĩa thuộc tính mãi cho đến khi bạn đặt một thứ gì đó bên trong nó.
file HelloWorldController.cs hoàn chỉnh:
using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}
Dữ liệu chứa tròn viewBag sẽ được truyền tự động vào view.
Tiếp theo, bạn cần một Welcome view template! trong menu Debug, chọn Build MvcMovie  để biên dịch project.

Tạo view cho phương thức Welcome. như hình dưới và click add:

Sau đó thêm đoạn code bên dưới vào trong Welcome.cshtml để thực hiện vòng lặp xuất ra các chuỗi “Hello”:
@{
    ViewBag.Title = "Welcome";
}

Welcome




       @for (int i=0; i < ViewBag.NumTimes; i++) {
         
  • @ViewBag.Message

  •    }

Chạy ứng dụng và browse đến URL sau:
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
Các giá trị của tham nhận được từ URL và được truyền tự động đến controller. controller sẽ đóng gói dữ liệu vào một đối tượng viewbag và truyền đối tượng đến view. sau đó view sẽ hiển thị dữ liệu dưới dạng HTML đến người dùng.

Giờ thì chúng ta đã có đủ 3 loại model, view và controller, nhưng vẫn chưa có database. bài sau chúng ta sẽ tạo database cho các bộ phim.
(Bài viết được dịch từ: Getting Started with ASP.NET MVC 3 /Adding a Controller)


_________________
Có nỗi buồn triền miên, làm trái tim hoá đá
Có những dòng lệ nhỏ, khiến đá hoá thành tim.

-------------------------------------------------------------------------------------------------------
Program Skills:  ASP.Net MVC 3/4; C#; VB.Net/ VB 6.0; Java Applet/Swing; JS/JavaScript; Bootstrap/ AngularJS; HTML/CSS; Turbo C/ Turbo C++; Pascal...
Xem mẫu Phần mêm quản lý ở đây     -           Xem mẫu Bán hàng trực tuyến ở đây
Nguyễn Ích Hoàn
new_life02081989@yahoo.com
nguyenichhoan1989@gmail.com
Xem lý lịch thành viên http://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết