How to show male and female ratio in an organization through the database

WebCofig.aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebCofig.aspx.cs" Inherits="DemoClassExample.WebCofig" MasterPageFile="~/Site.Master" %>
<asp:Content ID="Content1" runat="server" contentplaceholderid="MainContent">
    <table class="style1">
        <tr>
            <td>
                <asp:Button ID="ButtonMale" runat="server" onclick="ButtonMale_Click"
                    Text="Male" />
            </td>
            <td>
                <asp:Button ID="ButtonFmale" runat="server" onclick="ButtonFmale_Click"
                    Text="Female" />
            </td>
            <td>
                <asp:Button ID="btnShowAll" runat="server" onclick="btnShowAll_Click"
                    Text="ShowAll" />
            </td>
            <td>
                <asp:Button ID="ButtonAllData" runat="server" onclick="ButtonAllData_Click"
                    Text="ShowAllData" />
            </td>
            <td>
                <asp:Button ID="btnTotal" runat="server" onclick="btnTotal_Click"
                    Text="TotalYearOnly" />
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
                    GridLines="None" PageSize="5">
                    <AlternatingRowStyle BackColor="White" />
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <SortedAscendingCellStyle BackColor="#FDF5AC" />
                    <SortedAscendingHeaderStyle BackColor="#4D0000" />
                    <SortedDescendingCellStyle BackColor="#FCF6C0" />
                    <SortedDescendingHeaderStyle BackColor="#820000" />
                </asp:GridView>
            </td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content2" runat="server" contentplaceholderid="HeadContent">
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</asp:Content>

WebCofig.aspx.cs File
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace DemoClassExample
{
    public partial class WebCofig : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void ButtonMale_Click(object sender, EventArgs e)
        {
            string SqlCon = ConfigurationManager.AppSettings["ConnectionString"];
            SqlConnection StrCon = new SqlConnection(SqlCon);
            string SqlQuery = "select CityName, SUM (case when Gender='male' then 1 else 0 end) as Male from Details group by CityName";
            SqlCommand SqlComm = new SqlCommand(SqlQuery, StrCon);
            StrCon.Open();
            SqlDataReader dr;
            dr = SqlComm.ExecuteReader();
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
        protected void ButtonFmale_Click(object sender, EventArgs e)
        {
            string SqlCon = ConfigurationManager.AppSettings["ConnectionString"];
            SqlConnection StrCon = new SqlConnection(SqlCon);
            string SqlQuery = "select CityName,SUM (case when Gender='female' then 1 else 0 end) as Female from Details group by CityName";
            SqlCommand SqlComm = new SqlCommand(SqlQuery, StrCon);
            StrCon.Open();
            SqlDataReader dr;
            dr = SqlComm.ExecuteReader();
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
        protected void btnShowAll_Click(object sender, EventArgs e)
        {
            string SqlCon = ConfigurationManager.AppSettings["ConnectionString"];
            SqlConnection StrCon = new SqlConnection(SqlCon);
            string SqlQuery = "select CityName, yearonly, SUM (case when Gender='male' then 1 else 0 end) as Male, SUM (case when Gender='female' then 1 else 0 end) as Female from Details group by CityName, Yearonly";
            SqlCommand SqlComm = new SqlCommand(SqlQuery, StrCon);
            StrCon.Open();
            SqlDataReader dr;
            dr = SqlComm.ExecuteReader();
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
        protected void ButtonAllData_Click(object sender, EventArgs e)
        {
            string SqlCon = ConfigurationManager.AppSettings["ConnectionString"];
            SqlConnection StrCon = new SqlConnection(SqlCon);
            string SqlQuery = "Select * from Details";
            SqlCommand SqlComm = new SqlCommand(SqlQuery, StrCon);
            StrCon.Open();
            SqlDataReader dr;
            dr = SqlComm.ExecuteReader();
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
        protected void btnTotal_Click(object sender, EventArgs e)
        {
            string SqlCon = ConfigurationManager.AppSettings["ConnectionString"];
            SqlConnection StrCon = new SqlConnection(SqlCon);
            string SqlQuery = "select CityName, yearonly, SUM (case when Gender='male' then 1 else 0 end) as Male, SUM (case when Gender='female' then 1 else 0 end) as Female, COUNT (*) as Total, SUM (case when Gender IS NOT NULL then 1 else 0 end) as Total1 from Details group by CityName, Yearonly";
            SqlCommand SqlComm = new SqlCommand(SqlQuery, StrCon);
            StrCon.Open();
            SqlDataReader dr;
            dr = SqlComm.ExecuteReader();
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
    }
}
https://www.youtube.com/channel/UCKLRUr6U5OFeu7FLOpQ-FSw/videos