how to generate new row in webgrid on asp.net mvc4

Question

I am having Text Box and a Button.I need to add Text Box value in Web grid when button was clicked.I coded to add text box value in grid but in the same column cell the value will be updated. I need to generate new column and add values ...

Index.cshtml Code

@{
    @Html.TextBox("Value", "", new { id = "txtid" })
    <input type="button" value="Submit" onclick="onSelectedIndexChanged()" id="btn" />
    WebGrid grid = new WebGrid(Model, selectionFieldName: "SelectedRow");
    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Edit", header: null, format: @<text>@item.GetSelectLink("Edit")</text>),
            grid.Column("Firstname", format: @<text>@item.GivenName</text>),
            grid.Column("Surname", format: @<text>@item.Surname</text>),
            grid.Column("Age", format: @<text>@item.Age</text>)
        )

    )
}

Models Code: People.cs

public  ObservableCollection<People> GetCustomerList(string firstname)
         {
             ObservableCollection<People> CustomerList = new ObservableCollection<People>();
             DataTable dtCustomer = new DataTable();

             CustomerList.Add(new People { Id = i, GivenName = firstname, Surname = "Kumar", Age = 25 });
                 i++;
             return CustomerList;
         }

Controller Code: Home Controller.cs public ActionResult GetPeople(string firstname) {

       //List<People> ItemList = new List<People>();
       // ViewBag.Items = ItemList;
        ObservableCollection<People> ItemList = new ObservableCollection<People>();
        People Customer = new Models.People();

        ItemList = Customer.GetCustomerList(firstname);

        return PartialView("Index", ItemList);

    }