1 Attachment(s)
Populate DataGridView With Multiple Arrays
Hi again friends,
So actually what I've been trying to do is practice collecting data from one of my temporary websites (more like a web page).
I have added product details to this web page & was trying to practice parsing the data & then sending that data to either a listview or datagridview into their own columns & rows.
I would try collecting each array (into it's own list) from each html element (Product Title, Price, & # Sold), but have had NOTHING BUT TROUBLE trying to get them into the datagridview!
Here is the code that I've been working with. I know that this is DEFINITELY NOT the way to add the elements to the DataGridView, but it's DEFINITELY a good start:
HERE'S WHAT MY DATAGRIDVIEW LOOKS LIKE!:
Attachment 138955
Would appreciate any help that you could provide. Thanks again for helping!
Re: Populate DataGridView With Multiple Arrays
I would like to start off this post with that I visited your website: http://tinyurl.com/hk8ng96 and your HTML is not structured very well. For example, an ID attribute is suppose to be unique, but you have 5 <div> tags with the same ID(#section). Passing the website through W3's validator yields 15 errors! You should address those issues, for example the section id's should be classes instead.
With that aside, what I would do to solve the issue is:
- Get the source code between the <body> and </body>
- Parse the source code into an XDocument
- Create a new DataTable with 3 rows:
- Description, String
- Price, Decimal
- Sold, Integer
- Get each <div> element who's class value is Section
- Loop through each returned element
- Get the first instance of an <a> element for the description
- Get the first instance of a <span> element for the price
- Get the last instance of a <span> element for the sold
- Add those values as a DataRow to the DataTable
- Bind the DataTable to your DataGridView
Re: Populate DataGridView With Multiple Arrays
Another way would be to create a class with a property for the title, price and sold. Then create a list(of thatClass). For each item pulled out of the web page, create one of those classes and add it to the list. Then simply bind the list to the data grid.
Paste all of this code into an empty form and you should see what I mean...
Code:
Public Class Form1
Private Class aClass
Private _column1 As String
Public Event column1_Changed As EventHandler
Public Property column1() As String
Get
Return _column1
End Get
Set(ByVal value As String)
If _column1 <> value Then
_column1 = value
RaiseEvent column1_Changed(Me, EventArgs.Empty)
End If
End Set
End Property
Private _column2 As String
Public Event column2_Changed As EventHandler
Public Property column2() As String
Get
Return _colUmn2
End Get
Set(ByVal value As String)
If _colUmn2 <> value Then
_colUmn2 = value
RaiseEvent colUmn2_Changed(Me, EventArgs.Empty)
End If
End Set
End Property
Private _column3 As String
Public Event column3_Changed As EventHandler
Public Property column3() As String
Get
Return _column3
End Get
Set(ByVal value As String)
If _column3 <> value Then
_column3 = value
RaiseEvent column3_Changed(Me, EventArgs.Empty)
End If
End Set
End Property
End Class
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim dgv As New DataGridView
Me.Controls.Add(dgv)
dgv.Dock = DockStyle.Fill
Dim classes As New List(Of aClass)
For i As Integer = 1 To 10
Dim thisClass As New aClass
thisClass.column1 = "c1" & i.ToString
thisClass.column2 = "c2" & i.ToString
thisClass.column3 = "c3" & i.ToString
classes.Add(thisClass)
Next
dgv.DataSource = classes
End Sub
End Class
Re: Populate DataGridView With Multiple Arrays
Quote:
Originally Posted by
dday9
I would like to start off this post with that I visited your website:
http://tinyurl.com/hk8ng96 and your HTML is not structured very well. For example, an ID attribute is suppose to be unique, but you have 5 <div> tags with the same ID(#section). Passing the website through W3's validator yields
15 errors! You should address those issues, for example the section id's should be classes instead.
With that aside, what I would do to solve the issue is:
- Get the source code between the <body> and </body>
- Parse the source code into an XDocument
- Create a new DataTable with 3 rows:
- Description, String
- Price, Decimal
- Sold, Integer
- Get each <div> element who's class value is Section
- Loop through each returned element
- Get the first instance of an <a> element for the description
- Get the first instance of a <span> element for the price
- Get the last instance of a <span> element for the sold
- Add those values as a DataRow to the DataTable
- Bind the DataTable to your DataGridView
First of all, thank you for your support dday9.
The HTML webpage was built just for testing purposes as this will not be the final structure. This page was built just for practice until I get my real website up and running.
So, I'm not sure how to do ALL of the steps that you've mentioned above. Steps 1, 2, 3, 9, & 10.
Could you please show me an example? How would I implement your ideas along with the code that I've mentioned above? Thanks again!
Re: Populate DataGridView With Multiple Arrays
For step 1, you are basically already doing it. The only thing you need to do is get the substring between <body and </html>:
Code:
Dim source As String = String.Empty
Using wc As New Net.WebClient()
source = wc.DownloadString("http://tinyurl.com/hk8ng96")
source = source.Replace("</html>", String.Empty)
source = source.Substring(source.IndexOf("<body"))
End Using
For step 2, you would call XDocument.Parse. However right now as your HTML sits, the Parse method would fail. You really need to fix the HTML:
Code:
Dim html As XDocument = XDocument.Parse(source)
For step 3, it is as simple as declaring a new DataTable and using the Columns.AddRange method to add columns:
Code:
Dim dt As New DataTable("html")
dt.Columns.AddRange({New DataColumn("Description"), New DataColumn("Price", GetType(Decimal)), New DataColumn("Sold", GetType(Integer))})
For step 9, use the Rows.Add method to add the values retrieved from steps 6-8:
Code:
dt.Rows.Add({value1, value2, value3})
For step 10, set the DataSource of the DataGridView equal to the DataTable:
Code:
DataGridView1.DataSource = dt
