Cách bao gồm javascript trong cshtml?
Các phương thức và phần mở rộng của trình trợ giúp Ajax trong Hệ thống. mạng. Mvc và hệ thống. mạng. mvc. Không gian tên Ajax có thể được kết hợp với chế độ xem một phần JavaScript và MVC để tạo các trang web tương tác linh hoạt với mã tối thiểu. Khi sử dụng các tài nguyên này, các nhà phát triển nên biết một số kỹ thuật cần thiết để tạo mã hiệu quả Show
Hướng dẫn này chỉ ra cách triển khai hiệu quả chức năng JavaScript khi tạo một trang web từ các chế độ xem từng phần của Razor, bao gồm các phần tử Các mã trong hướng dẫn này được lấy từ cùng một giải pháp Visual Studio được sử dụng cho hướng dẫn đồng hành, có sẵn trên GitHub. Bạn có thể tải xuống và chạy dự án để xem các kỹ thuật được minh họa trong hướng dẫn này đang hoạt động và để tự mình thử nghiệm Một số chi tiếtNghiên cứu điển hình là một giải pháp Visual Studio 2017 đa dự án được phát triển từ ASP mặc định. MẠNG LƯỚI. NET Framework MVC mẫu. Nó sử dụng Entity Framework 6. 1 và các mẫu thiết kế của kho lưu trữ và Chế độ xem mô hình ViewModel (MVVM) Giải pháp bao gồm ba dự án tạo thành các lớp khác nhau của ứng dụng ProjectApplication LayerBlip. Dữ liệu Bối cảnh dữ liệu và kho lưu trữ Blip. Thực thểThực thể dữ liệuBlip. Giao diện người dùng web (lượt xem) và Logic nghiệp vụ (bộ điều khiển) Ứng dụng nghiên cứu điển hình, BlipAjax là một hệ thống đơn giản để thu thập, lưu trữ và truy xuất thông tin địa lý và các thông tin khác về khách hàng. Nó không sẵn sàng sản xuất từ quan điểm thiết kế hoặc mã hóa; . Để biết mô tả đầy đủ về giải pháp ví dụ, hãy xem hướng dẫn đi kèm Tóm lại, Trang Khách hàng/Chỉnh sửa bao gồm chế độ xem chính và ba chế độ xem một phần. Chế độ xem một phần thứ ba có thể là chế độ xem một phần để tạo địa chỉ email mới hoặc chế độ xem một phần để tạo địa chỉ bưu chính mới, tùy thuộc vào giá trị được chọn trong chế độ xem từng phần thứ hai. Hình minh họa sau đây hiển thị Khách hàng/Chỉnh sửa với các chú thích xác định chế độ xem (một phần), mô hình chế độ xem và hành động (phương thức) của bộ điều khiển được liên kết với việc hiển thị chế độ xem Trên trang Khách hàng/Chỉnh sửa, các hàm JavaScript được sử dụng để điền vào danh sách thả xuống Bang/Khu vực với các giá trị tương ứng với giá trị được chọn trong danh sách thả xuống Quốc gia. Khi người dùng thay đổi quốc gia đã chọn, các giá trị cho trường Bang/Khu vực phải được đặt lại Chế độ xem một phần JavaScript và AjaxCó hai khía cạnh đối với việc triển khai JavaScript với các chế độ xem Razor một phần của Ajax
Trong giải pháp ví dụ, các tập lệnh triển khai cụ thể là những tập lệnh điền vào các giá trị thả xuống Bang/Khu vực Thư viện JavaScriptViệc triển khai thành công các chế độ xem từng phần của Ajax phụ thuộc vào việc tải đúng cách một số thư viện JavaScript jQuery và các thư viện trên toàn trang web khácASP mặc định. NET MVC mẫu bao gồm một _Layout tiêu chuẩn. tệp cshtml triển khai các tính năng điều hướng và bao gồm các tham chiếu đến các thư viện JavaScript tiêu chuẩn. Bởi vì _Layout. cshtml được bao gồm trong mọi dạng xem trong dự án web, đây là một nơi tốt để bao gồm các tham chiếu tập lệnh triển khai chức năng cho các thành phần trang, chẳng hạn như Hầu hết các thư viện JavaScript được hiển thị ở cuối phần tử Chức năng giao diện người dùng do khung CSS Bootstrap cung cấp được bao gồm trong Bootstrap. thư viện js được tải với gói Bootstrap. Bootstrap. js phụ thuộc vào thư viện jQuery phổ biến, được tải bằng gói jquery Định nghĩa của gói jquery cho phép tải phiên bản jQuery hiện tại mà không thay đổi định nghĩa gói hoặc _Layout. cshtml để khớp với số phiên bản hiện tại. Bằng cách này, thư viện jQuery có thể được cập nhật thông qua gói NuGet được liên kết mà không cần cập nhật mã để giữ cho số phiên bản được đồng bộ hóa Chức năng Ajax phụ thuộc vào thư viện jQuery chứ không phụ thuộc vào thư viện Bootstrap. Nếu dự án web không triển khai khung CSS Bootstrap, thư viện Bootstrap là không cần thiết. Trong giải pháp ví dụ, BlipAjax, khung CSS Bootstrap, được sử dụng để cung cấp chức năng và kiểu dáng giao diện người dùng cho một số thành phần giao diện người dùng, bao gồm các thành phần biểu mẫu như danh sách thả xuống Quốc gia và Bang/Khu vực _Cách trình bày. cshtml
html Lưu ý rằng _Layout. tệp cshtml cũng bao gồm một xác thực jquery. js, jquery-validate-không phô trương. js và jquery-không phô trương-ajax. jsCác trang bao gồm các phần tử
Các thư viện này được tải thông qua gói jqueryval Các trang bao gồm chức năng Ajax, chẳng hạn như Khách hàng/Chỉnh sửa cần bao gồm một thư viện JavaScript bổ sung jquery-không phô trương-ajax. js Thư viện này được tải thông qua gói jqueryunobtrusive Lưu ý rằng quy ước đặt tên tiêu chuẩn cho các thư viện có khả năng gây nhầm lẫn. gói jqueryunobtrusive không bao gồm thư viện cho Ajax kín đáo và gói jqueryunobtrusive không bao gồm thư viện để xác thực kín đáo Như được hiển thị bên dưới, chế độ xem gốc cho Khách hàng/Chỉnh sửa bao gồm một Thứ tự tải cũng rất quan trọng để triển khai đúng các thư viện xác thực. Cả jquery-validate. js và jquery-xác thực-không phô trương. js yêu cầu phải tải thư viện jQuery trước chỉnh sửa. Chế độ xem gốc của cshtml cũng bao gồm mã JavaScript dành riêng cho trang sẽ được mô tả chi tiết trong phần tiếp theo Khách hàng/Chỉnh sửa. cshtml
html Lưu ý rằng phía máy chủ Cũng lưu ý rằng thứ tự của các lệnh này là không bắt buộc, nhưng vì chức năng Ajax quan trọng đối với hoạt động bình thường của trang hơn là xác thực phía máy khách, nên tải thư viện đó ngay sau thư viện jQuery để giảm thiểu . Điều này đặc biệt quan trọng khi thêm sự phức tạp của việc tải thư viện JavaScript từ mạng phân phối nội dung (CDN) trong sản xuất với phiên bản cục bộ của thư viện dưới dạng dự phòng khi CDN không khả dụng Cuối cùng, lưu ý rằng các phần tử Tập lệnh triển khai cụ thểTrang Khách hàng/Chỉnh sửa bao gồm các chức năng JavaScript triển khai cụ thể điền các giá trị cho danh sách thả xuống Quốc gia và Bang/Khu vực trong cả hai phần Chỉnh sửa chi tiết khách hàng và Thêm địa chỉ gửi thư mới của trang. Như đã lưu ý ở trên, quy ước mã hóa trong ASP. NET MVC là đặt các tập lệnh cho chế độ xem một phần trong. cshtml cho chế độ xem chính (đây là một ngoại lệ quan trọng đối với quy ước này, sẽ được mô tả chi tiết bên dưới) Triển khai Khách hàngChỉnh sửa một phần. cshtmlVì các yếu tố kiểm soát liên quan đến tập lệnh được bao gồm trong chế độ xem một phần CustomerEditPartial. cshtml, sẽ rất hữu ích khi xem chế độ xem một phần khi kiểm tra chức năng của tập lệnh Khách hàngChỉnh sửaMột phần. cshtml 1html Lưu ý Ngoài ra, hãy lưu ý mã Dao cạo sau 7html Vì khách hàngChỉnh sửa một phần. cshtml là chế độ xem một phần đầu tiên được tải trong Chỉnh sửa. chế độ xem cha cshtml và vì Chỉnh sửa. cshtml không có chỉ thị Tập lệnh cho khách hàngChỉnh sửa một phần. cshtmlTrường hợp sử dụng cho biểu mẫu để chỉnh sửa Quốc gia và Tiểu bang/Khu vực được liên kết với khách hàng hơi khác so với trường hợp thêm địa chỉ bưu chính mới, vì vậy chức năng tập lệnh cũng hơi khác. Khi trang Khách hàng/Chỉnh sửa được sử dụng, khách hàng đã tồn tại, do đó, có một bản ghi hiện có bao gồm các giá trị cho Quốc gia và Tiểu bang/Khu vực của khách hàng. Theo đó, tập lệnh cần điền vào danh sách các giá trị cho trường Bang/Khu vực với các giá trị được liên kết với giá trị hiện có cho Quốc gia và đặt giá trị của tùy chọn kiểm soát Khu vực tương ứng, như sau trong hàm JavaScript đầu tiên trong Khách hàng/Chỉnh sửa. cshtml, hiển thị bên dưới Lưu ý rằng JavaScript dành riêng cho triển khai sử dụng thư viện jQuery (" ______117 "). Dấu ba chấm (" 1html Hàm này nhận giá trị của Hàm 3html Để biết thêm thông tin về hành động của bộ điều khiển ____210 , hãy xem giải pháp mẫu BlipAjax trên GitHub. Lưu ý về liên kết tập lệnh cho chế độ xem một phầnNhư đã lưu ý ở trên, quy ước dành cho JavaScript được liên kết với các chế độ xem từng phần của Razor là đưa chúng vào chế độ xem chính. cshtml. Các hàm JavaScript có thể được liên kết với các thành phần trên chế độ xem một phần; . Điều này xảy ra khi tải chế độ xem một phần bằng phương thức trợ giúp 6html Chế độ xem một phần CustomerEditPartial. cshtml và AddressTypePartial. cshtml bật "thành phần hóa" của Khách hàng/Chỉnh sửa. chế độ xem cshtml. Cả hai chế độ xem một phần đều được hiển thị cùng lúc với chế độ xem gốc và do đó Tập lệnh cho CreatePostalAddressPartial. cshtmlHiển thị chế độ xem một phần CreatePostalAddressPartial. cshtml được bắt đầu bởi sự kiện ____215 của biểu mẫu Ajax được tạo bởi AddressTypePartial. chế độ xem một phần cshtml, được định nghĩa như sau. Địa chỉLoạiMột phần. cshtml 1csharp Mặc dù Bởi vì chế độ xem một phần địa chỉ gửi thư không được hiển thị khi chế độ xem chính và các chế độ xem từng phần trước đó được hiển thị, JavaScript được tải với chế độ xem chính Chỉnh sửa. cshtml không thể bị ràng buộc với các thành phần trên chế độ xem một phần địa chỉ bưu điện
Lưu ý rằng một số thành phần biểu mẫu đã được biên tập lại cho ngắn gọn, như được hiển thị bằng dấu chấm lửng (" TạoBưu chínhĐịa chỉMột phần. cshtml 7html Lưu ý các tính năng sau của chế độ xem một phần
Điểm cuối cùng là điểm mạnh để sử dụng tập lệnh tùy chỉnh với chế độ xem từng phần của Ajax. Chế độ xem một phần được hiển thị với Ajax không phô trương cần bao gồm vừa đủ mã tập lệnh để xử lý liên kết phần tử và gọi các thư viện và hàm trong phần gốc, giúp ngăn chặn mã trùng lặp Ngoài ra, xin lưu ý rằng xác thực phía máy khách kín đáo được tải với gói Sự kết luậnKhi được cấu trúc đúng cách, mã JavaScript có thể mở rộng sức mạnh của thư viện JavaScript và mã tùy chỉnh cho các chế độ xem từng phần của Razor được hiển thị bằng thư viện Ajax kín đáo. Các bước chính là
Với những kỹ thuật này, có thể tạo các trang web mạnh mẽ, tương tác, dựa trên dữ liệu với mã tối thiểu và không phải phụ thuộc vào chi phí phát triển của việc triển khai khung phía máy khách Thêm thông tinNếu bạn muốn tìm hiểu sâu hơn về các chủ đề được thảo luận trong hướng dẫn này hoặc thử nghiệm với mã được hiển thị ở trên, thì đây là danh sách tài nguyên được chọn Dự án mẫuGiải pháp Visual Studio hoàn chỉnh được mô tả trong hướng dẫn này có sẵn trên GitHub BlipAjax Dự án mẫu được cung cấp nguyên trạng, không có bất kỳ bảo đảm nào được thể hiện hay ngụ ý. Cả PluralSight và tác giả đều không chịu trách nhiệm về bất kỳ lỗi hoặc thiếu sót nào Các khóa học về thị giác số nhiều liên quanASP. NET MVC Các chủ đề nâng cao của Scott Allen, ngày 22 tháng 7 năm 2009. Mô-đun đầu tiên của khóa học này, Ajax với ASP. NET MVC cung cấp một cái nhìn tổng quan về công nghệ liên quan Các nguồn lực kháchọc. jquery. com — Đây là trang web chính thức cho tài liệu jQuery, được cung cấp bởi jQuery Foundation Microsoft. Gói và thu nhỏ, của Rick Anderson, ngày 23 tháng 8 năm 2012 — Đây là hướng dẫn cần thiết để triển khai gói và thu nhỏ trong ASP. NET MVC. Nếu bạn đang viết cho thiết bị di động – và bạn nên như vậy – Google sẽ đánh giá thấp hiệu suất trang của bạn trừ khi bạn sử dụng gói và thu nhỏ, làm ảnh hưởng đến hiệu suất của bạn trong tìm kiếm Microsoft. Hệ thống. mạng. không gian tên Mvc và Microsoft. Hệ thống. mạng. mvc. Không gian tên Ajax — Đây là các tham chiếu tài liệu chuẩn cho lớp AjaxHelper, AjaxExtensions (bao gồm phương thức BeginForm) và các lớp AjaxOptions. Lưu ý rằng nếu bạn tìm kiếm thông tin trên tài liệu. Microsoft. com, nó sẽ khởi động bạn đến các URL này. Mặc dù trang này đề cập đến Visual Studio 2013 nhưng trên thực tế, đây là tài liệu mới nhất Wikipedia. Ajax (lập trình) — Một bản tóm tắt hay về kiến trúc, lịch sử và triển khai Ajax. Nền tảng tốt cho người mới bắt đầu tìm kiếm nền tảng cơ bản trong công nghệ Tôi có thể sử dụng JavaScript trong MVC không?JavaScript có thể được sử dụng trong asp. net mvc .
Bạn có thể sử dụng JavaScript trong Razor không?Bạn có thể gọi các phương thức JavaScript từ các trang Blazor với sự trợ giúp của JavaScript Interop bằng cách đưa phần phụ thuộc IJSRuntime vào trang dao cạo . Sau đó tham khảo tập lệnh trong trang HTML của ứng dụng blazor. Kiểm tra liên kết này để biết thêm thông tin.
Làm cách nào để gọi hàm JavaScript ở chế độ xem một phần trong MVC?Làm cách nào để gọi hàm JavaScript ở chế độ xem một phần trong MVC? . Tải jQuery trong _Layout. . Tải jquery-không phô trương-ajax. . Bao gồm các tập lệnh cho các chế độ xem một phần được hiển thị với chế độ xem chính trong chế độ xem chính Bao gồm các tập lệnh cho chế độ xem một phần được hiển thị bằng Ajax trong chế độ xem một phần HTML và Cshtml có giống nhau không?Cshtml về cơ bản là tiện ích mở rộng chế độ xem dao cạo và bất kỳ chế độ xem nào cuối cùng cũng hiển thị trong html . Bạn cần sử dụng Dao cạo trong ứng dụng của mình vì nó hỗ trợ mã phía máy chủ nhưng html thô thì không. |