使用stringbuilder将信息添加到表中，然后对C＃ASP.Net进行排序

Question

I am kind of new to C# and ASP.Net

I want to make a web app where I can add information to a html table to be shown. Nothing really advanced with MySQL and things like that, just a simple one.

I want to make it possible to add the persons and then later on sort them by their gender (Male, Female), but whatever I try, the list to show them all works, but the 2 other doesn't. When I add a male, I can see the male, but if I add a female, the male disappears and there comes a female in the other table. And so on..

Here is a gif of what it is doing:

I have tried to make it this way:

WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Diagnostics;
using System.Text;

namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
    int pressAddButton1;
    int pressAddButton2;
    int pressAddButton3;

    Label information1 = new Label();
    Label information2 = new Label();
    Label information3 = new Label();

    static StringBuilder newInfo1 = new StringBuilder();
    static StringBuilder newInfo2 = new StringBuilder();
    static StringBuilder newInfo3 = new StringBuilder();

    protected void Page_Load(object sender, EventArgs e)
    {

    }
        public class Person {
            public string Name { get; set; }
            public string Gender { get; set; }
            public string Mnr { get; set; }
            public string Password { get; set; }

            public Person(string name, string gender, string mnr, string password)
            {
                Name = name;
                Gender = gender;
                Mnr = mnr;
                Password = password;
            }
        }

        protected void add_Click(object sender, EventArgs e)
        {

            Person PersonID = new Person(name.Text, gender.Text, mnr.Text, password.Text);

            pressAddButton1++;
            if (gender.Text == "Male")
            {
                pressAddButton2++;
            }

            if (gender.Text == "Female")
            {
                pressAddButton3++;
            }

            information1.ID = "information1" + pressAddButton1;
            if (gender.Text == "Male")
            {
                information2.ID = "information2" + pressAddButton2;
            }

            if (gender.Text == "Female")
            {
                information3.ID = "information3" + pressAddButton3;
            }

            newInfo1.Append(string.Format(@"<tr><td>" + name.Text + "</td><td>" + gender.Text + "</td><td>" + mnr.Text + "</td><td>" + password.Text + "</td></tr>"));

                if (gender.Text == "Male")
                    {
                        newInfo2.Append(string.Format(@"<tr><td>" + name.Text + "</td><td>" + gender.Text + "</td><td>" + mnr.Text + "</td><td>" + password.Text + "</td></tr>"));
                    }

                if (gender.Text == "Female")
                    {
                        newInfo3.Append(string.Format(@"<tr><td>" + name.Text + "</td><td>" + gender.Text + "</td><td>" + mnr.Text + "</td><td>" + password.Text + "</td></tr>"));
                    }

            information1.Text += newInfo1.ToString();

                if (gender.Text == "Male")
                    {
                        information2.Text += newInfo2.ToString();
                    }

                if (gender.Text == "Female")
                    {
                        information3.Text += newInfo3.ToString();
                    }

            Panel1.Controls.Add(information1);

                if (gender.Text == "Male")
                    {
                        Panel2.Controls.Add(information2);
                    }

                if (gender.Text == "Female")
                    {
                        Panel3.Controls.Add(information3);
                    }

            name.Text = "";
            mnr.Text = "";
        }
    }
}

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Person ToString</title>
</head>
<body>
<form id="form1" runat="server">
<div style="border: 1px solid #000; padding: 5px; border-radius: 5px; width: 323px;">
    <asp:TextBox ID="name" runat="server" Width="320px" placeholder="Name.."></asp:TextBox>
    <br />
    <br />
    <asp:DropDownList ID="gender" runat="server" Width="324px">
        <asp:ListItem>Male</asp:ListItem>
        <asp:ListItem>Female</asp:ListItem>
    </asp:DropDownList>
    <br />
    <br />
    <asp:TextBox ID="mnr" runat="server" Width="320px" placeholder="Member Number.."></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="password" runat="server" TextMode="Password" Width="320px" placeholder="Password.."></asp:TextBox>
    <br />
    <asp:Button ID="add" runat="server" OnClick="add_Click" Text="Add" Width="324px" />
</div>
    <br />
    All:<br />
    <table border="1">
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Member Number</td>
            <td>Password</td>
        </tr>
        <asp:Panel ID="Panel1" runat="server"></asp:Panel>
    </table>
    <br />
    Male:
    <table border="1">
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Member Number</td>
            <td>Password</td>
        </tr>
        <asp:Panel ID="Panel2" runat="server"></asp:Panel>
    </table>
    <br />
    Female:
    <table border="1">
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Member Number</td>
            <td>Password</td>
        </tr>
        <asp:Panel ID="Panel3" runat="server"></asp:Panel>
    </table>
