Biểu mẫu web Bootstrap là gì?

Nhiều doanh nghiệp đã đầu tư hàng ngàn giờ vào ASP. NET Biểu mẫu web. Chính những doanh nghiệp này không có thời gian để viết lại hệ thống của họ bằng các công nghệ Web mới nhất, chẳng hạn như MVC. Tuy nhiên, chỉ cần làm lại một chút Biểu mẫu web của bạn, bạn vẫn có thể có được tất cả các ưu điểm của các kỹ thuật Web hiện đại, chẳng hạn như HTML 5, CSS 3, Bootstrap và jQuery. Gần đây, tôi đã hỗ trợ nhiều khách hàng khi họ nâng cấp các ứng dụng Biểu mẫu Web của mình để tận dụng Bootstrap, jQuery, JavaScript, URL thân thiện và nhiều kỹ thuật ứng dụng Web hiện đại khác

Bài viết này là một bài viết khác trong loạt bài của tôi về cách nâng cấp ứng dụng Web Forms của bạn mà không cần viết lại. Trong bài viết này, tôi sẽ trình bày cách bạn có thể tận dụng thế hệ HTML 5 từ các điều khiển Hộp văn bản, sử dụng các thuộc tính và kiểu đầu vào HTML 5 mới, đồng thời xem các kỹ thuật để làm việc với jQuery

HTML5 và Visual Studio

Trước HTML 5, bạn bị giới hạn ở một loại văn bản đầu vào đối với kiểu nhập văn bản thông thường của người dùng. Để hạn chế nhập vào số, ngày hoặc bất kỳ loại miền nào khác, bạn đã viết JavaScript/jQuery. HTML 5 định nghĩa một số loại đầu vào mới như number, date, email, v.v. Trình duyệt hiện thực thi nhập dữ liệu khớp với loại đầu vào. Điều này có nghĩa là bạn sẽ viết ít mã hơn nhiều. Ngoài ra, khi người dùng nhập liệu trên điện thoại di động, hầu hết các loại này đều hiện ra bàn phím phù hợp cho việc nhập liệu

Visual Studio 2010 có gói dịch vụ (Bản cập nhật tiêu chuẩn web cho Microsoft Visual Studio 2010 SP1) mà bạn có thể tải xuống để thêm các loại đầu vào HTML 5 mới vào điều khiển Hộp văn bản. Visual Studio 2012/2013 có các loại đầu vào HTML 5 được tích hợp ngay trong thuộc tính

0 trong IntelliSense và Cửa sổ thuộc tính (xem Hình 1)

Hình 1. Các loại đầu vào HTML 5 được tích hợp vào thuộc tính TextMode

Các trình duyệt mới hơn nhận ra tất cả các loại đầu vào HTML 5 mới. Nếu chúng không nhận dạng được, trình duyệt sẽ coi chúng là văn bản. Điều này có nghĩa là bạn có thể bắt đầu sử dụng các loại này ngay lập tức. Nếu bạn có một thư viện JavaScript mà bạn sử dụng để thực thi các loại dữ liệu, rất có thể thư viện đó sẽ vẫn hoạt động đối với các trình duyệt cũ hơn

Cách tiếp cận tốt hơn là sử dụng thư viện Modernizr() để phát hiện các tính năng và loại đầu vào mà trình duyệt của bạn nhận ra và chỉ đưa vào thư viện JavaScript cũ của bạn nếu cần. Khi bạn tạo một ứng dụng Biểu mẫu Web trong Visual Studio 2012/2013, thư viện Modernizr sẽ tự động được đưa vào như một phần của dự án

Để sử dụng bất kỳ loại đầu vào HTML 5 mới nào, bạn thêm một điều khiển TextBox vào trang Web hoặc truy cập trang Web hiện có và chọn loại đầu vào từ thuộc tính

0. Tất cả các loại đầu vào HTML 5 mới được phác thảo trong

Để sử dụng một ASP. NET TextBox yêu cầu loại đầu vào Ngày, đánh dấu Biểu mẫu Web của bạn trông giống như đoạn mã sau

Khi mã này tạo, HTML kết quả trông giống như sau

Đoạn mã trên là HTML 5 hợp lệ và tất cả các trình duyệt hiện đại sẽ nhận ra đây là kiểu nhập ngày tháng. Nhiều trình duyệt trong số đó hiển thị điều khiển lịch thả xuống từ đó người dùng có thể chọn ngày. Nếu một trình duyệt không nhận ra loại đầu vào ngày, nó sẽ coi đó là một loại văn bản

