C# html代码的动态加载

在我的Asp.net网站中，我有一个从代码隐藏动态加载的转发器。在转发器外的代码中，我有一个“添加”按钮。单击后，我想从repeater异步添加相同的控件。单击“添加”按钮，调用函数

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++;
}

函数NewRow（）{
var guid=jQuery.guid++；
变量面板=$（“#主内容面板1”）；
var textboxText=$（'MainContent_TextBox'）；
面板后（“测试文本：
“+textboxText.val（）+”

测试文本：


");
i++；
}

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

---

还有什么方法可以像repeater一样将我新添加的行更精确地置于动态控制中

您可以动态创建标签，如下所示：

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

---

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

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

在HTML中，包含一个脚本标记，类型为=“text/HTML”。这将告诉渲染引擎不要尝试渲染内容。在此标记内，您将为每列编写模板代码。

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

• $i
• $textboxText
• $guid

使用这种方法，可以将html与js代码分离。如果你必须保持这一点，它将在将来帮助你

---

希望能有所帮助。

这会奏效，但没有办法动态加载用户控件，然后将其添加到repeater？

​<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>​​​​​​​

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++;
​}​