Print Number Triangle Pattern in C# using ASP.NET WebForms

Introduction

Pattern printing using numbers is an important exercise for understanding nested loops, conditional statements, and logic flow in programming.

In this example, you’ll learn how to build a Number Triangle Pattern in a WebForms application, where users can input the number of rows and view the dynamically generated pattern in a web browser.

Pattern to Print

If the user enters 5, the output will be:

Code

C# WebForms Real-Time Example

ASPX Page (NumberTriangle.aspx)

HTML / XML

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Number Triangle Pattern in C# WebForms</title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="font-family: Arial; margin: 50px;">
            <h2>Number Triangle Pattern</h2>
            <asp:Label ID="Label1" runat="server" Text="Enter number of rows: " />
            <asp:TextBox ID="txtRows" runat="server"></asp:TextBox>
            <asp:Button ID="btnGenerate" runat="server" Text="Generate Pattern" OnClick="btnGenerate_Click" />
            <br /><br />
            <asp:Label ID="lblResult" runat="server" Font-Names="Consolas" Font-Size="Large"></asp:Label>
        </div>
    </form>
</body>
</html>

Code-Behind (NumberTriangle.aspx.cs)

using System;
using System.Text;

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

        protected void btnGenerate_Click(object sender, EventArgs e)
        {
            int rows;
            if (int.TryParse(txtRows.Text, out rows) && rows > 0)
            {
                lblResult.Text = GenerateNumberTriangle(rows);
            }
            else
            {
                lblResult.Text = "Please enter a valid positive number.";
            }
        }

        private string GenerateNumberTriangle(int rows)
        {
            StringBuilder pattern = new StringBuilder();

            for (int i = 1; i <= rows; i++)
            {
                for (int j = 1; j <= i; j++)
                {
                    pattern.Append(j + " ");
                }
                pattern.Append("<br/>");
            }

            return pattern.ToString();
        }
    }
}

Explanation

User Input
The user enters the number of rows (e.g., 5) in a textbox.
Button Click Event
When the "Generate Pattern" button is clicked, the function GenerateNumberTriangle() is called.
Logic Breakdown
- Outer loop (i) controls how many lines (rows) are printed.
- Inner loop (j) prints numbers from 1 up to i.
- <br/> adds line breaks for web display.
HTML Rendering
The pattern is displayed in the label using HTML <br/> tags for formatting.

Example Output (for input 5)

Code

Key Concepts

Nested loops help to control row and column structure.
StringBuilder is efficient for string concatenation in loops.
WebForms Label can render HTML (<br/>) to display multi-line output neatly.

Real-Time Usage

This kind of logic can be used in:

Educational web applications for teaching loops and algorithms.
Online code practice portals built using WebForms.
Interview preparation tools demonstrating control flow concepts.

Conclusion

This example shows how to use nested loops and string manipulation in C# WebForms to dynamically print a Number Triangle Pattern.
It’s an excellent beginner-friendly exercise to strengthen your understanding of looping structures and output formatting in ASP.NET.