how to add a new row on web grid in mvc ?/

Question

Hi Frnds

I am sending to u my code ...but i am stuck in if i click on add button new row is not be add on the web grid in mvc4

please chek the code and give the solution

Model////

public class UserModel
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }

        //public static List<UserModel> getUsers()
        //{
        //    List<UserModel> users = new List<UserModel>();
        //    {
        //        new UserModel();
        //        /*{ ID = 1, Name = "Anubhav", SurName = "Chaudhary" }; */ 
        //    };
        //    users.Add(new UserModel());
        //    //{ ID = 1, Name = "Anubhav", SurName = "Chaudhary" });
        //    return (users);
        //}
        public static List<UserModel> getUsers()
        {
            List<UserModel> users = new List<UserModel>()
            {
              new UserModel (){ ID=4, Name="Jyoti", LastName="Mishra" },
              new UserModel (){ ID=5, Name="Shayli", LastName="Shamra" },
            };
            return users;
        }

    }

Views////

@{
    ViewBag.Title = "Index";
}

<h2>WEB GRID</h2>

@{
    var grid = new WebGrid(Model);
}

<div id="gridContent" style="padding:20px ; text-align:center ; width:70% ; border:groove">
   
        @grid.GetHtml(

     columns:
         grid.Columns(
          grid.Column("ID", format: @<text>
                    <span class="display-mode">@item.ID </span>
                    <label id="UserID" class="edit-mode">@item.ID</label> </text>, style: "col1Width"),
          grid.Column("Name", "Name", format: @<text>
                    <span class="display-mode"> <label id="lblName">@item.Name</label> </span>
                    <input type="text" id="Name" value="@item.Name" class="edit-mode" /></text>, style: "col2Width"),
          grid.Column("LastName", "LastName", format: @<text>
                    <span class="display-mode"> <label id="lblLastName">@item.LastName</label> </span>
                    <input type="text" id="LastName" value="@item.LastName" class="edit-mode" /> </text>, style: "col2Width"),
          )
        ))
        <br />
        <br />

        @*Add button for adding the textbox*@

        <INPUT type="button" value="Add Row" onclick="addRow('gridContent')" />
</div>

     
  <script type="text/javascript">
      function addRow(divid) {
          var grd = document.getElementById(divid);
         
          var tbod=grd.rows[0].parentNode;
          var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);
          tbod.appendChild(newRow);
          return false;

          cell.appendChild(element);

        }
    </script>

 

Controller/////

 public ActionResult Index()
        {
            List<UserModel> users = UserModel.getUsers();
            return View(users);
        }