Repeating bootstrap layout with each database/datatable result

Reply

None

0 Points

Repeating bootstrap layout with each database/datatable result

Jan 13, 2020 09:34 PM|sparky256DSL|LINK

I'm really new to asp.net and web design. I attempting to make an event reservation site. I'm using bootstrap and have the layout pretty well completed. Inside the layout I have an image and other data about the event and then a button to proceed to the reservation info collection screen. My problem is how do I repeat the layout when there are more than one result. The data is being placed inside a DataTable and I was attempting to look through the layout with a while statement. The problem seems to be that the controls all have the same IDs which makes it difficult for assigning the images to the controls and to have a separate form for each event. Is there a better way to loop through all the data and recreate the row/col layout for each record while assigning different IDs to the controls to make the page more dynamic?

  <div class="container-fluid">
      
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
                           <%
                               int x = 0; // dtEventInfo.Rows.Count;

                               while (x < dtEventInfo.Rows.Count)
                               {

                  %>
                <div class="row">
                  <div class="col-12 mx-auto">
                 <h4><% 
                         Response.Write(dtEventInfo.Rows[x]["eventname"]);
                         %></h4>
                  </div>
              </div>
              <hr class="my-1 py-1">
                <div class="row">
                    <div class="col-xs-12 col-md-2 mx-auto">  
                        <%
                            string seventposter = Convert.ToBase64String((byte[])dtEventInfo.Rows[x]["eventposter"]);
                            eventposter.ImageUrl = (String.Format("data:image/jpg;base64,{0}", seventposter));
                            string eventpostername = dtEventInfo.Rows[x]["eventid"].ToString() + "_poster";
                        %>
                       <asp:Image ID="eventposter" runat="server" CssClass="img-fluid"  /> 
                       
                    </div>
                    <div class="col-xs-12 col-md-4 col-md-border">
                        <div class="row grid-white">
                            <div class="col-4 text-right ">
                                <strong>Date/Time</strong>
                            </div>
                            <div class="col text-left ">
                                <% Response.Write(dtEventInfo.Rows[x]["eventdatetime"]); %>
                            </div>
                        </div>


.......

<%
 i += 1;
}
%>