ASP.NET: thêm điều khiển phía máy khách

Question

Nếu tôi có một trang có biểu mẫu (hãy tưởng tượng một trang đơn giản chỉ với TextBox và nút gửi) và tôi muốn cho phép người dùng thêm động vào hộp văn bản cho biểu mẫu qua javascript cách tốt nhất để xử lý phía máy chủ yêu cầu là gì?

Ví dụ: Tôi có một trang kết xuất như sau:

<input type = "text" id = "control1" name = "control1" /> 
<input type = "text" id = "control2" name = "control2" /> 
<input type = "text" id = "control3" name = "control3" /> 
<input type = "submit" /> 

Người dùng kích hoạt một số javascript và trang hóa ra như:

<input type = "text" id = "control1" name = "control1" /> 
<input type = "text" id = "control2" name = "control2" /> 
<input type = "text" id = "control3" name = "control3" /> 
<input type = "text" id = "control4" name = "control4" /> 
<input type = "text" id = "control5" name = "control5" /> 
<input type = "submit" /> 

cách tốt nhất để xử lý loại này là gì của tình hình, hoặc, nói chung, làm việc với đầu vào được tạo động cả phía máy khách lẫn phía máy chủ (ví dụ, cách tạo ra chúng phía máy chủ bắt đầu từ, ví dụ, một số dữ liệu được lấy từ cơ sở dữ liệu)?

Answer 1

Ở phía máy chủ, hãy xem Request.Form ["controlN"] nơi bạn sẽ tìm thấy trường cũ và mới của mình.

Về phía server bạn có thể thêm điều khiển tự động như:

foreach (Type object in MyDBCollection) 
{ 
    Controls.Add (new TextBox()); 
} 

Answer 2

Về phía khách hàng, thực hiện một chức năng JS để tạo đầu vào, ví dụ:

var numCtrl = 1; // depends on how many you have rendered on server side 
var addCtrl = function() { 
    var in = document.createElement('input'); 
    in.name = "control" + ++i; 
    in.type = "text"; 
    in.id = "control" + i; 
    document.getElementById("yourcontainer").appendChild(in); 
} 

..on máy chủ bên chỉ tra cứu bộ sưu tập thông số HTTP của bạn, lặp qua nó và chỉ chọn những kết hợp/điều khiển \ d */

Answer 3

Trong biểu mẫu web, bạn sẽ không có nhiều lựa chọn nếu bạn mong đợi các giá trị để đăng lại và có thể truy cập chúng theo cách điển hình. Điều tôi đề nghị là bạn sử dụng Ajax UpdatePanel để cho phép các điều khiển được đăng ký tại điểm thích hợp của vòng đời trang (trước onLoad), điều này cũng sẽ tạo sự khác biệt về việc bạn có cần hộp postbacks. Các phương thức JS tham gia vào 2 câu trả lời khác sẽ không tồn tại các hộp văn bản thông qua một postback.

MVC cung cấp cho bạn nhiều thời gian hơn, vì không có vòng đời trang điên rồ, đăng ký kiểm soát, viewstate, v.v ... để cản trở bạn.

Vì vậy, câu hỏi lớn đặt ra là bạn đang sử dụng mô hình/khung công tác nào cho ASP.Net?

---

Vì bạn thực sự đang sử dụng biểu mẫu web, tôi thực sự khuyên bạn nên sử dụng bảng cập nhật nếu chúng hoạt động cho bạn. nó sẽ cho phép bạn thêm các điều khiển theo cách như vậy sẽ không cản trở sự kiện, vv ..

Answer 4

Nếu bạn muốn có thể truy cập chúng trong mã sau bằng phương pháp FindControl, AJAX UpdatePanel có lẽ là của bạn đặt cược tốt nhất. Chỉ cần nhớ rằng mỗi lần bạn cập nhật UpdatePanel, bạn sẽ phải trải qua toàn bộ vòng đời của trang nhưng chỉ nhận được các phần hiển thị trong bảng cập nhật từ máy chủ, vì vậy hãy mệt mỏi với chi phí.

Nếu bạn tạo chúng động bằng Javascript, bạn sẽ không thể sử dụng FindControl để truy cập chúng trong mã phía sau vì chúng sẽ không được tạo lại trong chu kỳ sự kiện trang. Ngoài ra, hãy cẩn thận bởi vì nếu bạn đang tạo ra rất nhiều người trong số họ cùng một lúc với một số loại vòng lặp nó có thể làm chậm mọi thứ xuống, đặc biệt là trong Internet Explorer.

Bạn cũng có thể xem xét sử dụng AJAX và WebServices với WebMethods để gửi dữ liệu thay vì đăng lại nếu bạn đang tạo điều khiển động với Javascript.

Answer 5

Tôi đã bắt đầu sử dụng jquery trong rất nhiều ứng dụng webforms và đã tìm thấy sự kết hợp giữa các điều khiển động và sử dụng JSON để giao tiếp với WebMethods của trang cho tôi nhiều quyền kiểm soát hơn về cách trang được hiển thị và loại bỏ postbacks không cần thiết.

Khi tôi muốn kích hoạt đăng lại, tôi sử dụng javascript để điền các điều khiển máy chủ trên trang bị ẩn bởi jquery và sau đó nhấp vào nút điều khiển máy chủ. Điều này cho phép trang làm suy giảm một cách duyên dáng nếu người dùng không thể sử dụng javascript.

Answer 6

Tôi đã làm những điều tương tự với điều này nhiều lần. Cách tiếp cận ưa thích của tôi thường là sử dụng một Repeater và một Button (có nhãn Add) bên trong UpdatePanel.

Đối với sự kiện Button_OnClick trong mã của bạn, hãy làm điều tương tự với điều này;

Loop through the Items collection of the Repeater 
Use item.FindControl("txtUserInput") to get the TextBox for that item 
Save the text of each input to List<string> 
Add an empty string to the the list 
Databind the repeater to this new list 

Dưới đây là một số mã ví dụ;

<asp:Repeater runat="server" ID="rptAttendees"> 
    <ItemTemplate> 
     <asp:TextBox runat="server" ID="txtAttendeeEmail" Text='<%# Container.DataItem %>'></asp:TextBox> 
    </ItemTemplate> 
</asp:Repeater> 



protected void btnAddAttendee_Click(object sender, EventArgs e) 
{ 
    var attendees = new List<string>(); 

    foreach (RepeaterItem item in rptAttendees.Items) 
    { 
     TextBox txtAttendeeEmail = (TextBox)item.FindControl("txtAttendeeEmail"); 
     attendees.Add(txtAttendeeEmail.Text); 
    } 

    SaveAttendees(); 
    attendees.Add(""); 
    rptAttendees.DataSource = attendees; 
    rptAttendees.DataBind(); 
}