MVC xem một phần javascript không chạy

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Trong thực tế thông thường, các tệp xem được nhóm trong một tên thư mục theo tên của bộ điều khiển. Các thư mục này thường được lưu trữ trong thư mục lượt xem. Thông thường, các khung nhìn có thể được phân loại thành ba phần khác nhau như sau

1. Bố cục

   Bố cục thực sự được sử dụng để duy trì tính nhất quán trong các trang web và cũng sử dụng điều này, mã lặp đi lặp lại có thể được giảm bớt. Thông thường, bố cục chủ yếu chứa phần tiêu đề, điều hướng, menu hoặc phần chân trang

2. Xem một phần

   Chế độ xem một phần chủ yếu giảm trùng lặp mã bằng cách duy trì các phần có thể tái sử dụng của chế độ xem

3. Xem thành phần

   Nó khá giống với chế độ xem một phần về khả năng sử dụng lại và giảm lặp lại mã

Trên thực tế, các khung nhìn giúp chúng tôi thiết lập Thiết kế SOC (Tách mối quan tâm) trong ứng dụng MVC. Về cơ bản, nó tách giao diện người dùng khỏi các phần khác của ứng dụng. Bằng cách này, chúng tôi tạo ứng dụng dưới dạng mô-đun mang lại cho chúng tôi một số lợi ích –

1. Ứng dụng có thể dễ dàng duy trì vì nó hiện được tổ chức tốt hơn. Bởi vì, các lượt xem thường được nhóm theo các tính năng của ứng dụng

2. Ứng dụng này trở nên hoàn toàn lỏng lẻo. Chúng tôi có thể xây dựng hoặc cập nhật các chế độ xem ứng dụng riêng biệt với các phần truy cập dữ liệu và logic nghiệp vụ

3. Rất dễ dàng để thực hiện kiểm tra trên giao diện người dùng vì nó là một đơn vị riêng biệt

XEM MỘT PHẦN

Chế độ xem một phần về cơ bản chỉ là chế độ xem có thể được sử dụng lại trên ứng dụng web. Vì vậy, Chế độ xem một phần có thể hoạt động như một khối có thể tái sử dụng có thể cắm được mà chúng ta có thể gọi từ bất kỳ đâu trong ứng dụng và nội dung của chế độ xem một phần được hiển thị. Bất cứ khi nào chúng tôi sử dụng Chế độ xem một phần, nó phải được hiển thị dưới dạng chế độ xem con. Nó rất hữu ích khi là một thành phần có thể tái sử dụng hoặc trong trường hợp chia một giao diện lớn thành các phần nhỏ. Chúng tôi có thể tạo chế độ xem một phần giống như chế độ xem thông thường và chế độ xem này có thể được trả về từ bộ điều khiển bằng cách sử dụng

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Chế độ xem một phần thường được hiển thị trong chế độ xem chính bằng phương pháp

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

KẾT XUẤT CHẾ ĐỘ XEM TỪNG PHẦN

Chế độ xem một phần có thể được đưa vào trang mẹ của ứng dụng theo nhiều cách. Lệnh dưới đây được sử dụng để gọi chế độ xem một phần từ giao diện chính –

@Html.Partial("_navigationbar")

Phương thức trợ giúp

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Nếu muốn Create Partial View ta click chuột phải vào thư mục view > click vào folder > chọn Add > click View

Bây giờ, những người quen thuộc với Angular 1. x có thể rơi vào tình thế tiến thoái lưỡng nan rằng đâu là thực tế

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Bây giờ, chúng tôi cần html một phần của chế độ xem một phần theo yêu cầu của chúng tôi như bên dưới –

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Sau đó, chúng ta có thể gọi Chế độ xem một phần vào chế độ xem chính

 
 
 
 
 
 
 @Styles.Render("~/Content/css") 
 @Scripts.Render("~/bundles/modernizr")
 
 
 @{
 Html.RenderPartial("_HeaderNavBar"); 
 }
 

 @RenderBody()
 
 

 
 
 
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")
 @RenderSection("scripts", required: false)
 
 

XEM THÀNH PHẦN

Xem các thành phần là một trong những tính năng mới được giới thiệu trong ASP. NET Core MVC của Microsoft. Nó rất giống với chế độ xem một phần nhưng nó mạnh hơn nhiều so với chế độ xem một phần. Các thành phần xem không sử dụng liên kết mô hình. Tuy nhiên, nó chỉ hoạt động với dữ liệu được cung cấp khi chúng tôi gọi nó. Giống như Chế độ xem một phần, các thành phần Chế độ xem không phụ thuộc vào bộ điều khiển. Nó có lớp riêng để triển khai logic nhằm phát triển mô hình của thành phần và trang xem đánh dấu dao cạo. Điều quan trọng nhất là View Component có thể sử dụng phép nội xạ phụ thuộc, điều này làm cho chúng rất mạnh mẽ và có thể kiểm tra được. Thành phần Chế độ xem có các tính năng sau –

