Trong bài viết này, tôi sẽ giải thích cách tự động thêm và xóa các Hộp văn bản một cách linh hoạt bằng cách sử dụng JavaScript trong ASP. Net sử dụng C# và VB. Bọc lưới
Tôi cũng sẽ giải thích cách tìm nạp các giá trị của Hộp văn bản được tạo động bằng cách sử dụng JavaScript ở Phía máy chủ và cũng giữ lại các Hộp văn bản động trên PostBack
Đánh dấu HTML
Đánh dấu HTML bao gồm một Nút HTML để thêm các Hộp văn bản động bằng JavaScript, một DIV HTML để giữ các Hộp văn bản động và một ASP. nút lưới
Kịch bản phía máy khách
Dưới đây là JavaScript phía máy khách để thêm và xóa các Hộp văn bản động
hàm GetDynamicTextBox[value]{
return ' + value + '" />' +
''''''''''''
}
hàm AddTextBox[] {
var div = tài liệu. createElement[ 'DIV' ];
div. innerHTML = GetDynamicTextBox[ "" ];
tài liệu. getElementById[ "TextBoxContainer" ]. appendChild[div];
}
function RemoveTextBox[div] {
tài liệu. getElementById[ "TextBoxContainer" ]. removeChild[div. parentNode];
}
function RecreateDynamicTextboxes[] {
var values = eval[ ' '];
if [giá trị. = null ] {
var html = "" ;
for [ var i = 0; i < . chiều dài;
html += " + GetDynamicTextBox[values[i]] + ";
}
tài liệu. getElementById[ "TextBoxContainer" ]. InternalHTML = html;
}
}
cửa sổ. onload = RecreateDynamicTextboxes;
Hàm GetDynamicTextBox
Hàm này trả về một chuỗi HTML của Hộp văn bản HTML và nút sẽ được sử dụng để nối vào vùng chứa DIV
Hàm AddTextBox
Hàm này tạo một phần tử HTML DIV với một TextBox và một Button [để loại bỏ TextBox] và sau đó nối nó vào Container DIV
Lưu ý . Trong khi tạo các Hộp văn bản động, tôi đang gán một thuộc tính tên không đổi DynamicTextBox cho tất cả các Hộp văn bản. Các giá trị của Hộp văn bản động sẽ được tìm nạp bằng thuộc tính tên của nó.
Chức năng RemoveTextBox
Chức năng này chỉ đơn giản là loại bỏ Hộp văn bản được thêm động được liên kết với Nút đã được nhấp
Chức năng RecreateDynamicTextboxes
Chức năng này được gọi trong sự kiện tải cửa sổ JavaScript được kích hoạt sau khi trang được tải trong trình duyệt
Đầu tiên, nó chuyển đổi chuỗi JSON từ phía máy chủ i. e. ' ' to JavaScript Array and then recreates the dynamic TextBoxes by looping through the values preset in the JavaScript array.
không gian tên
Bạn sẽ cần nhập không gian tên sau
C#
sử dụng Hệ thống. mạng. Kịch bản. Tuần tự hóa;
VB. Bọc lưới
Nhập Hệ thống. mạng. Kịch bản. Tuần tự hóa
Tìm nạp các giá trị của Hộp văn bản động được tạo bằng JavaScript
Khi nút Đăng được nhấp, đầu tiên các giá trị của Hộp văn bản được tìm nạp từ Yêu cầu. Bộ sưu tập biểu mẫu sử dụng giá trị thuộc tính tên của Hộp văn bản động
Các giá trị đã tìm nạp được tuần tự hóa thành một chuỗi JSON và được gán cho biến Giá trị được bảo vệ, chuỗi JSON này sẽ được sử dụng ở Phía máy khách để tạo lại các Hộp văn bản động sau PostBack