ASP.NET - Using a web user control dynamically

Asked

Viewed 101 times

0

Good staff,

I have the following code html that repeats over and over again throughout the 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>

I’d like to group this code into one web user control (wuc) (which so far does not represent any difficulty), however, sometimes I have to repeat the code on the same page and with this I am obliged to put a prefix in ids to differentiate them.

Is there any direct solution to create a wuc dynamic or I will have to create wucs different?

  • How do you intend to popular this list?

  • And what is the importance of Id?

  • @Leandroangelo the id It is important because there are many dependencies of it. Here the issue is that I have the same code different times on the page and with this automatically the id has to be changed. I think I’m creating different wuc will give the same problem of having several times the code.

  • You should not repeat id in the DOM, data-id for example

  • I don’t repeat the id, if I was repeating I didn’t need to change the code

  • But you said that this block can appear several times within the same page...

  • Yes but with different ids and that’s why it needed to generate a dynamic wuc to change the ids

  • I return to my first question... "How do you intend to popular this list"?

  • I already explained in the answer below

  • I don’t know if it was the best approach, but all the feedback is good

  • Okay, if the solution you used was the answer, you can mark it, so the question is not open.

  • I have to wait four hours from the moment I put it on

Show 7 more comments

1 answer

0


I managed to solve the problem:

On the side of backend of wuc I created a set of properties (with tipo desired), as demonstrated by the following code:

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

Later, on the side of the front-end of wuc, I passed the data as Markup:

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

Still on the backend side, I transformed the data relating to Control that I want to change and that contains the html, for a Literal Control and so your data goes to text:

Control MyList = FindControl("basikpoli");

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

Then, as the code indicates, just replace the id (or whatever is necessary) for the desired value.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.