Tính năng Web Live Preview của phần mềm Telerik UI cho ASP.NET AJAX

Cùng iworld.com.vn tìm hiểu các tính năng của Telerik UI dành cho các lập trình viên ASP.NET AJAX nhé!

Bạn đã sẵn sàng để tìm hiểu xem điều gì đang diễn ra trên khung cảnh ASP.NET Web Forms và nó sẽ ảnh hưởng như thế nào đến sự phát triển web trong Visual Studio 2019 và hơn thế nữa, và đặc biệt là Telerik UI cho bộ ASP.NET AJAX?

Nếu bạn muốn tìm hiểu, hãy xem bài đăng trên blog này, nơi chúng ta sẽ tham quan các chủ đề sau:

• Xem trước Trực tiếp trên Web là gì?
• Làm thế nào để thử nó ra
        Thiết lập (Tải xuống và Cài đặt)
        Sử dụng tiện ích mở rộng
        Tích hợp với các điều khiển Telerik AJAX
• Chia sẻ những gì bạn nghĩ
• Tìm hiểu thêm trên WLP

Xem trước trực tiếp trên web là gì?

Web Live Preview (WLP) là một tiện ích bổ sung Visual Studio (VS) cho phép ánh xạ thời gian thực giữa mã nguồn của bạn và HTML được hiển thị trong trình duyệt. Khi xem ứng dụng web của mình, bạn có thể chọn các phần tử trong trình duyệt giống như trong DevTools và IDE sẽ tự động hiển thị cho bạn mã đã được thực thi để tạo phần tử. Và ngược lại: Nếu bạn chỉnh sửa mã nguồn trong VS, ứng dụng web sẽ tự động được cập nhật. Ý tưởng của công cụ là có thể truy cập được (một xu hướng trên toàn bộ danh mục đầu tư của Microsoft) và tuân theo các tiêu chuẩn web hiện đại.

Đó không phải là tất cả. WLP cho phép bạn định cấu hình cài đặt (thuộc tính, kết hợp dữ liệu, v.v.) của các thành phần ASP.NET Web Forms. Điều này cũng có thể áp dụng cho các điều khiển Telerik UI ASP.NET AJAX, cho phép bạn định cấu hình chúng trực tiếp từ trình duyệt của mình thông qua Bảng hành động được cung cấp (menu Tác vụ với các thuộc tính của điều khiển — rất giống với thẻ thông minh mà chúng ta đã quen thuộc với VS Designer ). Thật tuyệt vời và tiết kiệm thời gian phải không?

Cũng cần phải nhắc lại rằng, không giống như VS Designer đã lỗi thời, Web Live Preview sẽ nhận được hỗ trợ và cập nhật đầy đủ trong các phiên bản tương lai của Visual Studio. Cộng đồng đang yêu cầu và hy vọng sẽ kích hoạt Web Live Preview cho các loại dự án web khác như Blazor và ASP.NET Core, nơi công cụ này vẫn chưa có sẵn và tiềm năng cũng như khả năng sử dụng của nó sẽ rất lớn.

Làm thế nào để dùng thử

Làm theo các bước bên dưới với công cụ:

Thiết lập (Tải xuống và Cài đặt)

Bạn có thể tải xuống và cài đặt tiện ích bổ sung WLP từ thị trường Visual Studio:

1.Sử dụng web-based marketplace hoặc thị trường “Quản lý tiện ích mở rộng” được tích hợp trong Visual Studio -> go to Extensions -> Manage Extensions -> nhập “web live preview”  trong Search box và0 ấn Enter
2.Cài đặt công cụ.
Mẹo 1: Để hoàn tất cài đặt, bạn sẽ được yêu cầu khởi động lại Visual Studio.
Mẹo 2: Để đảm bảo rằng công cụ đã được cài đặt và kích hoạt, hãy đi tới Công cụ -> Tùy chọn -> nhập “xem trước trực tiếp trên web” vào trường tùy chọn tìm kiếm -> nhấn Chung -> đảm bảo rằng các tính năng đã bật và công cụ và đồng bộ hóa tự động được bật được bật:

Sử dụng Tiện ích mở rộng

Sau khi cài đặt, WLP cung cấp cho bạn tùy chọn nhấp chuột phải mới “Chỉnh sửa trong trình duyệt” trong menu ngữ cảnh của trang ASPX ở chế độ nguồn cũng như trong trình khám phá giải pháp:

Tùy chọn này sẽ tải trang ở chế độ đặc biệt trong trình duyệt mặc định của bạn, nơi bạn có thể chọn các phần tử và điều khiển giao diện người dùng Web bằng chuột và sửa đổi các thuộc tính và văn bản của chúng:

Lựa chọn trong trình duyệt được đồng bộ hóa tự động trong mã nguồn của bạn trong Visual Studio. Nếu bạn chọn một điều khiển giao diện người dùng trong trang, chẳng hạn như RadGrid (xem thêm trong phần tiếp theo) hoặc asp: DataGrid và thay đổi thuộc tính của nó từ Bảng hành động WLP, các thuộc tính sẽ được phản ánh tới Nguồn ngay lập tức. Điều ngược lại cũng hợp lệ — những thay đổi trong nguồn cũng sẽ được phản ánh trong trình duyệt.

Tích hợp với điều khiển Telerik ASP.NET AJAX

Đây là một vinh dự thực sự cho nhóm Telerik tại Progress khi được tham gia vào cơ hội quan trọng và hữu ích này và là một trong những người tiên phong trong việc giới thiệu hỗ trợ Web Live Preview cho giao diện người dùng Telerik cho bộ công cụ ASP.NET AJAX.

Hãy tạo bản demo nhanh về mức hỗ trợ hiện tại:

