html代碼的動態加載

Question

在我的Asp.net網站中，我有一個從代碼隱藏動態加載的中繼器。在中繼器外的代碼中，我有一個「添加」按鈕。單擊時，我想要異步添加來自中繼器的相同控件。 「添加」按鈕功能NewRow()的點擊被稱爲：

function NewRow(){ 
    var guid = jQuery.guid++; 
    var panel = $('#MainContent_Panel1'); 
    var textboxText = $('#MainContent_TextBox'); 

    panel.after("<span LabelGroup="+i+">Test Text:</span> 
       <span TextGroup="+i+">"+textboxText.val()+"<br /></span> 
       <span LabelGroup="+i+">Test Text : </span> 
       <input type='text' customID="+guid+"/> 
       <input type='button' Class='Button' ButtonGroup='"+i+"' value='Button Text' /></br> 
    "); 

    i++; 
} 

我討厭我現在做的事情，因爲有這麼多的硬編碼代碼。有什麼辦法可以讓它更具活力嗎？

是否有任何方法可以將我新添加的行更精確地放置在像中繼器這樣的動態控制中？

Answer 1

你可以試着像一個模板引擎mustache.js，或者你可以這樣手工完成：

在您的HTML中，包含一個腳本標記，其中鍵入=「text/html」。這將告訴渲染引擎不要渲染內容。在這個標籤裏，你將爲每一列編寫模板代碼。

標誌着我每個可變截面爲$變量：

• $ I
• $ textboxText
• $ GUID

​<script type="text/html"​​​​​​​​​​​​​​​​ id="template"> 

    <span LabelGroup='$i'>Test Text:</span> 
    <span TextGroup='$i'>$textboxText<br /></span> 
    <span LabelGroup='$i'>Test Text : </span> 
    <input type='text' customID='$guid'/> 
    <input type='button' Class='Button' ButtonGroup='$i' value='Button Text' /></br> 

</script> 

<!-- And here, some testing elements --> 

​<input type="button" id="New" value="New Row"> 
<input type="text" id="MainContent_TextBox" value="Some Value"> 

<div id="MainContent_Panel1"></div>​​​​​​​ 

，然後在你的javascript，你o很少需要獲取腳本標記的html內容，然後將每個$ variable替換爲要使用的值。 請注意，在調用.replace時應使用/ g，以替換模板中$ variable的所有貨幣。

i = 1; 

$("#New").click(NewRow); 

function NewRow(){ 
    var guid = jQuery.guid++; 
    var panel = $('#MainContent_Panel1'); 
    var textboxText = $('#MainContent_TextBox').val(); 

    var html = $("#template").html() 
     .replace(/\$i/g,i) 
     .replace(/\$guid/g,guid) 
     .replace(/\$textboxText/g,textboxText); 

    panel.append(html); 

    i++; 
​}​ 

使用這種方法，您將HTML與js代碼分開。如果你必須保持這一點，將有助於你的未來。

希望它有幫助。

Answer 2

你可以在飛行中這樣創建標籤：

var $span1 = $("<span />").text("your text").attr("TextGroup", i); 
... 
var $text = $('<input type="text" />').attr("customID", guid); 
... 
var $button = $('<input type="button" />').addClass("Button").val("Button text").attr("ButtonGroup", i); 

然後只需將它們添加到控件容器

$panel.append($span1).append(...); 

Try it live on Fiddler