What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

I'm faced with a challenge of displaying employees' names and titles from a MSSQL Server database table on an ASP .NET webform as individual "card" objects. Currently, I am able to showcase a static number of records by using an asp button object and applying a css class for the card look. However, my concern lies in how to make this dynamic so that whenever a new employee is added or removed from the database table, a new card is automatically generated.

Below is a screenshot illustrating how employee ids are currently displayed on their respective cards: https://i.sstatic.net/tO5M2jpg

Answer №1

Display a single card design using markup.

Next, enclose the markup within a repeater to repeat the display.

Here is an example of the markup:

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>                   
        <div style="border-style:solid;color:black;width:320px;height:450px;float:left;margin-right:10px;margin-bottom:10px">
            <div style="text-align:center;padding:2px 10px 2px 10px">
                <h3><%# Eval("Fighter") %></h3>
                <asp:Image ID="Image2" runat="server" 
                    ImageUrl = '<%# Eval("ImagePath") %>' Width="170" />
                <h4>Engine</h4>
                <asp:Label ID="EngineLabel2" runat="server" Text='<%# Eval("Engine") %>' />
                <h4>Description</h4>
                <asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Description") %>' />
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

Each row populates controls with "eval" expressions as instructed above.

Here's the code to load the data:

protected void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable rstData;
        rstData = MyRst("select * from Fighters");

        Repeater1.DataSource = rstData;
        Repeater1.DataBind();
    }
}


public DataTable MyRst(string strSQL)
{
    DataTable rstData = new DataTable();
    using (SqlConnection conn = new SqlConnection(Properties.Deafult.Settings.TEST4))
    {
        using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
        {
            conn.Open();
            rstData.Load(cmdSQL.ExecuteReader);
            rstData.TableName = strSQL;
        }
    }
    return rstData;
}

The output will look like this:

https://i.sstatic.net/LTTy8.png

If viewed on a larger screen, it will appear like this:

https://i.sstatic.net/kV8p7.png

As each div is floated left, they stack horizontally until there is no more room.

When space runs out, cards move to the next line automatically.

You can also use datalists for specifying column numbers, but a simple repeater works well too.

If you have repeating markup, a repeater like the one shown above is ideal. Similar elements like ListView, datalist, GridView operate by creating instances for every record fed to them through a datasource.

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

Utilizing AJAX to dynamically create graphs using Highcharts

I'm having trouble integrating AJAX with highcharts in my project. Here is a snippet of my HTML and javascript code: function test () { var options = { chart : { renderTo : 'container', type : 'spline', ...

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

Vue.js known as javascript hooks

I've been working on connecting Vue.js with velocity.js. Following a guide, I found an example that doesn't use a named transition. Currently, my transition code looks like this: <transition name="collapse"> https://v2.vuejs.org/ ...

What is the best way to use an Infinite scroll plugin to automatically fetch additional data from a database as the user scrolls down

In my Laravel Blade View, I am showcasing around 280 products from the database using the code snippet below. @if (get_setting('best_selling') == 1) <section class="mb-4"> <div class="container"> ...

NodeJS threw an error: The call stack size has exceeded the maximum limit

My tool of choice is socket.io Error Encountered: We are facing a RangeError while calling `socket.disconnect()`; Please help resolve this issue. Thank you! ...

Error: The property value supplied for the calc() function is invalid

<App> includes both <Header> and <Content> components. I am attempting to calculate the height of <Content>, which is equal to the height of <App> minus the height of the header. // App.js import { useStyles } from "./Ap ...

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Dealing with a React Native and TypeScript app here. I keep encountering an error from Fabric every week: "JSON.stringify cannot serialize cyclic structures." The frustrating part is that the error seems to pop up randomly, without any specific scenario tr ...

Require a more efficient strategy for iterating through lines of input

One of the challenges I'm facing with my form is that it contains 5 input lines. I need to keep any blank lines that are sandwiched between two filled lines, while removing all others. For instance, if the first line is blank, the second line contains ...

Troubleshooting a Laravel 5.2 modal popup issue for password recovery, experiencing a 500 internal server error with the Ajax function execution

Is there a way to check if an email exists in order to send a reset password link using an AJAX function? I keep encountering a 500 internal server error before the AJAX runs. I understand that a 500 error is usually due to a token mismatch, but do I actua ...

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

What could be causing the HelloWorld program in AngularJS to malfunction?

To access the codes, you can visit http://jsfiddle.net/hh1mye5b/1/ Alternatively, you can refer to: <!doctype html> <html ng-app="dcApp"> <head> </head> <body> <div> <div ng-controller="SpeciesController"> ...

The Ajax success callback is failing to update the background-image property after receiving a successful JSON response

I am struggling with setting a background image in wordpress despite receiving a successful ajax response. The image url is being returned successfully in the json response, but I can't seem to set it as a background image. Here is the ajax function ...

Comparison of NamedPipe and TCP/IP for small data transfers

Hello, I've heard that when we only pass small amounts of data between client and server, the TCP/IP overhead is minimal and the performance is comparable to using Named Pipes on the same machine. Can anyone confirm this? ...

What is the best way to insert an image in front of text within a table cell that can be identified by its class name?

JavaScript Question: function addFlags(){ while(i < $('.tabledata').length){ var current_val = $('.tabledata').eq(i).text(); arr.push(current_val); $('.tabledata').eq(i).html("<img s ...

Angular: Autocomplete field automatically shifts focus when an item is removed

I am currently working on an Angular 2 application that utilizes PrimeNG components. One of the UI features includes an autocomplete component with multi-select functionality (p-autoComplete) similar to the one showcased in the official documentation: < ...

How to Load JSON Data Using D3 When Column Definitions are Separated

I'm currently working with d3.js and struggling to grasp how I can effectively load a JSON file representing a table that has separate column definitions. A typical JSON file, which I have no issue loading, might appear like this: [ { "id": 1, ...

How can I use CSS to transform a "+" symbol to an "x"?

When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top. This is my HTML code: <di ...

The data insertion query in MYSQL seems to be malfunctioning

I am facing an issue with inserting data from a form into a database table named "sumation". Despite using PhpStorm IDE, I am getting errors indicating that no data sources are configured to run the SQL and the SQL dialect is not set up. Can anyone help ...

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

My vsCode is alerting me about an issue: ❗ The Vue Language Features (Volar) plugin is using version 1.0.9, while the workspace has vue-tsc version 0.39.5. This discrepancy may result in different type checking behavior. vue-tsc: /home/tomas/Desktop/tes ...