Tùy chỉnh đầu vào của bạn bằng các thuộc tính

Bạn có thể tùy chỉnh thêm các loại đầu vào bằng cách áp dụng các thuộc tính cho các trường đầu vào của mình. Mặc dù các thuộc tính này không hiển thị trong danh sách IntelliSense của ASP của bạn. NET TextBox, bạn có thể phát ra chúng trong HTML cuối cùng bằng cách thêm chúng vào điều khiển TextBox. Có một số thuộc tính HTML 5 mà bạn có thể sử dụng, như minh họa trong. Một ví dụ về lấy nét tự động và các thuộc tính bắt buộc được hiển thị trong đoạn mã sau

Điều khiển máy chủ và jQuery

Trước. NET 4, khi ASP. NET đã tạo HTML, thuộc tính ID xác định duy nhất một điều khiển HTML đã được "kết hợp" thành một giá trị không nhất thiết phải là giá trị bạn đặt trong điều khiển máy chủ của mình. Ví dụ: nếu bạn sử dụng điều khiển Hộp văn bản và đặt tên thành

2, thì ID kết quả trong HTML được tạo có thể là

3. Khi bạn đang sử dụng tất cả mã phía máy chủ, đây không phải là vấn đề. Tuy nhiên, khi bạn bắt đầu sử dụng JavaScript và jQuery, bây giờ bạn phải biết thuộc tính ID phía máy khách sẽ là gì

Một cách giải quyết mà chúng tôi đã sử dụng trong nhiều năm trong Biểu mẫu web là sử dụng một số mã tập lệnh với thuộc tính

4 để đặt ID được tạo trong một số mã JavaScript. Đoạn mã sau hiển thị một ví dụ về cách đặt giá trị của hộp văn bản

2 của bạn bằng cách sử dụng bộ chọn jQuery với mã tập lệnh để cung cấp cho bạn ID phía máy khách đã tạo

Hầu hết chúng ta đều biết mình đang làm gì và có thể đảm bảo rằng chúng ta sẽ không tạo các ID trùng lặp trong một trang HTML, vì vậy sẽ thật tuyệt nếu chúng ta không phải làm việc với những ID bị trộn lẫn này mà Microsoft tạo ra. Bây giờ bạn có tùy chọn đó bằng cách sử dụng thuộc tính

6. Thuộc tính này có thể được đặt trong Web. Cấu hình, trong Trang chính, trong Trang hoặc thậm chí trên một điều khiển riêng lẻ. Có bốn giá trị khác nhau mà bạn có thể đặt thuộc tính này thành, như thể hiện trong

Nếu bạn muốn đơn giản hóa việc lập trình JavaScript/jQuery của mình, hãy đặt

6 thành

8. Khi bạn sử dụng

8, bạn biết rằng ID bạn tạo trên điều khiển máy chủ của mình giống ở phía máy khách. Do đó, bạn có thể sử dụng mã như sau ở phía máy khách của mình

Một điều bạn cần lưu ý khi sử dụng chế độ

8 là bạn có thể gặp sự cố khi làm việc với điều khiển người dùng. Nếu bạn sử dụng cùng một điều khiển người dùng nhiều lần trên cùng một trang, bạn có thể nhận được các ID trùng lặp. Trong trường hợp này, bạn có thể muốn đặt kiểm soát người dùng để tiếp tục sử dụng ClientIDMode=“Auto”. Nhân tiện, bạn sẽ gặp vấn đề tương tự khi sử dụng nhiều chế độ xem từng phần trên cùng một trang trong MVC. Bạn cũng sẽ phải thêm một số tiền tố vào các điều khiển của mình trong chế độ xem một phần để không trùng lặp ID

Nơi đặt ClientIDMode

Bạn có một vài lựa chọn về nơi đặt

6. Trước tiên, bạn có thể đặt nó trong Web. Config nếu bạn muốn mọi trang sử dụng cùng một chế độ. Trong phần tử

2, hãy thêm

3 để làm cho tất cả các trang sử dụng chế độ tạo ID tĩnh

Bạn cũng có thể đặt

6 trong trang chính trong trang web của mình. Đặt

5 trong trang chính làm cho tất cả các trang sử dụng trang chính đó tạo ID tĩnh

<%@ Master Language="C#"
    ClientIDMode="Static"
    Inherits="Samples.Site" %>

Bạn cũng có thể đặt

6 trên một trang Web riêng lẻ trong chỉ thị

7. Hoặc, bạn có thể đặt

