Tips for generating a new div for every iteration:

I am currently using asp.net with c# along with a Master Page. I have been attempting to create a new div for each loop in the while statement in order to customize the design as I desire. Is there a way to achieve this or is there an alternative method that can be implemented solely from my aspx.cs file?

aspx.cs :

protected void Page_Load(object sender, EventArgs e)
 {
                while (Reader.Read())
                {
                    Response.Write("<div id=test  >");

                    Response.Write(Reader.GetString(3)+" ");
                    Response.Write(Reader.GetString(10) + "<br />");
                    Response.Write("<a href='Info.aspx?param=" + Reader.GetString(0) + "' target='_blank'>" + "More..." + "</a>");

                    Response.Write( "<br />");
                    Response.Write("");
                    Response.Write("</div>");

                    //TextBox1.Text = Reader.GetString(3);
                    //TextBox2.Text = Reader.GetString(10);

                }
}

aspx :

<%@ Page Title="" Language="C#" MasterPageFile="~/MainDesigne.Master" AutoEventWireup="true" CodeBehind="MobilePageRouteDoc.aspx.cs" Inherits="WebApplication2.MobilePageRoteDoc" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">



    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>

    <link href="Assets/Css/mobile.css" rel="stylesheet" />

    <telerik:RadDropDownList ID="RadDropDownList1" runat="server" OnSelectedIndexChanged="RadDropDownList1_SelectedIndexChanged">
    </telerik:RadDropDownList>

    <div id="test">



    </div>

    </asp:Content>

Answer №1

To enable server-side functionality for your <div id="test">, you can use the attribute runat="server" in the following way:

<div runat="server" id="test">

After applying the above, you will be able to manipulate it in your code-behind as shown below:

test.InnerHtml = "your html here";

The process involves generating multiple div elements within a loop and appending them to the 'test' div. It is recommended to ensure that each generated element has a unique ID enclosed in double quotes like id="test1", id="test2". Here is the refined version of the provided code snippet:

protected void Page_Load(object sender, EventArgs e)
 {
     string html = "";
     int i = 0;
     while (Reader.Read())
     {    
         html+= "<div id=\"test" + i +  "\">";    
         html+= Reader.GetString(3) + " ";
         html+= Reader.GetString(10) + "<br />";
         html+= "<a href='Info.aspx?param=" + Reader.GetString(0) + "' target='_blank'>" + "More..." + "</a>";    
         html+=  "<br />";
         html+= "</div>";
         i++;
     }
     test.InnerHtml = html;
}

Answer №2

To insert a <div> element, you can use the HtmlGenericControl class in C# to dynamically generate HTML code.

HtmlGenericControl div = new HtmlGenericControl();
div.ID = "AnyDivID";
div.TagName = "div";
div.Attributes["class"] = "YourClassName";
div.InnerText = string.Format("Inner text= {0} ;", "YourInnerText");
form1.Controls.Add(div);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Text that appears automatically in an input field

I've searched high and low, but I just can't seem to find a solution that works for me. What I need is a way to automatically populate a HTML text field with default text when the page loads. This default text should ideally be a PHP variable and ...

Establishing default values for properties in a Web User Control

I'm working on creating a web user control and initializing default values for its properties in the code-behind as shown below: [DefaultValue(typeof(int), "50")] public int Height { get; set; } [DefaultValue(typeof(string), "string.Empty")] public ...

Is it possible to use D3 for DOM manipulation instead of jQuery?

After experimenting with d3 recently, I noticed some similarities with jquery. Is it feasible to substitute d3 for jquery in terms of general dom management? This isn't a comparison question per se, but I'd appreciate insights on when it might b ...

The many potentials of looping through Sass maps

My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...

Creating the appearance of a white sheet of paper on a computer screen

I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...

Unable to display AdaptiveCard Json as a BotFramework Message using C# code

I am attempting to incorporate an Adaptive Card json into a message that will be sent to the Bot Framework Channel Emulator. However, I am encountering an issue where the emulator displays the message "Can't render card". The Adaptive Card sample I a ...

Struggling with extracting and transferring data from a span tag to another field within the same form using selenium and python

I am struggling with an issue while running a code using selenium in Python. I am trying to extract values from span tags and store them in variables named "cap1, cap2, and cap3." After saving these values, I need to input them into another field on a web ...

HTML5 on its own versus the dynamic duo of jQuery Mobile and AngularJS

We are in the process of creating a versatile mobile app that will work on multiple platforms using HTML5, JavaScript, and CSS. Our design approach includes utilizing Bootstrap for a responsive user interface, and Cordova to package the application for bot ...

How to Filter, Sort, and Display Distinct Records in an HTML Table with jQuery, JavaScript, and

In the HTML page, there will be a total of 6 tabs labeled A, B, C, D, E, and F along with 2 dropdowns. The expected behavior is as follows: The user will choose a value from the 2 dropdown menus. Based on the selected value, filtering should be applied to ...

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

Pressing the button results in no action

I am currently developing a program that randomly selects 5 words from a database and inserts them into an array. Although the page loads correctly initially, nothing happens when the button is clicked. None of the alerts are triggered, suggesting that the ...

Interactive ASP.NET MVC4 Dialog Box for Input Text

Currently, I am in the process of developing a complex web application with multiple sections that require users to input comments. I am searching for an efficient method to create a partial view that can display a modal dialog for adding comments and then ...

One common issue is being unable to target input[type=file] when multiple forms are present on a page using JavaScript

Question: I have multiple dynamic forms on a web page, each with a file input field. How can I specifically target the correct file input using $(this) in JavaScript? Here is an example of one of my forms: <form enctype="multipart/form-data" action="c ...

Is it possible for me to load a window following a click

I developed a customized Modal Box that functions similar to the browser's "alert()". When using the traditional alert(), it halts the rendering and executions of the underlying webpage. I am seeking methods to achieve this same behavior: preventing ...

Utilizing IHostingEnvironment in a Web API 2 endpoint

In attempting to inject an instance of IHostingEnvironment into my Web API 2 controller, I wrote the following code: public class ClaimsController : BaseApiController { private IConfigurationRoot config; public ClaimsController(IHostingEnvironmen ...

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

Emphasize the most recent file during the document upload process and ensure the scroll bar moves accordingly to the document

I am currently working on a feature where the scroll bar should move to the newly uploaded document in a list of documents. When I upload a new document, I want the scroll bar to automatically move to that document. Currently, the highlighting changes to t ...

Putting Text Inside a Video Player in HTML

Is there a way to insert text, like a Logo, into my video player? https://i.sstatic.net/CZ6Rp.png I would appreciate any help on how to achieve this. Thank you. <video width="320" height="240" controls src="video/flashtrailer.mp4"> Your browser ...

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...