Question

In my Asp.net website I have a repeater which loads dynamically from code-behind. In code outside the repeater I have an “add” button. On click, I want to add the same controls from repeater asynchronously. On click of the “add” button function NewRow() is called:

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

I hate what I am currently doing, because there is so much hardcoded code. Is there any way I can make it more dynamic?

And is there any way to place my newly added row more precisely in dynamic control like repeater?

Answer 1

You could try a templating engine like mustache.js, or you can do it by hand like this:

In your HTML, include a script tag, with type=”text/html”. This will tell the rendering engine to do not try to render the contents. Inside this tag, you will write the template code for each column.

I marked each variable section as $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>​​​​​​​

And then, in your javascript, you only need to get the html contents of the script tag, then replace each $variable with the value to use.
Please note that you should use /g when calling .replace, to replace all ocurrencies of your $variable in the template.

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

Using this approach, you are separating html from js code. Something that will help you in the future if you have to maintain this.

Hope it helps.