6 ngay cả trên một điều khiển riêng lẻ. Như trong hầu hết mọi thứ trong thế giới Web, cài đặt gần nhất với điều khiển sẽ thắng. Vì vậy, mặc dù bạn đặt Web. Cài đặt cấu hình của

6 bằng với

8, nếu bạn đặt điều khiển Hộp văn bản trên một trang riêng lẻ thành

1, thì

1 sẽ được sử dụng vì đây là cài đặt gần nhất với điều khiển

Tóm lược

Microsoft đang tích cực thêm các tính năng mới và cập nhật ASP cơ bản. NET để hỗ trợ cả Biểu mẫu web và MVC. Trong Visual Studio 2013, dự án Biểu mẫu web mới sử dụng cùng thư viện JavaScript và jQuery, Bootstrap, Modernizr và các công nghệ khác cũng được bao gồm trong dự án MVC mới. Các điều khiển máy chủ hiện có trong Biểu mẫu web có thể tận dụng tối đa HTML 5 và CSS 3. Với việc sử dụng chỉ thị

6 mới, giờ đây bạn cũng có thể tạo ID kiểm soát thân thiện với JavaScript/jQuery

Thuộc tínhMô tảSingleLineGiống như văn bản và là loại mặc định cho bất kỳ hộp văn bảnMultiLineGiống như văn bản nhưng cho phép nhiều dòng văn bản. Mật khẩuĐầu vào là văn bản, nhưng khi người dùng nhập, các ký tự được ghi đè bằng một ký tự bị chặn. ColorMột công cụ chọn màu trả về giá trị hex cho màu. DateMột công cụ chọn ngày trả về một chuỗi ngày ngắn. Bộ chọn ngày và giờ DateTime trả về một chuỗi ngày dài. DateTimeLocalMột công cụ chọn ngày và giờ trả về một chuỗi ngày dài ở định dạng cục bộ của trình duyệt. EmailMột địa chỉ email đã được xác thực. Công cụ chọn tháng trả về tên tháng và năm. Số xác thực giá trị số. RangeMột bộ chọn phạm vi, thường được mô tả dưới dạng thanh trượt và trả về một giá trị số. Tìm kiếm trường văn bản có dấu x hiển thị để xóa trường. Điện thoạiMột trường văn bản. Không có xác thực nào được thực hiện, nhưng điện thoại di động thường sẽ hiển thị bàn phím điện thoại. UrlMột địa chỉ URL Internet đã được xác thực. WeekMột công cụ chọn tuần trả về số tuần của năm. AttributeDescriptionautocompleteCó thể bật hoặc tắt. Xác định xem trình duyệt có thể điền các giá trị mà người dùng đã nhập trước đó hay không. tự động lấy nétĐặt trên một trường nhập cụ thể để đặt con trỏ vào trường này khi trang được hiển thị. listMột danh sách các giá trị được xác định trước để hiển thị trong trình đơn thả xuống bên dưới hộp văn bản. Cho phép người dùng nhập giá trị hoặc chọn từ danh sách. min và maxKiểm soát các giá trị tối thiểu và tối đa cho số, phạm vi, ngày, tháng, thời gian và tuần. multipleKhi xuất hiện, cho phép người dùng nhập nhiều giá trị cho loại đầu vào email và tệp. patternMột biểu thức chính quy được sử dụng để kiểm tra đầu vào của người dùng đối với. trình giữ chỗMột gợi ý được hiển thị trong trường nhập khi trường không có tiêu điểm. bắt buộc Trường đầu vào phải chứa giá trị hay không. stepĐược sử dụng để chỉ định khoảng thời gian hợp lệ cho một đầu vào như số, phạm vi, ngày, tháng, thời gian và tuần. SettingDescriptionAutoIDTạo ID bằng cách sử dụng bất kỳ vùng chứa chính nào theo sau là ID bạn đặt trên điều khiển. Ví dụ: "ParentControlName_IDName". TĩnhSử dụng ID bạn đặt trên điều khiển. Có thể dự đoánSử dụng tùy chọn này khi bạn có các điều khiển giới hạn dữ liệu (GridView, DataList, v.v. ) và bạn cần một số ID duy nhất cho mỗi hàng được tạo từ điều khiển. Kế thừaSử dụng ClientIDMode do cài đặt ClientIDMode của kiểm soát gốc đặt

Biểu mẫu Bootstrap là gì?

Bootstrap dùng để làm gì?

Sự khác biệt giữa các hình thức Bootstrap 4 và Bootstrap 5 là gì?

Làm cách nào để tạo một ứng dụng web bằng Bootstrap?