how to add a new row in a web grid in mvc4/5

Question

hi Frnds

 

I am doing add a new row in a web grid...but if I click on add button it is not a working

 

 m sending to u my code also

 

please share the solution where I m in stuck

 

note//// Ifirst I want the empty web grid...if I click on add button it should be add and save it..

public int ID { get; set; } 
       public string Name { get; set; } 
        public string SurName { get; set; } 
  
        public static List<UserModel> getUsers() 
        { 
            List<UserModel> users = new List<UserModel>() 
            { 
               
            };

 

 
@{ 
    var grid = new WebGrid(Model); 
} 
  
<div  id="gridContent" style=" padding:20px; " > 
@grid.GetHtml( 
        tableStyle: "webgrid-table", 
        headerStyle: "webgrid-header", 
        footerStyle: "webgrid-footer", 
        alternatingRowStyle: "webgrid-alternating-row", 
        selectedRowStyle: "webgrid-selected-row", 
        rowStyle: "webgrid-row-style", 
        mode: WebGridPagerModes.All, 
        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("SurName", "Sur Name", format: @<text> <span  class="display-mode"> <label id="lblSurName">@item.SurName</label> </span>  <input type="text" id="SurName" value="@item.SurName" class="edit-mode" /> </text>, style: "col2Width"),  
             grid.Column("Action", format: @<text> 
                                <button class="edit-user display-mode" >Edit</button> 
                                <button class="save-user edit-mode"  >Save</button> 
                                <button class="cancel-user edit-mode" >Cancel</button> 
                            </text>,  style: "col3Width" , canSort: false) 
           )) 

<script type="text/javascript" > 
    $(function () { 
       $('.edit-mode').hide(); 
        $('.edit-user, .cancel-user').on('click', function () { 
            var tr = $(this).parents('tr:first'); 
            tr.find('.edit-mode, .display-mode').toggle(); 
        }); 
 
        $('.save-user').on('click', function () { 
            var tr = $(this).parents('tr:first'); 
            var Name = tr.find("#Name").val(); 
            var SurName = tr.find("#SurName").val(); 
            var UserID = tr.find("#UserID").html(); 
            tr.find("#lblName").text(Name); 
            tr.find("#lblSurName").text(SurName); 
            tr.find('.edit-mode, .display-mode').toggle(); 
            var UserModel = 
            { 
                "ID": UserID, 
                "Name": Name, 
                "SurName": SurName 
            }; 
            $.ajax({ 
                url: '/User/ChangeUser/', 
                data: JSON.stringify(UserModel), 
                type: 'POST', 
                contentType: 'application/json; charset=utf-8', 
                success: function (data) { 
                    alert(data); 
                } 
            }); 
  
        }); 
    }) 
</script>