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”。这将告诉渲染引擎不要尝试渲染内容。在此标记内，您将为每列编写模板代码。

我将每个变量部分标记为$ 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中，您只需要获取脚本标记的html内容，然后将每个$变量替换为要使用的值。请注意，在调用.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

动态加载html代码

2 个答案: