List is not updating in the MVC structure. When I add elements to list from user input

I'm new to ASP.NET framework and I was trying to print the list of type integer. I have created a Model called Number model where I have declared a list of type int inside my Index.cshtml I have used form to read user input on the UI side. Inside Controller i.e. HomeController I have written two action methods one is public ActionResult Index and other one is AddElement. Initially, my Index method is being called as it is a default method and some initial value with that I added are being printed on the web page but when I'm adding the user input inside AddElement action method then the list is not getting updated why is this happening?

Models -> NumberModel.cs:

using System.Collections.Generic;
namespace Problem1.Models
{
    public class NumberModel
    {
        public List<int> NumberList { get; set; }

        public NumberModel()
        {
            NumberList = new List<int>();
        }
    }
}

Controller -> HomeController.cs:

using Problem1.Models;
using System.Web.Mvc;

namespace Problem1.Controllers
{
    public class HomeController : Controller
    {
        private NumberModel numberModel;

        public HomeController()
        {
            numberModel = new NumberModel();
            
        }

        public ActionResult Index()
        {
            numberModel.NumberList.Add(1);
            numberModel.NumberList.Add(2);
            numberModel.NumberList.Add(3);
            numberModel.NumberList.Add(4);
            numberModel.NumberList.Add(5);
            return View(numberModel);
        }

        [HttpPost]
        public ActionResult AddNumber(int newNumber)
        {
            numberModel.NumberList.Add(newNumber);
            return RedirectToAction("Index");
        }
    }
}

View -> Home -> Index.cshtml

@model Problem1.Models.NumberModel
@{
    ViewBag.Title = "Home Page";
}

<!DOCTYPE html>
<html>
<head>
    <title>Number List</title>
</head>
<body>
    <h1>Number List:</h1>
    <ul>
        @foreach (int number in Model.NumberList)
        {
            <li>@number</li>
        }
    </ul>

    <form method="post" action="/Home/AddNumber">
        <input type="number" name="newNumber" />
        <button type="submit">Add Number</button>
    </form>
</body>
</html>

I tried to print the list with updated values after getting input from the user but it is not happening

Solution

It's happening, because always when you add new number in your form, it is calling constructor of HomeController, where are you actually initialising new list. Then it's called AddNumber method, and then (since you are calling at the end of this method RedirectToAction) is calling AGAIN constructor of HomeController, where the list is again initialising as a new list and after that is called Index method where are you fulfilling values as in the beginning when page is load for the first time.

You should see whole process which I described with debugging. If you want to update list in the form, you have to use different approach (with javascript, partial views, view components,... it depends, which version of the framework are you using)