1. Xem các thành phần hỗ trợ SOC (Tách mối quan tâm)

2. Nó có thể có logic nghiệp vụ riêng cũng như tham số

3. Nó luôn được gọi từ Trang Bố cục

4. Nó luôn hiển thị đoạn chứ không phải toàn bộ quá trình

Thành phần Chế độ xem có thể được triển khai trong bất kỳ phần nào của ứng dụng web nơi có một số khả năng trùng lặp mã như Ngăn Điều hướng, Bảng đăng nhập, Menu, Giỏ hàng, v.v. Vì vậy, nói một cách đơn giản, Thành phần dạng xem thực sự hoạt động giống như một phần web chứa cả logic nghiệp vụ và thiết kế giao diện người dùng để tạo một gói phần web có thể được sử dụng lại trong nhiều phần của ứng dụng web

Vì vậy, khi chúng ta muốn tạo một ASP chuẩn. Net MVC, nó liên quan đến việc xử lý bởi cả Lớp Trình điều khiển và Chế độ xem. Tương tự như vậy, Thành phần dạng xem cũng liên quan đến việc xử lý bởi cả lớp thành phần dạng xem và Dạng xem. Lớp View Component phải được bắt nguồn từ lớp ViewComponent. trong ASP. Net Core, chúng tôi có hai quy trình để khai báo thành phần chế độ xem. Một là chúng ta có thể tạo một lớp có tên và sau đó nối thêm ViewComponent hoặc chúng ta có thể trang trí lớp của mình bằng thuộc tính ViewComponent bằng cách đặt tên thành phần chế độ xem của chúng ta thông qua thuộc tính tên của thuộc tính

Chúng tôi có thể lưu trữ các tệp lớp này bất kỳ thư mục nào trong ứng dụng của chúng tôi. Tuy nhiên, vì thành phần quan điểm chính là tạo ra thứ gì đó có thể được sử dụng ở nhiều nơi trong ứng dụng của chúng ta, do đó, nên đặt các tệp này liên quan đến các thành phần quan điểm trong thư mục xem có tên là Thư mục dùng chung

Bây giờ, chúng tôi đã tạo lớp thành phần chế độ xem và chế độ xem. Vì vậy, bây giờ chỉ là vấn đề thời gian để thêm các phương thức vào lớp của chúng ta và đặt đánh dấu Razor trong chế độ xem. Trong lớp thành phần chế độ xem của chúng tôi, chúng tôi phải xác định một phương thức và nó phải là –

1. Có tên InvokeAsync

2. Phải trả lại một loại đối tượng Tác vụ cho IViewComponentResult

3. Phải được trang trí bằng Từ khóa không đồng bộ

4. Phải chấp nhận một tham số duy nhất (thuộc bất kỳ loại nào)

Thuộc tính async sẽ đảm nhiệm việc bọc đối tượng mà chúng ta trả về từ phương thức InvokeAsync bên trong đối tượng Task. Hiện tại, phương thức View là phương thức duy nhất trong lớp ViewComponent có kiểu trả về là IViewComponentResult

 public async Task InvokeAsync(string EmployeeCode) {
 Employee objEmployee;
 //...retrieve or build Employee object for a specified Employee
 return View(objEmployee);
 }
 

Tất nhiên, bây giờ, việc tạo một thành phần dạng xem sẽ không nhiều nếu chúng ta không thể gọi thành phần dạng xem đó từ bất kỳ phần nào của ứng dụng web. Vì vậy, để gọi một thành phần chế độ xem từ bất kỳ chế độ xem nào khác, chúng ta cần sử dụng @Component. InvokeAsync() như bên dưới

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Tham số này sẽ được truyền cho phương thức InvokeAsync. Giả sử, tôi muốn lấy chi tiết nhân viên của mã A001. Đối với điều đó, trạng thái gọi sẽ trông như thế này -

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

Các thành phần dạng xem thường được gọi từ các dạng xem. Tuy nhiên, chúng ta có thể gọi các thành phần khung nhìn từ một phương thức của bộ điều khiển. Mặc dù các thành phần của chế độ xem không xác định bất kỳ điểm cuối nào như bộ điều khiển, nhưng chúng ta vẫn có thể dễ dàng triển khai phương thức hành động của bộ điều khiển có thể trả về nội dung của ViewComponentResult như ví dụ dưới đây

 

 

 
 
 
 
 
 @Html.ActionLink("Sample Project", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
 
 

 

 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About Us", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 

MÙA HÈ

View Component là một tính năng quan trọng của ASP. NET lõi. Nó rất giống với Chế độ xem một phần. Trong bài viết này, chúng ta đã thảo luận về cách tạo và sử dụng View Component trong ASP. NET lõi

Làm cách nào để gọi hàm JavaScript ở chế độ xem một phần trong MVC?

Chúng tôi có thể trả lại chế độ xem một phần trong MVC không?

Chế độ xem một phần có thể có bộ điều khiển không?

Chúng tôi có thể sử dụng nhiều chế độ xem một phần trong MVC không?