1.Khởi động  ứng dụng biểu mẫu web Telerik C # mới và chọn mẫu lấy cảm hứng từ Outlook làm cơ sở (điều kiện tiên quyết là đã cài đặt tiện ích mở rộng Telerik AJAX VSX).

2.Khi bạn đã tạo và tải dự án trong Visual Studio, hãy nhấp chuột phải vào trang Default.aspx và chọn tùy chọn “Chỉnh sửa trong trình duyệt” (trình duyệt mặc định của bạn) từ menu ngữ cảnh. Thao tác này sẽ tải trang cùng với tính năng Xem trước trực tiếp trên web được bật trong trình duyệt.

Mẹo: Để hiển thị tốt hơn trên các máy có một màn hình, bạn có thể chia màn hình giữa Visual Studio và trình duyệt bằng cách nhấn phím Windows + Trái (để IDE được định vị bên trái) và phím Windows + Phải (để trình duyệt chạy rẽ phải).

3.Ví dụ 1: Chèn RadTextBox và RadButton trong trang nguồn, chọn chúng trong trình duyệt ở bên phải và thay đổi một số thuộc tính cốt lõi của chúng từ Bảng điều khiển: Văn bản và Loại nút. Lưu ý cách các thuộc tính được áp dụng tự động trong nguồn:

Vì đây là một quá trình hai chiều, nếu bạn chỉnh sửa các giá trị thuộc tính trong nguồn, chúng cũng sẽ được cập nhật trong bảng hành động.

4.Ví dụ 2: Kiểm tra và chơi với Bảng hành động WLP của RadGrid và các thành phần cơ sở dữ liệu khác. Đi tới trình duyệt, chọn điều khiển RadGrid và nhấn nút >> trong bộ chọn thẻ để hiển thị Bảng hành động của nó. Kiểm tra cài đặt cấu hình có sẵn cho điều khiển web và thử thay đổi Nguồn dữ liệu của nó. Bạn sẽ thấy rằng tùy chọn gói dữ liệu sẽ xuất hiện trong Visual Studio để cấu hình thêm.

Hình 2: Liên kết RadGrid thông qua Bảng điều khiển hành động xem trước trực tiếp trên web.

5.Ví dụ 3: Tính năng Tự động đồng bộ hóa CSS — khi WLP được bật, nếu bạn thay đổi tệp CSS đang được sử dụng, các bản cập nhật sẽ tự động được đẩy:

Hình 3: Tự động đồng bộ hóa CSS đang hoạt động.

6.Một điều mà tôi nhận thấy trong các thử nghiệm của mình là hành vi mặc định của Trình thiết kế để đính kèm trình xử lý phía máy chủ mặc định của nó khi bạn nhấp đúp vào một điều khiển cũng được hỗ trợ bởi WLP.

Ví dụ 4: Xác định vị trí điều khiển RadButton trong trang web và nhấp đúp vào nó. Điều này sẽ ngay lập tức tạo sự kiện RadButton1_Click và tự động hiển thị nó trong trang codebehind.

Mẹo: Nhấp đúp vào các vùng chứa như div, span và đoạn văn làm cho nó có thể chỉnh sửa được và cho phép bạn viết và chỉnh sửa văn bản bên trong, văn bản này sẽ được đồng bộ hóa với trang aspx khi bạn làm mờ trường có thể chỉnh sửa.

Hãy dùng thử và cho chúng tôi biết suy nghĩ của bạn

Mặc dù WLP hiện đang trong giai đoạn xem trước, nhưng Microsoft vẫn tận tâm với chất lượng của nó và tôi có thể xác nhận rằng nhiều lỗi được báo cáo đã được sửa trong thời gian tương đối ngắn trong quá trình hợp tác của chúng tôi với họ. Công cụ này đã cung cấp mức độ hỗ trợ tốt cho nhiều giao diện người dùng Telerik cho các điều khiển ASP.NET AJAX và cho phép định cấu hình cài đặt của chúng trực tiếp từ trình duyệt. Một số tính năng như trình chỉnh sửa tùy chỉnh để thiết lập Giao diện hiện đang được phát triển và những tính năng khác vẫn chưa có hoặc chưa hoạt động. Tất nhiên, điều này là tạm thời và sắp thay đổi trong các bản cập nhật sắp tới của công cụ.

Đây là thời điểm để mời tất cả những ai muốn tham gia vào việc cải thiện Xem trước Trực tiếp trên web cho chúng tôi biết bằng cách mở phiếu phản hồi chung từ tài khoản Telerik.com của bạn. Điều kiện tiên quyết duy nhất là có ứng dụng ASP.NET Web Forms hiện có với các thành phần Telerik AJAX cập nhật mà bạn muốn chia sẻ với chúng tôi cho mục đích thử nghiệm. Tất nhiên, chúng tôi sẽ rất vui khi nhận được bất kỳ phản hồi nào mà bạn có thể có để chúng tôi có thể chia sẻ nó với nhóm WLP và giúp họ làm cho công cụ có thể sử dụng được cho mọi nhà phát triển trong hệ sinh thái Microsoft.

Tìm thêm trên WLP

Hãy để tôi cung cấp cho bạn một vài tài nguyên khác về WLP mà bạn có thể thấy hữu ích:

Giới thiệu “Web Live Preview” (blog chính thức của Microsoft)
Tải xuống, cài đặt và phát hành ghi chú của tiện ích mở rộng xem trước trực tiếp trên web (VS Marketplace)
ASP.NET Community Standup — Web Live Preview (Video Presentation)

Biên dịch bởi Trinh Minh-iworld.com.vn

Xem thêm

Cách chọn các tính năng Fiddler của Telerik phù hợp với yêu cầu debug code của bạn

Tính năng mới của Telerik UI cho lập trình viên Blazor phiên bản 2.22.0