C# ASP.NET need some idea on how to turn this harcoded HTML item boxes into item info that I can took from the DB

Question

1.00/5 (2 votes)

See more:

0 down vote
favorite
Sorry for the confusing title,

I needed some help here, so I am creating a website that looks like eBay and I got some HTML template which I think I can use to integrate into the ASPX

However, I needed some help with this part, If you look at the picture, you can see there are four boxes that include item

[^]

This is the html code

<div class="ltabs-item product-layout">
                                   <div class="product-item-container">
                                       <div class="left-block">
                                           <div class="product-image-container second_img ">
                                               <img src="image/demo/shop/resize/J5-270x270.jpg"  alt="Apple Cinema 30"" class="img-responsive" />
                                               <img src="image/demo/shop/resize/J9-270x270.jpg"  alt="Apple Cinema 30"" class="img_0 img-responsive" />
                                           </div>
                                           <!--Sale Label-->
                                           <span class="label label-sale">-15%</span>

                                           <!--full quick view block-->
                                           <a class="quickview iframe-link visible-lg" data-fancybox-type="iframe"  href="quickview.html">  Quickview</a>
                                           <!--end full quick view block-->
                                       </div>
                                       <div class="right-block">
                                           <div class="caption">
                                               <h4><a href="product.html">Cupim Bris</a></h4>
                                               <div class="ratings">
                                                   <div class="rating-box">
                                                       <span class="fa fa-stack">class="fa fa-star fa-stack-1x"__^</span>
                                                       <span class="fa fa-stack">^__i class="fa fa-star fa-stack-1x"__^</i__^^__i class="fa fa-star-o fa-stack-1x"__^</span>
                                                       <span class="fa fa-stack">^__i class="fa fa-star fa-stack-1x"__^^__i class="fa fa-star-o fa-stack-1x"__^</span>
                                                       <span class="fa fa-stack">^__i class="fa fa-star fa-stack-1x"__^^__i class="fa fa-star-o fa-stack-1x"__^</span>
                                                       <span class="fa fa-stack">^__i class="fa fa-star-o fa-stack-1x"></span>
                                                   </div>
                                               </div>

                                               <div class="price">
                                                   <span class="price-new">$50.00</span>
                                                   <span class="price-old">$62.00</span>
                                               </div>
                                           </div>

                                             <div class="button-group">
                                               <button class="addToCart" type="button" data-toggle="tooltip" title="Add to Cart" onclick="cart.add('42', '1');">^__i class="fa fa-shopping-cart"> <span class="">Add to Cart</span></button>
                                               <button class="wishlist" type="button" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');">^__i class="fa fa-heart"></button>
                                               <button class="compare" type="button" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');">^__i class="fa fa-exchange"></button>
                                             </div>
                                       </div><!-- right block -->
                                   </div>
                               </div>

Basically when you look at the code, everything is hard coded, what I wanted to do is that every time the page loads, the item info will be taken from the DB and code-behind will supply the information then parse into that field.

I am just wondering how should I do that?

Thank you

What I have tried:

N/A...

..............................................

..............................................

..............................................

Posted 28-Jun-17 9:16am
Member 13278426

Updated 28-Jun-17 19:00pm

Add a Solution

Comments

ZurdoDev 28-Jun-17 15:58pm

Use a repeater or a datalist.

Member 13278426 29-Jun-17 1:42am

How about ListView?
Thanks

ZurdoDev 29-Jun-17 8:22am

Sure, any repeatable databound object can work.

F-ES Sitecore 29-Jun-17 4:37am

Your question is basically "how do I write a website". You can't learn such a massive task from scratch by asking questions on a forum. Get a book on asp.net webforms (or consider using MVC as webforms is considered older technology) and go through it to learn the basics. This stuff will all be covered and you will be in a much better position to start your task. People are less inclined to answer these types of question as they show the asker has put in zero effort themselves.

1 solution

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

Hello
A simple code is like this:

in your html or aspx page (front end):

ASP.NET

<body> <form id="form1" runat="server"> <div> <asp:DataList ID="DataList1" runat="server" RepeatColumns="4"> <ItemTemplate> Product Name: <asp:Label ID="lblPName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label> <br /> Product Price: <asp:Label ID="lblPPrice" runat="server" Text='<%# Eval("ProductPrice") %>'></asp:Label> <br /> </ItemTemplate> </asp:DataList> </div> </form> </body>

and in aspx.cs or your back end page:

C#

public partial class _Default : System.Web.UI.Page { SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Product;Integrated Security=True"); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindData(); } } protected void BindData() { DataSet ds = new DataSet(); DataTable FromTable = new DataTable(); conn.Open(); string cmdstr = "Select * from Products"; SqlCommand cmd = new SqlCommand(cmdstr, conn); SqlDataAdapter adp = new SqlDataAdapter(cmd); adp.Fill(ds); DataList1.DataSource = ds.Tables[0]; DataList1.DataBind(); } }

Permalink

Share this answer

Posted 28-Jun-17 19:00pm
Ali Majed HA

Add a Solution

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email

Password

Forgot your password?

Your Email

This email is in use. Do you need your password?

Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ali Majed HA · Answer 1 · 2017-06-28T19:00:00

Hello
A simple code is like this:

in your html or aspx page (front end):

ASP.NET

<body>
    <form id="form1" runat="server">
    <div>

      <asp:DataList ID="DataList1" runat="server"  RepeatColumns="4">

        <ItemTemplate>

          Product Name:

           <asp:Label ID="lblPName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>

           <br />

           Product Price:

           <asp:Label ID="lblPPrice" runat="server" Text='<%# Eval("ProductPrice") %>'></asp:Label>

           <br />

        </ItemTemplate>

     </asp:DataList>

   </div>

   </form>

</body>

and in aspx.cs or your back end page:

C#

public partial class _Default : System.Web.UI.Page

{

    SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Product;Integrated Security=True");

    protected void Page_Load(object sender, EventArgs e)

    {
        if (!IsPostBack)

        {
            BindData();
        }
    }

    protected void BindData()

    {
        DataSet ds = new DataSet();
        DataTable FromTable = new DataTable();
        conn.Open();
        string cmdstr = "Select * from Products";
        SqlCommand cmd = new SqlCommand(cmdstr, conn);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        adp.Fill(ds);   
        DataList1.DataSource = ds.Tables[0];
        DataList1.DataBind();      
    }
}