2

在我的 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++;
}

我讨厌我目前正在做的事情，因为有太多硬编码的代码。有什么办法可以让它更有活力吗？

有什么方法可以更精确地将我新添加的行放置在中继器等动态控制中？

4

2 回答 2

1

您可以尝试使用 mustache.js 之类的模板引擎，也可以像这样手动完成：

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

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

  • $i
  • $文本框文本
  • $指导
​&lt;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 -->

​&lt;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 代码分开。如果您必须保持这一点，那么将来会对您有所帮助。

希望能帮助到你。

于 2012-09-23T00:36:53.273 回答
0

您可以像这样即时创建标签：

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(...);

在 Fiddler 上试用

于 2012-09-22T23:10:37.080 回答