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 中，包含一个 script 标签，type="text/html"。这将告诉渲染引擎不要尝试渲染内容。在此标记内，您将为每一列编写模板代码。

我将每个变量部分标记为 $variable：

• $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 中，您只需要获取 script 标签的 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