Javascript ở chế độ xem một phần

Trong các View khái niệm Partial Page [or Partial View] được sử dụng khi bạn chia nhỏ các trang Razor Page, hoặc các View ra thành từng phần nhỏ

Lợi ích của việc chia nhỏ này là

  • Một View [Razor Page] phức tạp, khó bảo trì được chia thành nhiều phần nhỏ, dễ kiểm soát, dễ làm việc nhóm
  • Sử dụng lại các phần chung cho các trang

Tạo Partial Page, Partial View

Trang một phần chính là các tập tin. cshtml - chỉ có điều loại tệp này không được định tuyến tới [không được gọi thẳng tiếp], nên tên của nó sẽ bắt đầu bằng ký tự _

Chèn Partial Page, Partial View, chuyển dữ liệu sang Partial

Để chèn một phần Trang vào Xem, Trang Razor, bạn có thể sử dụng Trình trợ giúp thẻ một phần

Hoặc bạn có thể sử dụng phương thức Partial trong thuộc tính HTML

@Html.Partial["_NamePartial"] // Hoặc dùng PartialAsync, RenderPartial, RenderPartialAsync

Truyền ViewData sang Partial

Mặc định Partial Page nhận một bản sao thuộc tính ViewData [kiểu ViewDataDictionary ] của Trang tải nó. You can't create a ViewDataDictionary object and setting ViewData for Partial instead of default

Bài viết này chúng ta sẽ tìm hiểu về Views trong ASP. NET lõi. View is thành phần của mẫu MVC nó có trách nhiệm hiển thị giao diện cho người dùng

Xem là gì?

View có trách nhiệm tạo giao diện cho người dùng từ model. Bộ điều khiển trong ASP. NET Core sẽ nhận yêu cầu sau đó thực thi với logic tương ứng với dữ liệu bắt đầu từ yêu cầu. Sau đó nó trả về Model cho View

Tham khảo. Xây dựng ứng dụng ASP. NET Core MVC đầu tiên

nhiệm vụ của View

Render giao diện và hiển thị mô hình lên là trách nhiệm của View. Chế độ xem không nên chứa bất kỳ logic nào và không được xử lý logic. Xem có thể sử dụng bất kỳ định dạng nào để trả lại cho người dùng. Định dạng có thể là HTML, JSON, XML hoặc là bất kỳ định dạng nào khác

Ví dụ

Mở dự án sau đó tạo một ứng dụng ASP. NET lõi. Dự án có chứa một Trình điều khiển và một chế độ xem Chỉ mục

Tham khảo. Xây dựng ứng dụng ASP. NET Core MVC đầu tiên

Làm sao để tạo Chế độ xem

Project ví dụ ở trên đã có một phương thức Index Action. Giờ chúng ta sẽ tạo một Action method khác

public IActionResult About[]
{
    return View[];
}

Các phương thức trong Bộ điều khiển trả về một Kết quả Hành động [hoặc một lớp kế thừa từ ActionResult]. Injectable reference. Kết quả hành động trong ASP. NET lõi

ActionResult return HTML is a ViewResult. Phương thức View of Controller base class trả về một ViewResult. Chuột phải vào bất kỳ đâu trong phương thức và chọn Add View

 

Sau đó sẽ thấy cửa sổ Add MVC View as after

 

Tên View

Nhập tên Xem tại đây. Theo quy tắc, name must same name with Action Method name. You can override this method by way to set other name. Nếu bạn làm điều này thì bạn cần phải chỉ ra tên của Chế độ xem trong tham số đầu tiên của phương thức Chế độ xem. Chế độ xem[“Tên Chế độ xem”]

Mẫu

Mẫu có một số tùy chọn như Tạo, Xóa, Chi tiết, Chỉnh sửa, Liệt kê, Làm trống [không có Mô hình]. Các mẫu ở trên cần có một mô hình, ngoại trừ Mẫu trống. Visual Studio tạo ra một khung nhìn để tạo, chỉnh sửa, xóa. trên mẫu được cung cấp phụ thuộc vào mẫu mà bạn chọn. Mỗi Mẫu trên đều có phần giải thích bên dưới

Tạo nên

Tạo một biểu mẫu HTML để tạo mới một mô hình. Nó tạo ra một nhãn và một đầu vào cho mỗi thuộc tính trong mô hình

Xóa bỏ

Tạo một biểu mẫu HTML cho việc xóa mô hình. Nó tạo ra một nhãn và giá trị heienj tại mỗi thuộc tính của mô hình

Chi tiết

Create new a view to display model. Nó tạo ra một nhãn và giá trị của mỗi thuộc tính trong mô hình

Chỉnh sửa

