Làm cách nào bạn có thể di chuyển các điều khiển ASP.Net đến các vị trí khác nhau trên biểu mẫu Web khi chạy?

Question

Có cách nào được chấp nhận để "di chuyển" một điều khiển hay không.

Khách hàng của tôi muốn đặt một đoạn đánh dấu nhất định (đại diện cho một số yếu tố hình ảnh) ở một trong nhiều vị trí khác nhau trên trang. Các vị trí khác với điểm mà tôi không thể thực hiện thay đổi trên CSS dọc theo (bằng cách thả nổi hoặc gì đó).

Tôi đã xem xét việc đặt điều khiển ở nhiều vị trí với Hiển thị được đặt thành "sai", sau đó hiển thị một vị trí ở nơi họ muốn cho trang cụ thể đó.

Tuy nhiên, mã cho điều khiển này không phải là tầm thường - ví dụ: có một vài phần mẫu. Có để dupe này ở nhiều nơi sẽ nhận được khó sử dụng. Ngoài ra, tôi không muốn phải làm việc với sự kiểm soát này một cách nghiêm túc từ phía sau mã cho cùng một lý do.

Vì vậy, tôi muốn đặt nó ở một nơi trên biểu mẫu Web, di chuyển nó xung quanh dựa trên nơi tôi muốn. Tôi có thể đặt Phần giữ chỗ ở các vị trí khác nhau, có điều khiển tại một điểm, sau đó xóa và thêm nó vào đúng vị trí không? Tôi nghi ngờ điều này sẽ làm việc.

Có ai đó có ý tưởng hay hơn không? Có cách nào tốt nhất cho việc này không?

Answer 1

Tôi muốn khuyên bạn sử dụng trình điều khiển giữ chỗ, di chuyển đánh dấu của bạn thành điều khiển người dùng riêng biệt, sau đó tải nó vào thời gian chạy và thêm nó vào trình giữ chỗ phù hợp.

Ví dụ:

// Load a user control 
MyControl userCtrl = (MyControl) LoadControl("~/Controls/MyControl.ascx"); 

// Or create an instance of your control 
SubclassedControl subclassedCtrl = new SubclassedControl(); 

// Do stuff with controls here 
userCtrl.LoadData(); 
subclassedCtrl.Text = "Hello World"; 

// Check which placeholder to add controls to 
PlaceHolder placeHolder = (foo=="bar") ? placeHolder1 : placeHolder2; 

// Add the controls 
placeHolder.Controls.Add(userCtrl); 
placeHolder.Controls.Add(subclassedCtrl); 

Điều này sẽ tránh làm lộn xộn lên trang của bạn với đánh dấu không cần thiết, và tải nó tại thời gian chạy cũng sẽ tránh nhầm lẫn không cần thiết sau đó, khi nhà phát triển khác nhìn vào mã và có thể không ngay lập tức nhìn thấy lý do tại sao một điều khiển là ở một nơi trong đánh dấu, nhưng hiển thị trên một phần hoàn toàn khác của trang.

Answer 2

Các phần Web có làm những gì bạn muốn làm không?

Hoặc bạn có thể thay đổi phụ huynh theo chương trình của các điều khiển để di chuyển chúng vào một khu vực riêng biệt.

Answer 3

Bạn luôn có thể đặt các ô ở vị trí được xác định trước và thêm điều khiển vào bảng điều khiển cụ thể trong thời gian chạy .. Dưới đây là ví dụ thêm nhãn (nhãn có thể được thay thế bằng bất kỳ điều khiển nào).

Dim lblDisplay As Label = New Label() 
lblDisplay.ID = "myLabel" 
lblDisplay.Text = "Some Text" 
pnlDisplay.Controls.Add(lblDisplay) 

As far as ...

"Ngoài ra, tôi không muốn phải làm việc với kiểm soát này chặt chẽ từ code-behind với cùng lý do."

Tôi nghĩ bạn sẽ phải thực hiện hầu hết công việc của mình bằng mã phía sau.

PS .. một ví dụ điển hình của việc thiết lập toàn bộ usercontrol có thể được tải về tại đây .. http://www.asp.net/downloads/starter-kits/time-tracker/

Answer 4

Bạn có thể ghi đè lên Render phương pháp và đặt các điều khiển bất cứ nơi nào bạn muốn trong html.

Bạn chỉ cần thêm điều khiển vào bộ sưu tập Điều khiển phải tương tác trên máy chủ. Phần còn lại của HTML của bạn chỉ có thể được ghi vào luồng phản hồi. Nếu bạn ghi đè Render, bạn có thể tạo html bất kỳ cách nào bạn thấy phù hợp, đặt các điều khiển theo thứ tự bất kỳ.

Dưới đây là ví dụ về cách viết html của bạn.

protected override void Render(HtmlTextWriter writer) 
{ 
    AddAttributesToRender(writer); 
    writer.RenderBeginTag(TagKey); 

    writer.RenderBeginTag(HtmlTextWriterTag.Div); 
    _control.RenderControl(writer); 
    writer.RenderEndTag(); 

    writer.RenderEndTag(); 
} 

Answer 5

Một giải pháp thay thế (và tôi đã thực hiện nhiều lần trước đây) là thông qua javascript và DOM. Hiển thị điều khiển của bạn bên trong thẻ div ẩn. Vì vậy, bạn sẽ làm cho nội dung của bạn ở đây:

<div id='rendercontent' style='display:none'> 
    .. control here .. 
</div> 

Sau đó, cho phép nói rằng bạn muốn di chuyển nó tất cả ở đây (thẻ span là bên trong bởi vì đó là những gì chúng ta sẽ thay thế):

<div id='newlocation1'><span></span></div> 

bạn sẽ xác định javascript sau:

<script language="JavaScript"> 
function replaceNode(newElementID, targetElementID) 
{ 
    var targetElement=document.getElementById(targetElementID); 
    var newElement=document.getElementById(newElementID); 
    targetElement.replaceChild(newElement, targetElement.firstChild); 
} 
</script> 

Và khi bạn muốn di chuyển nội dung đến vị trí mới, hãy gọi:

<script language="JavaScript"> 
replaceNode('rendercontent','newlocation1'); 
</script>