</form>
</body>
</html>

I have heard that maybe it would be easier to use Arraylist and GridView or something, but I don't know how to do it.

Please help.

Answer 1

Here is an example I created. Hope it helps. You can download it here .

It uses a GridView control that is sortable (click on the header text) and a SqlDataSource for data access.

<div class="row" style="margin-top: 50px">
    <div class="col-lg-8">

        <div class="panel panel-default">
            <div class="panel-heading">All Users</div>
            <div class="panel-body">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1" CssClass="table" GridLines="None" AllowSorting="True">
                    <Columns>
                        <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                        <asp:BoundField DataField="Gender" HeaderText="Gender" SortExpression="Gender" />
                        <asp:BoundField DataField="MemberNumber" HeaderText="MemberNumber" SortExpression="MemberNumber" />
                        <asp:BoundField DataField="Password" HeaderText="Password" SortExpression="Password" />
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>" SelectCommand="SELECT * FROM [User]"></asp:SqlDataSource>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">Male Users</div>
            <div class="panel-body">
                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource2" CssClass="table" GridLines="None" AllowSorting="True">
                    <Columns>
                        <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                        <asp:BoundField DataField="Gender" HeaderText="Gender" SortExpression="Gender" />
                        <asp:BoundField DataField="MemberNumber" HeaderText="MemberNumber" SortExpression="MemberNumber" />
                        <asp:BoundField DataField="Password" HeaderText="Password" SortExpression="Password" />
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>" SelectCommand="SELECT * FROM [User] WHERE ([Gender] = @Gender)">
                    <SelectParameters>
                        <asp:Parameter DefaultValue="Male" Name="Gender" Type="String" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">Female Users</div>
            <div class="panel-body">
                <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource3" CssClass="table" GridLines="None" AllowSorting="True">
                    <Columns>
                        <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                        <asp:BoundField DataField="Gender" HeaderText="Gender" SortExpression="Gender" />
                        <asp:BoundField DataField="MemberNumber" HeaderText="MemberNumber" SortExpression="MemberNumber" />
                        <asp:BoundField DataField="Password" HeaderText="Password" SortExpression="Password" />
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>" SelectCommand="SELECT * FROM [User] WHERE ([Gender] = @Gender)">
                    <SelectParameters>
                        <asp:Parameter DefaultValue="Female" Name="Gender" Type="String" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </div>
        </div>

    </div>
    <div class="col-lg-4">
        <div class="panel panel-default">
            <div class="panel-heading">Add User</div>
            <div class="panel-body">
                <div role="form">
                    <div class="form-group">
                        <asp:Label ID="NameLabel" runat="server" Text="Name" AssociatedControlID="NameTextBox"></asp:Label>
                        <asp:TextBox ID="NameTextBox" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="Label3" runat="server" Text="Gender" AssociatedControlID="GenderDropDownList"></asp:Label>
                        <asp:DropDownList ID="GenderDropDownList" runat="server"  CssClass="form-control">
                            <asp:ListItem Selected="True" Text="Male" Value="Male"></asp:ListItem>
                            <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                        </asp:DropDownList>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="Label1" runat="server" Text="Member Number" AssociatedControlID="MemberNumberTextBox"></asp:Label>
                        <asp:TextBox ID="MemberNumberTextBox" runat="server"  CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="Label2" runat="server" Text="Password" AssociatedControlID="PasswordTextBox"></asp:Label>
                        <asp:TextBox ID="PasswordTextBox" runat="server"  CssClass="form-control" TextMode="Password"></asp:TextBox>
                    </div>
                    <asp:LinkButton ID="AddButton" runat="server" CssClass="btn btn-primary form-control" OnClick="AddButton_Click">Add User</asp:LinkButton>
                </div>
            </div>
        </div>
    </div>
</div>

I'm using a nuget package called NPoco to simplify the database insert...

protected void AddButton_Click(object sender, EventArgs e)
{
    // Insert new user
    using (var db = new Database("DatabaseConnectionString"))
    {
        db.Insert("User", "Id", true,
            new
            {
                Name = NameTextBox.Text,
                Gender = GenderDropDownList.SelectedValue,
                MemberNumber = MemberNumberTextBox.Text,
                Password = PasswordTextBox.Text
            });
    }

    // Refresh the data in the grid
    GridView1.DataBind();
    GridView2.DataBind();
    GridView3.DataBind();
}