0

Boas pessoal,

Tenho o seguinte código html que se repete várias vezes ao longo do website:

<div class="tab-content">
<div class="tab-pane active" id="basik">

    <ul class="det-polipeles">
        <li><a class="fancybox" title="BK-001" href="imgpeles/KP-01.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-01_t.jpg" width="55" height="55" id="KP-01"><br>
            BK-001</a>
        </li>
        <li><a class="fancybox" title="BK-002" href="imgpeles/KP-02.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-02_t.jpg" width="55" height="55" id="KP-02"><br>
            BK-002</a></li>
        <li><a class="fancybox" title="BK-003" href="imgpeles/KP-03.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-03_t.jpg" width="55" height="55" id="KP-03"><br>
            BK-003</a></li>
        <li><a class="fancybox" title="BK-005" href="imgpeles/KP-05.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-05_t.jpg" width="55" height="55" id="KP-05"><br>
            BK-005</a></li>
        <li><a class="fancybox" title="BK-006" href="imgpeles/KP-06.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-06_t.jpg" width="55" height="55" id="KP-06"><br>
            BK-006</a></li>
        <li><a class="fancybox" title="BK-007" href="imgpeles/KP-07.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-07_t.jpg" width="55" height="55" id="KP-07"><br>
            BK-007</a></li>
        <li><a class="fancybox" title="BK-008" href="imgpeles/KP-08A.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-08A_t.jpg" width="55" height="55" id="KP-08A"><br>
            BK-008</a></li>
        <li><a class="fancybox" title="BK-009" href="imgpeles/KP-09.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-09_t.jpg" width="55" height="55" id="KP-09"><br>
            BK-009</a></li>
        <li><a class="fancybox" title="BK-010" href="imgpeles/KP-10.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-10_t.jpg" width="55" height="55" id="KP-10"><br>
            BK-010</a></li>

        <li><a class="fancybox" title="BK-014" href="imgpeles/KP-14.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-14_t.jpg" width="55" height="55" id="KP-14"><br>
            BK-014</a></li>

        <li><a class="fancybox" title="BK-016" href="imgpeles/KP-16.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-16_t.jpg" width="55" height="55" id="KP-16"><br>
            BK-016</a></li>
        <li><a class="fancybox" title="BK-023" href="imgpeles/KP-23.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-23_t.jpg" width="55" height="55" id="KP-23"><br>
            BK-023</a></li>
        <li><a class="fancybox" title="BK-024" href="imgpeles/KP-24.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-24_t.jpg" width="55" height="55" id="KP-24"><br>
            BK-024</a></li>
        <li><a class="fancybox" title="BK-029" href="imgpeles/KP-29.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-29_t.jpg" width="55" height="55" id="KP-29"><br>
            BK-029</a></li>
        <li><a class="fancybox" title="BK-033" href="imgpeles/KP-33.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-33_t.jpg" width="55" height="55" id="KP-33"><br>
            BK-033</a></li>
        <li><a class="fancybox" title="BK-036" href="imgpeles/KP-36.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-36_t.jpg" width="55" height="55" id="KP-36"><br>
            BK-036</a></li>
        <li><a class="fancybox" title="BK-043" href="imgpeles/KP-43.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-43_t.jpg" width="55" height="55" id="KP-43"><br>
            BK-043</a></li>
        <li><a class="fancybox" title="BK-060" href="imgpeles/KP-60.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-60_t.jpg" width="55" height="55" id="KP-60"><br>
            BK-060</a></li>
        <li><a class="fancybox" title="BK-061" href="imgpeles/KP-61.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-61_t.jpg" width="55" height="55" id="KP-61"><br>
            BK-061</a></li>
        <li><a class="fancybox" title="BK-062" href="imgpeles/KP-62.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-62_t.jpg" width="55" height="55" id="KP-62"><br>
            BK-062</a></li>
        <li><a class="fancybox" title="BK-073" href="imgpeles/KP-73.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-73_t.jpg" width="55" height="55" id="KP-73"><br>
            BK-073</a></li>
        <li><a class="fancybox" title="BK-075" href="imgpeles/KP-75.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-75_t.jpg" width="55" height="55" id="KP-75"><br>
            BK-075</a></li>
        <li><a class="fancybox" title="BK-076" href="imgpeles/KP-76.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-76_t.jpg" width="55" height="55" id="KP-76"><br>
            BK-076</a></li>
        <li><a class="fancybox" title="BK-077" href="imgpeles/KP-77.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-77_t.jpg" width="55" height="55" id="KP-77"><br>
            BK-077</a></li>
        <li><a class="fancybox" title="BK-080" href="imgpeles/KP-80.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-80_t.jpg" width="55" height="55" id="KP-80"><br>
            BK-080</a></li>
        <!--     <li><a class="fancybox"  title="BK-101" href="imgpeles/KP-101.jpg" rel="fancybox">
                                <img alt="" src="imgpeles/KP-101_t.jpg" width="55" height="55" id="KP-101"><br>
                                BK-101</a></li>-->
        <li><a class="fancybox" title="BK-102" href="imgpeles/KP-102.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-102_t.jpg" width="55" height="55" id="KP-102"><br>
            BK-102</a></li>
        <li><a class="fancybox" title="BK-104" href="imgpeles/KP-104.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-104_t.jpg" width="55" height="55" id="KP-104"><br>
            BK-104</a></li>
        <!-- <li><a class="fancybox"  title="BK-103" href="imgpeles/KP-103.jpg" rel="fancybox">
                                <img alt="" src="imgpeles/KP-103_t.jpg" width="55" height="55" id="KP-103"><br>
                                BK-103</a></li>-->
        <li><a class="fancybox" title="BK-112" href="imgpeles/KP-112.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-112_t.jpg" width="55" height="55" id="KP-112"><br>
            BK-112</a></li>
        <li><a class="fancybox" title="BK-113" href="imgpeles/KP-113.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-113_t.jpg" width="55" height="55" id="KP-113"><br>
            BK-113</a></li>
        <li><a class="fancybox" title="BK-114" href="imgpeles/KP-114.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-114_t.jpg" width="55" height="55" id="KP-114"><br>
            BK-114</a></li>
        <li><a class="fancybox" title="BK-115" href="imgpeles/KP-115.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-115_t.jpg" width="55" height="55" id="KP-115"><br>
            BK-115</a></li>
        <li><a class="fancybox" title="BK-116" href="imgpeles/KP-116.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-116_t.jpg" width="55" height="55" id="KP-116"><br>
            BK-116</a></li>
        <li><a class="fancybox" title="BK-117" href="imgpeles/KP-117.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-117_t.jpg" width="55" height="55" id="KP-117"><br>
            BK-117</a></li>
        <li><a class="fancybox" title="BK-118" href="imgpeles/KP-118.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-118_t.jpg" width="55" height="55" id="KP-118"><br>
            BK-118</a></li>
        <li><a class="fancybox" title="BK-119" href="imgpeles/KP-119.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-119_t.jpg" width="55" height="55" id="KP-119"><br>
            BK-119</a></li>
        <li><a class="fancybox" title="BK-120" href="imgpeles/KP-120.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-120_t.jpg" width="55" height="55" id="KP-120"><br>
            BK-120</a></li>
        <li><a class="fancybox" title="BK-121" href="imgpeles/KP-121.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-121_t.jpg" width="55" height="55" id="KP-121"><br>
            BK-121</a></li>
        <li><a class="fancybox" title="BK-138" href="imgpeles/KP-138.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-138_t.jpg" width="55" height="55" id="KP-138"><br>
            BK-138</a></li>
        <!--<li><a class="fancybox"  title="BK-139" href="imgpeles/KP-139.jpg" rel="fancybox">
                                    <img alt="" src="imgpeles/KP-139_t.jpg" width="55" height="55" id="KP-139"><br>
                                    BK-139</a></li>-->
        <li><a class="fancybox" title="BK-140" href="imgpeles/KP-140.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-140_t.jpg" width="55" height="55" id="KP-140"><br>
            BK-140</a></li>
        <!--  <li><a class="fancybox"  title="BK-141" href="imgpeles/KP-141.jpg" rel="fancybox">
                                    <img alt="" src="imgpeles/KP-141_t.jpg" width="55" height="55" id="KP-141"><br>
                                    BK-141</a></li> -->
        <li><a class="fancybox" title="BK-142" href="imgpeles/KP-142.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-142_t.jpg" width="55" height="55" id="KP-142"><br>
            BK-142</a></li>
        <li><a class="fancybox" title="BK-158" href="imgpeles/KP-158.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-158_t.jpg" width="55" height="55" id="KP-158"><br>
            BK-158</a></li>
        <li><a class="fancybox" title="BK-159" href="imgpeles/KP-159.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-159_t.jpg" width="55" height="55" id="KP-159"><br>
            BK-159</a></li>
        <li><a class="fancybox" title="BK-160" href="imgpeles/KP-160.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-160_t.jpg" width="55" height="55" id="KP-160"><br>
            BK-160</a></li>
        <li><a class="fancybox" title="BK-161" href="imgpeles/KP-161.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-161_t.jpg" width="55" height="55" id="KP-161"><br>
            BK-161</a></li>
        <li><a class="fancybox" title="BK-162" href="imgpeles/KP-162.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-162_t.jpg" width="55" height="55" id="KP-162"><br>
            BK-162</a></li>
        <li><a class="fancybox" title="BK-163" href="imgpeles/KP-163.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-163_t.jpg" width="55" height="55" id="KP-163"><br>
            BK-163</a></li>
        <li><a class="fancybox" title="BK-164" href="imgpeles/KP-164.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-164_t.jpg" width="55" height="55" id="KP-164"><br>
            BK-164</a></li>
        <li><a class="fancybox" title="BK-165" href="imgpeles/KP-165.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-165_t.jpg" width="55" height="55" id="KP-165"><br>
            BK-165</a></li>
        <li><a class="fancybox" title="BK-174" href="imgpeles/KP-174.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-174_t.jpg" width="55" height="55" id="KP-174"><br>
            BK-174</a></li>
        <li><a class="fancybox" title="BK-176" href="imgpeles/KP-176.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-176_t.jpg" width="55" height="55" id="KP-176"><br>
            BK-176</a></li>
        <li><a class="fancybox" title="BK-177" href="imgpeles/KP-177.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-177_t.jpg" width="55" height="55" id="KP-177"><br>
            BK-177</a></li>
        <li><a class="fancybox" title="BK-178" href="imgpeles/KP-178.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-178_t.jpg" width="55" height="55" id="KP-178"><br>
            BK-178</a></li>
        <li><a class="fancybox" title="BK-179" href="imgpeles/KP-179.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-179_t.jpg" width="55" height="55" id="KP-179"><br>
            BK-179</a></li>
        <li><a class="fancybox" title="BK-180" href="imgpeles/KP-180.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-180_t.jpg" width="55" height="55" id="KP-180"><br>
            BK-180</a></li>
        <li><a class="fancybox" title="BK-181" href="imgpeles/KP-181.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-181_t.jpg" width="55" height="55" id="KP-181"><br>
            BK-181</a>
        </li>
        <li><a class="fancybox" title="BK-182" href="imgpeles/KP-182.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-182_t.jpg" width="55" height="55" id="KP-182"><br>
            BK-182</a>
        </li>
        <li><a class="fancybox" title="BK-183" href="imgpeles/KP-183.jpg" rel="fancybox">
            <img alt="" src="imgpeles/KP-183_t.jpg" width="55" height="55" id="KP-183"><br>
            BK-183</a>
        </li>
    </ul>