Nó tạo ra một biểu mẫu HTML để sửa đổi mô hình. Nó tạo ra một nhãn và một đầu vào cho mỗi thuộc tính của mô hình

Trống rỗng

Tạo ra một chế độ xem trống

Danh sách

Tạo ra một Bảng HTML hiển thị mô hình danh sách. Nó tạo ra một cột cho mỗi thuộc tính của Model. You must return a IEnumerable for View. Xem cũng chứa danh sách các hành động để thực hiện như tạo/chỉnh sửa/xóa.

lớp người mẫu

Danh sách thả xuống hiển thị tất cả các lớp Mô hình trong dự án. Tùy chọn này bị loại bỏ nếu bạn chọn Dự án trống

Create a Partial View

Tùy chọn này là Create a Partial View. Partial View tạo một phần của view và không phải view hoàn chỉnh. PartialViewResult sử dụng model để tạo ra một phần của View. Kết quả của partial view nhìn giống hư một view bình thường ngoại trừ nó không có thẻ hoặc không có thẻ ở trên của View. Chọn tùy chọn này chỉ ra view cảu bạn sẽ tạo không phải view đầy đủ vì thế tùy chọn Layout sẽ bị bỏ đi.

Scripts thư viện

Chọn tùy chọn này sẽ bổ sung jquery. xác thực. tối thiểu. jsjquery. xác thực. không phô trương. tối thiểu. json vào thư viện JavaScript. Các thư viện này cần thiết để khai thác xác thực phía máy khách. CÁc thư viện này yêu cầu khi tạo chế độ xem bao gồm đầu vào cho dữ liệu như một Chế độ xem chỉnh sửa biểu mẫu hoặc một biểu mẫu Tạo.

Use Layout Page

Tùy chọn này cho phép bạn chọn một trang Bố cục cho Xem. Trang bố cục được sử dụng để chia sẻ các thành phần sử dụng chung trong trang của bạn và cung cấp một giao diện đồng nhất trong toàn bộ hệ thống

Ví dụ chọn tên chế độ xem là Giới thiệu và mẫu là Trống [không có kiểu máy] không chọn Tạo chế độ xem một phần và Sử dụng trang bố cục. Chế độ xem được tạo sẽ nằm trong thư mục Lượt xem/Trang chủ/Giới thiệu. cshtml . Open file Giới thiệu. cshtml ra và thêm dòng vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề. vào sau thẻ tiêu đề.

@{
    Layout = null;
}
 

 


    
    About
 
    

About Us

Chạy ứng dụng và bạn nhìn thấy dòng chữ "Giới thiệu về chúng tôi" trên ứng dụng

Vị trí của View

Theo quy tắc thì tất cả Chế độ xem được lưu trong thư mục Chế độ xem của ứng dụng. Mỗi Bộ điều khiển sẽ có một thư mục con trong thư mục Lượt xem với tên trùng lặp tên bộ điều khiển nhưng sẽ không có Bộ điều khiển hậu tố. Vì thế sẽ có một thư mục HomeController tên Home trong thư mục Lượt xem

Mỗi Phương thức hành động trong Bộ điều khiển sẽ lấy một tệp cho nó, tên trùng với tên của Phương thức hành động. Vì cách lập chỉ mục của HomeController có một tệp với tên Chỉ mục. cshtml trong Chế độ xem/Trang chủ.

Dưới đây là hình minh họa

 

Mỗi Action method trong HomeController sẽ có một file View tương ứng như About. cshtml và Index. cshtml and save in the directory Views/Home. Tương tự như vậy, phương thức hành động của CustomerController sẽ có thư mục Lượt xem/Khách hàng

ASP. NET Core find View as THẾ NÀO?

Project Example has an Controller name is HomeController. Giờ hãy thêm CustomerController vào. Chọn thư mục Bộ điều khiển chuột phải và thêm Bộ điều khiển bổ sung. Tên của nó là CustomerController

using Microsoft.AspNetCore.Mvc;
 
namespace MVCCoreApp.Controllers
{
    public class CustomerController : Controller
    {
        public IActionResult Index[]
        {
            return View[];
        }
    }
}

Times we don't create View into that run always URL /Customer. Chúng ta nhìn lỗi như sau.

 

Màn hình ở trên hiển thị chính xác lỗi khi ASP. NET Core MVC middleware find search View in 2 directory

  • /Lượt xem/Khách hàng/Chỉ mục. cshtml
  • /Lượt xem/Chia sẻ/Chỉ mục. cshtml

Đầu tiên là thư mục Khách hàng với tên của bộ điều khiển. Nếu không thấy nó sẽ tìm tiếp trong mục Shared trước khi đưa ra lỗi InvalidOperationException

Chủ Đề