How to display data in custom table using asp.net?

Question

I want to display data from my SQL database in a custom table format. So basically this is what I would like to achieve:

A. To display all entries in SQL table in a gridview with a view button next to each row

B. Click on the view button to display the below in a new web page

 ______________________________________
|           Customer Info              |
----------------------------------------
|Customer Name:   "From DB Table"      |
|Address:         "From DB Table"      |
----------------------------------------

Then the next table below the one above

 ______________________________________
|           Customer Network           |
----------------------------------------
|Network Location:   "From DB Table"   |
|APs:                "From DB Table"   |
----------------------------------------

All of the above is from one ID in my SQL DB table. So I want to break it up into sections to display all the data in the SQL Table

I don't have any code yet as I am not sure on how to do this.

To sum up: When the page loads it the shows all the entries in the database in a gridview with a view button next to each row

Then when the user clicks on the view button it opens a new page with the above table.

Thanks

CODE

GridView

<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FFF1D4" />
    <SortedAscendingHeaderStyle BackColor="#B95C30" />
    <SortedDescendingCellStyle BackColor="#F1E5CE" />
    <SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>

Then Code Behind

                GridView1.DataSource = GetData();
                GridView1.DataBind();
            }
        }
    }

    DataTable GetData()
    {
        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["OfficeConnection"].ConnectionString))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand("SELECT DisplayName 'Display Name', Replace(PrimaryEmailAddress,'SMTP:', ' ') 'Email Address', Replace(Licenses,'reseller-account:', ' ') 'License Type', LastPasswordChangeTimestamp 'Last Password Reset' FROM Consulting ", con))
            {
                for (int i = dt.Rows.Count - 1; i >= 0; i--)
                {
                    if (dt.Rows[i][1] == DBNull.Value)
                        dt.Rows[i].Delete();
                }
                dt.AcceptChanges();
                SqlDataAdapter adpt = new SqlDataAdapter(cmd);
                adpt.Fill(dt);
            }

        }
        return dt;
    }
}
}

This is some code from a different section in my web app. I can use the same code with a few changes, but how do I add the View button and to achieve the above question?

Please share what you have done so far. Code, SQL scripts, .. — Siavash Rostami
– Siavash Rostami, Commented Nov 12, 2019 at 13:33
I dont have any code apart from adding the data to sql. I am using fieldsets as it is quite a lot of information to add. That all works great but just need a tutorial or example on what I want to achieve. — Ellen Sellers
– Ellen Sellers, Commented Nov 12, 2019 at 13:37
"B. Click on the view button to display the below in a new web page" So you want to do the "Open new Form/Window" pattern? I can only advise against it for WebApplications. In Forms and WPF, those two at least still belong to the same App domain, so they can interact (like one being a modal dialog to the other. But two webpages got nothing to do with one another. This is just asking for Race Conditions because the user forgot he had (another copy) open. — Christopher
– Christopher, Commented Nov 12, 2019 at 13:39

dpant · Accepted Answer · 2019-11-12 19:13:52Z

A. This should work:

Customers.aspx

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Email" HeaderText="Email" />
        <asp:BoundField DataField="Address" HeaderText="Address" />                    
        <%--add other data fields here--%>
        <asp:HyperLinkField Text="View" 
            DataNavigateUrlFields="ID" 
            DataNavigateUrlFormatString="~/View.aspx?id={0}" />
    </Columns>
</asp:GridView>

Code-behind

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GetData();
    }
}

private void GetData()
{
    SqlDataReader dr;
    using (SqlConnection con = new SqlConnection([YOUR CONNECTION STRING]))
    {
        con.Open();
        // replace with your query
        using(SqlCommand cmd = new SqlCommand("SELECT ID,Name,Email,Address FROM Customers", con))
        {
            dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
    }           
}

B. The "view" page accepts the customer ID as parameter to display his details in any html layout you like, for example:

View.aspx

<table>
    <tbody>
        <tr>
            <th colspan="2">Customer Info</th>
        </tr>
        <tr>
            <td>Customer Name:</td>
            <td><asp:Label ID="Name" runat="server" /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><asp:Label ID="Address" runat="server" /></td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <th colspan="2">Customer Network</th>
        </tr>
        <tr>
            <td>Email:</td>
            <td><asp:Label ID="Email" runat="server" /></td>
        </tr>
        <tr>
            <td>Network Location:</td>
            <td><asp:Label ID="NetLocation" runat="server" /></td>
        </tr>
    </tbody>
</table>

Code-behind

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GetData();
    }
}

private void GetData()
{
    SqlDataReader dr;
    using (SqlConnection con = new SqlConnection([YOUR CONNECTION STRING]))
    {
        con.Open();
        // replace with your query
        using (SqlCommand cmd = new SqlCommand($"SELECT Name,Email,Address FROM Customers WHERE ID={Request["id"]}", con))
        {
            dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            if (dr.Read())
            {
                Name.Text = dr["Name"].ToString();
                Address.Text = dr["Address"].ToString();
                Email.Text = dr["Email"].ToString();
                // etc
            }
        }
    }
}

As said, you can replace both the code to fetch data from the database and the HTML layout with anything you like. This is the bare minimum.

erastl · Accepted Answer · 2019-11-12 15:56:23Z

0

Look up gridview CommandFields. You can use them to have the gridview generate a button for each row, and then hook into the OnRowCommand event of the gridview.

Here's a couple examples I found just on a quick google search, with some different ways to do this, that might help get you started.

https://www.codeproject.com/Tips/564619/Example-of-gridview-rowcommand-on-Button-Click

http://ezzylearning.com/tutorial/using-button-columns-in-gridview

In the OnRowCommand code, you can redirect the user to a new page, or show a different panel on the same page, however you prefer to handle switching views to the details view.

answered Nov 12, 2019 at 15:56

erastl

4114 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to display data in custom table using asp.net?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related