Event onclik button in dynamic html Stringbuilder table

Question

Good afternoon people of the forum, I’m trying to add a button in a dynamic html table to redirect to another page by passing parameter through the url. But I’m not getting it via javascript. I’m using Webforms Asp.net C#. I set up the following function to write the table html via Stringbuilder on the aspx page:

    public void LoadTable()
    {
        StringBuilder html = new StringBuilder();
        html.Append("<table class = 'table table-hover'>");
        html.Append("<tr><th>Processo</th><th>Parte Contraria</th>"+
            "<th class='text-center'>Pesquisa/bens</th>"+
            "<th class='text-center'>Status</th><th class='text-center'></th></tr>");

        foreach (var item in ProcessoCRUD.GetProcessoRank())
        {                
            html.AppendFormat("<tr style='cursor: pointer;'><td>{0}</td>", item.ProcessoID);
            html.AppendFormat("<td>{0}</td>", item.ParteContraria);

            if(item.PesquisaBens == false)
                html.AppendFormat("<td class='text-center'><i class = 'fa fa-thumbs-o-down' data-toggle='tooltip' title='Não pesquisou!'></i></td>", item.PesquisaBens);
            else
                html.AppendFormat("<td class='text-center'><i class = 'fa fa-thumbs-o-up' data-toggle='tooltip' title='Pesquisou!'></i></td>", item.PesquisaBens);

            if (item.Ativo == true)
                html.AppendFormat("<td class='text-center'><span class = 'label label-success'>Ativo</span></td>", item.Ativo);

            if(item.Arquivado == true)
                html.AppendFormat("<td class='text-center'><span class = 'label label-primary'>Arquivado</span></td>", item.Arquivado);

            if(item.Irrecuperavel == true)
            html.AppendFormat("<td class='text-center'><span class = 'label label-danger'>Irrecuperavel</span></td>", item.Irrecuperavel);

            html.AppendFormat("<td><button id='btnVisualizar' runat='server' class='btn btn-default' data-toggle='tooltip' "+
                "title='Visualizar' href='javascript: void(0)' onclick='window.open('Processo.aspx?NumeroProcesso={0}')>"+
                "<i class='fa fa-search'></i></button></td></tr>", item.NumeroProcesso);
        }
        html.Append("</table>");

        //Append the HTML string to Placeholder.
        PlaceHolder1.Controls.Add(new Literal { Text = html.ToString() });
    } 

I can’t redirect to Processo.aspx page? Numeroprocesso={0}.

Could someone explain a way to write a button via Stringbuilder to redirect to another page.

Answer 1

I wrote the example of how to write in C#, for learning.

Starting the string with@, it is possible to break a line and add quotes with ""

    html.AppendFormat(
@"<td>
<button id='btnVisualizar' runat='server' class='btn btn-default' data-toggle='tooltip' title='Visualizar' href='javascript: void(0)' onclick=""window.open('Processo.aspx?NumeroProcesso={0}')"">
<i class='fa fa-search'></i>
</button>
</td>", item.NumeroProcesso);

Answer 2

Thanks guys for your help! I solved otherwise without using javascript, in html itself so:

            html.AppendFormat(
                "<td>" +
                "<a href = \"Processo.aspx?NumeroProcesso={0}\"" +
                "class=\"btn btn-default\" data-toggle=\"tooltip\"" +
                "title=\"Visualizar\"><img src=\"#\"" +
                "class='fa fa-search'></a></td>" +
                "</tr>", item.NumeroProcesso); 

Full function:

    public void LoadTable()
    {
        StringBuilder html = new StringBuilder();

        html.Append("<table class = 'table table-hover'>");

        html.Append(
            "<tr><th>Processo</th><th>Parte Contraria</th>"+
            "<th class='text-center'>Pesquisa/bens</th>" +
            "<th class='text-center'>Status</th>" +
            "<th class='text-center'></th></tr>");

        foreach (var item in ProcessoCRUD.GetProcessoRank())
        {                
            html.AppendFormat("<tr style='cursor: pointer;'>" +
                "<td>{0}</td>", item.ProcessoID);

            html.AppendFormat("<td>{0}</td>", item.ParteContraria);

            if(item.PesquisaBens == false)
                html.AppendFormat(
                    "<td class='text-center'>" +
                    "<i class = 'fa fa-thumbs-o-down' " +
                    "data-toggle='tooltip' title='Não pesquisou!'>" +
                    "</i></td>");
            else
                html.AppendFormat(
                    "<td class='text-center'>" +
                    "<i class = 'fa fa-thumbs-o-up' " +
                    "data-toggle='tooltip' title='Pesquisou!'>" +
                    "</i></td>");

            if (item.Ativo == true)
                html.AppendFormat(
                    "<td class='text-center'>" +
                    "<span class = 'label label-success'>" +
                    "Ativo</span></td>");

            if(item.Arquivado == true)
                html.AppendFormat(
                    "<td class='text-center'>" +
                    "<span class = 'label label-primary'>" +
                    "Arquivado</span></td>");

            if(item.Irrecuperavel == true)
            html.AppendFormat(
                "<td class='text-center'>" +
                "<span class = 'label label-danger'>" +
                "Irrecuperavel</span></td>");

            html.AppendFormat(
                "<td>" +
                "<a href = \"Processo.aspx?NumeroProcesso={0}\"" +
                "class=\"btn btn-default\" data-toggle=\"tooltip\"" +
                "title=\"Visualizar\"><img src=\"#\"" +
                "class='fa fa-search'></a></td>" +
                "</tr>", item.NumeroProcesso);

        }
        html.Append("</table>");

        //Append the HTML string to Placeholder.
        PlaceHolder1.Controls.Add(new Literal { Text = html.ToString() });
    }

Answer 3

You need to concatenate the string so that it returns one HTML valid.

At that point the HTML no longer valid:

<td>
  <button id='btnVisualizar' 
      runat='server' 
      class='btn btn-default'     
      data-toggle='tooltip' 
      title='Visualizar' 
      href='javascript: void(0)'
      onclick='window.open('Processo.aspx?NumeroProcesso={0}')>
    <i class='fa fa-search'></i>
  </button>
</td>
</tr>

You need the HTML come out in this format:

<td>
  <button 
      id="btnVisualizar"
      runat="server" 
      class="btn btn-default"     
      data-toggle="tooltip"
      title="Visualizar" 
      href="javascript: void(0)"
      onclick="window.open('Processo.aspx?NumeroProcesso={0}');">
      <i class="fa fa-search"></i>
  </button>
</td>
</tr>

Try to concatenate as follows:

    html.AppendFormat(
    "<td>
        <button 
           id=""btnVisualizar"" 
           runat=""server"" 
           class=""btn btn-default"" 
           data-toggle=""tooltip"" 
           "+"
           title=""Visualizar"" 
           href=""javascript: void(0)""
           onclick=""window.open('Processo.aspx?NumeroProcesso={0}');"">
           "+"
           <i class=""fa fa-search""></i>
        </button>
   </td></tr>", item.NumeroProcesso);

Note: The identation of the examples are thus only to facilitate our visualization of the code.