</div>

Gostava de agrupar este código num web user control (wuc) (o que até aqui não representa nenhuma dificuldade), contudo, por vezes, tenho que repetir o código na mesma página e com isto sou obrigado a pôr um prefixo nos ids para os difereciar.

Existe alguma solução direta para criar um wuc dinâmico ou terei que criar wucs diferentes?

12
  • Como você pretende popular essa lista? Commented 29/08/2018 às 20:42
  • E qual é a importância do Id? Commented 29/08/2018 às 20:52
  • @LeandroAngelo o id é importante porque existem bastante dependências do mesmo. Aqui a questão prende-se no facto de eu ter o mesmo código diferentes vezes na página e com isto, automaticamente, o id terá que ser alterado. Acho que estar a criar diferentes wuc vai dar ao mesmo problema de ter várias vezes o código. Commented 30/08/2018 às 8:19
  • Você não deve repetir id no DOM,como você diz que essa informação é relevante, recomendaria você utilizar outro atributo para mesma como data-id por exemplo Commented 31/08/2018 às 12:56
  • Eu não repito o id, se estivesse a repetir não precisava de alterar o código Commented 31/08/2018 às 12:58

1 Resposta 1

0

Consegui resolver o problema:

Do lado do backend do wuc criei um conjunto de propriedades (com o tipo desejado), como demonstra o seguinte código:

public partial class cores_polipeles : System.Web.UI.UserControl
{

    public string polipelesName { get; set; }
    public string classPref { get; set; }
    public string idPref {get; set;}
    public string idPref2 { get; set; }
    public string replic { get; set;}



    protected void Page_Load(object sender, EventArgs e)
    {

Posteriormente, do lado do front-end do wuc, passei os dados como Markup:

<uc1:corespolipeles runat="server" ID="corespolipeles3" polipelesName="basik" classPref="-rep-bkcostas" idPref="r" idPref2="C" replic="ccostas"/>

Ainda do lado do backend, transformei os dados relativos ao Control que eu quero alterar e que contem o html, para um Literal Control e assim os seus dados passam para texto:

Control MyList = FindControl("basikpoli");

foreach (LiteralControl MyControl in MyList.Controls) { MyControl.Text = MyControl.Text.Replace("id=\"KP", "id=\"" + idPref + "KP"); }

Depois, como o código indica é so fazer replace do id (ou do que for necessário), pelo valor desejado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .