Cách sử dụng javascript trong chế độ xem mvc

Trong phần này, bạn sẽ học cách tạo một khung nhìn và sử dụng lớp mô hình trong đó trong ASP. ứng dụng NETMVC

Chế độ xem được sử dụng để hiển thị dữ liệu bằng đối tượng lớp mô hình. Thư mục Lượt xem chứa tất cả các tệp dạng xem trong ASP. ứng dụng NETMVC

Bộ điều khiển có thể có một hoặc nhiều phương thức hành động và mỗi phương thức hành động có thể trả về một chế độ xem khác nhau. Nói tóm lại, bộ điều khiển có thể hiển thị một hoặc nhiều chế độ xem. Vì vậy, để bảo trì dễ dàng, khung MVC yêu cầu một thư mục con riêng cho từng bộ điều khiển có cùng tên với bộ điều khiển, trong thư mục Lượt xem

Ví dụ: tất cả các chế độ xem được hiển thị từ HomeController sẽ nằm trong thư mục Chế độ xem > Trang chủ. Theo cách tương tự, các lượt xem cho StudentController sẽ nằm trong thư mục Lượt xem > Sinh viên, như được hiển thị bên dưới

Xem các thư mục cho Bộ điều khiển

Ghi chú

Thư mục dùng chung chứa các chế độ xem, chế độ xem bố cục và chế độ xem một phần sẽ được chia sẻ giữa nhiều bộ điều khiển

Công cụ xem dao cạo

Microsoft đã giới thiệu công cụ xem dao cạo để biên dịch chế độ xem với sự kết hợp của các thẻ HTML và mã phía máy chủ. Cú pháp đặc biệt cho chế độ xem dao cạo tối đa hóa tốc độ viết mã bằng cách giảm thiểu số lượng ký tự và tổ hợp phím cần thiết khi viết chế độ xem

The razor view uses @ character to include the server-side code instead of the traditional of ASP. You can use C# or Visual Basic syntax to write server-side code inside the razor view.

ASP. NET MVC hỗ trợ các loại tệp xem dao cạo sau

Phần mở rộng tệp Mô tả. cshtmlC# Chế độ xem dao cạo. Hỗ trợ mã C# với các thẻ html. vbhtmlChế độ xem Dao cạo Visual Basic. Hỗ trợ mã Visual Basic với các thẻ html. aspxASP. mẫu mạng lưới. ascxASP. NET kiểm soát web

Tìm hiểu cú pháp Razor trong phần tiếp theo

Tạo một View

Bạn có thể tạo chế độ xem cho một phương thức hành động trực tiếp từ nó bằng cách nhấp chuột phải vào bên trong một phương thức hành động và chọn Thêm Chế độ xem

Sau đây tạo một khung nhìn từ phương thức hành động Index[] của StudentContoller, như được hiển thị bên dưới

Tạo View từ Action Method

Thao tác này sẽ mở hộp thoại Thêm Chế độ xem, hiển thị bên dưới. Bạn nên giữ tên chế độ xem giống với tên phương thức hành động để bạn không phải chỉ định rõ ràng tên chế độ xem trong phương thức hành động khi trả về chế độ xem

Thêm một Chế độ xem

Chọn mẫu giàn giáo. Trình đơn thả xuống mẫu sẽ hiển thị các mẫu mặc định có sẵn cho chế độ xem Tạo, Xóa, Chi tiết, Chỉnh sửa, Danh sách hoặc Để trống. Chọn mẫu "Danh sách" vì chúng tôi muốn hiển thị danh sách sinh viên trong chế độ xem

Bây giờ, chọn Student từ menu thả xuống lớp mô hình. Danh sách thả xuống lớp mô hình tự động hiển thị tên của tất cả các lớp trong thư mục Model. Chúng tôi đã tạo lớp mô hình Student trong phần trước, vì vậy nó sẽ được đưa vào danh sách thả xuống

Thêm một Chế độ xem

Chọn hộp kiểm "Sử dụng trang bố cục" và chọn trang _Layout.cshtml mặc định cho chế độ xem này rồi nhấp vào nút Thêm

Thao tác này sẽ tạo chế độ xem Index trong Chế độ xem -> Thư mục sinh viên, như được hiển thị bên dưới

Lượt xem

Đoạn mã sau hiển thị một Chỉ mục. cshtml đã tạo ở trên

Lượt xem\Sinh viên\Chỉ mục. cshtml

Sao chép

@model IEnumerable

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Index


    @Html.ActionLink["Create New", "Create"]


    
        
            @Html.DisplayNameFor[model => model.StudentName]
        
        
            @Html.DisplayNameFor[model => model.Age]
        
        
    

@foreach [var item in Model] {
    
        
            @Html.DisplayFor[modelItem => item.StudentName]
        
        
            @Html.DisplayFor[modelItem => item.Age]
        
        
            @Html.ActionLink["Edit", "Edit", new { id=item.StudentId }] |
            @Html.ActionLink["Details", "Details", new { id=item.StudentId  }] |
            @Html.ActionLink["Delete", "Delete", new { id = item.StudentId }]
        
    
}

Như bạn có thể thấy trong chế độ xem Index ở trên, nó chứa cả mã HTML và mã dao cạo. Biểu thức dao cạo nội tuyến bắt đầu bằng biểu tượng @. @Html là lớp trợ giúp để tạo các điều khiển HTML. Bạn sẽ học cú pháp dao cạo và trình trợ giúp HTML trong các phần tiếp theo

Mục lục. cshtml

Chế độ xem Chỉ mục ở trên sẽ trông như bên dưới khi chúng tôi chạy ứng dụng

Chế độ xem chỉ mục

Ghi chú

Mọi chế độ xem trong ASP. NET MVC bắt nguồn từ lớp HomeController1 có trong không gian tên HomeController2

Chúng ta cần truyền đối tượng model vào view để hiển thị dữ liệu trên view. Tìm hiểu cách tích hợp mô hình, chế độ xem và bộ điều khiển trong chương tiếp theo

Tôi có thể sử dụng JavaScript với MVC không?

CÁCH bao gồm tập lệnh trong ứng dụng MVC?

Chúng ta có thể sử dụng JavaScript trong. Nền tảng NET?

CÁCH bao gồm tệp js trong ASP. MẠNG MVC?