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?

c# html asp.net

  • 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 c# html asp.net

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