Step 1: Design Page – SortList.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SortList.aspx.cs" Inherits="SortList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sort List Ascending / Descending - Real Time Example</title>
<style>
body {
font-family: Arial;
background-color: #f2f5fc;
margin: 50px;
}
.container {
width: 500px;
margin: auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
padding: 25px;
}
h2 {
color: #1A2A80;
text-align: center;
}
.form-control {
width: 100%;
padding: 8px;
margin-top: 10px;
}
.btn {
background-color: #7A85C1;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 48%;
}
.btn:hover {
background-color: #5b68a1;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.result {
margin-top: 20px;
font-weight: bold;
text-align: center;
color: #333;
white-space: pre-line;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>Sort List of Integers</h2>
<asp:Label ID="Label1" runat="server" Text="Enter Numbers (comma separated):"></asp:Label><br />
<asp:TextBox ID="txtNumbers" runat="server" CssClass="form-control" placeholder="Example: 45,12,89,3,20"></asp:TextBox>
<div class="button-group">
<asp:Button ID="btnAscending" runat="server" Text="Ascending" CssClass="btn" OnClick="btnAscending_Click" />
<asp:Button ID="btnDescending" runat="server" Text="Descending" CssClass="btn" OnClick="btnDescending_Click" />
</div>
<asp:Label ID="lblResult" runat="server" CssClass="result"></asp:Label>
</div>
</form>
</body>
</html>
Step 2: Backend Logic – SortList.aspx.cs
using System;
using System.Collections.Generic;
public partial class SortList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
// Sort Ascending
protected void btnAscending_Click(object sender, EventArgs e)
{
try
{
string input = txtNumbers.Text.Trim();
if (string.IsNullOrEmpty(input))
{
lblResult.Text = "Please enter numbers separated by commas.";
lblResult.ForeColor = System.Drawing.Color.Red;
return;
}
// Split input and convert to integers
string[] parts = input.Split(',');
List<int> numbers = new List<int>();
foreach (string s in parts)
{
numbers.Add(Convert.ToInt32(s.Trim()));
}
// Sort ascending
numbers.Sort();
lblResult.Text = "Sorted in Ascending Order:\n" + string.Join(", ", numbers);
lblResult.ForeColor = System.Drawing.Color.Green;
}
catch
{
lblResult.Text = "Invalid input! Please enter only numbers separated by commas.";
lblResult.ForeColor = System.Drawing.Color.Red;
}
}
// Sort Descending
protected void btnDescending_Click(object sender, EventArgs e)
{
try
{
string input = txtNumbers.Text.Trim();
if (string.IsNullOrEmpty(input))
{
lblResult.Text = "Please enter numbers separated by commas.";
lblResult.ForeColor = System.Drawing.Color.Red;
return;
}
string[] parts = input.Split(',');
List<int> numbers = new List<int>();
foreach (string s in parts)
{
numbers.Add(Convert.ToInt32(s.Trim()));
}
// Sort ascending first, then reverse
numbers.Sort();
numbers.Reverse();
lblResult.Text = "Sorted in Descending Order:\n" + string.Join(", ", numbers);
lblResult.ForeColor = System.Drawing.Color.Green;
}
catch
{
lblResult.Text = "Invalid input! Please enter only numbers separated by commas.";
lblResult.ForeColor = System.Drawing.Color.Red;
}
}
}
Real-Time Example Output
Input
45, 12, 89, 3, 20
Output 1 (Ascending Button Clicked)
Sorted in Ascending Order:
3, 12, 20, 45, 89
Output 2 (Descending Button Clicked)
Sorted in Descending Order:
89, 45, 20, 12, 3
Explanation
| Keyword | Usage |
|---|
| List<int> | Stores integers entered by user |
| Split(',') | Splits user input into string array |
| Convert.ToInt32() | Converts each string to integer |
| Sort() | Sorts list in ascending order |
| Reverse() | Reverses list to descending order |
| string.Join() | Combines list into single string for display |
Algorithm
1. Read comma-separated numbers from textbox.
2. Split the input using ','.
3. Convert each value to integer and add to list.
4. If Ascending → call Sort().
5. If Descending → call Sort() then Reverse().
6. Display sorted list in label.
Output Example Table
| Input | Button Clicked | Output |
|---|
| 10, 2, 30, 5 | Ascending | 2, 5, 10, 30 |
| 10, 2, 30, 5 | Descending | 30, 10, 5, 2 |
| 5, 9, 1 | Ascending | 1, 5, 9 |