ASP.Net MVC facing difficulties to pass editable tabular data to action

Question

i am working with webgrid to show data in tabular format in edit mode. when my application is running then textboxes appear in tabular format with data. when user change existing data in textbox and submit button clicked then my server side action is getting called but no data is passing there which causes my List<UserModel> oUserModel is always null

here i am pasting my view and action code.

view code

@model List<MVCCRUDPageList.Controllers.UserModel>

@using (Html.BeginForm(null,null,FormMethod.Post))
{
    var grid = new WebGrid(Model);
    var rowNum = 0;

    <div id="gridContent" style=" padding:20px; ">
    @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        selectedRowStyle: "selected",
        headerStyle: "header",
        columns: grid.Columns
        (
            //grid.Column("RowNumber", style: "HideFirstCol", format: item => rowNum = rowNum + 1),
            grid.Column(null, null, format: @<input type="hidden" name="IDHidden" value="rowNum + 1" />),
            grid.Column("First Name",
                        style: "col2",
                        format: @<text>
                        @Html.TextBox("UserModel[" + (rowNum - 1).ToString() + "].FirstName", (object)item.FirstName)
                        </text>),


            grid.Column("Last Name",
                        style: "col2",
                        format: @<text>
                        @Html.TextBox("UserModel[" + (rowNum - 1).ToString() + "].LastName", (object)item.LastName)
                        </text>)
        ))
    </div>
    <input type="submit" name="SaveButton" value="Save" />
}

Action code

public class WebGridEditableController : Controller
    {
        // GET: WebGridEditable
        public ActionResult Index()
        {
            List<UserModel> users = UserModel.getUsers();
            return View(users);
        }

        // GET: WebGridEditable
        [HttpPost]
        public ActionResult Index(List<UserModel> oUserModel)
        {
            return View(oUserModel);
        }
    }

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

        public static List<UserModel> getUsers()
        {
            List<UserModel> users = new List<UserModel>()  
            {  
                new UserModel (){ ID=1, FirstName="Anubhav", LastName="Chaudhary" },   
                new UserModel (){ ID=2, FirstName="Mohit", LastName="Singh" },  
                new UserModel (){ ID=3, FirstName="Sonu", LastName="Garg" },  
                new UserModel (){ ID=4, FirstName="Shalini", LastName="Goel" },  
                new UserModel (){ ID=5, FirstName="James", LastName="Bond" },  
            };
            return users;
        }
    }

please highlight what mistake i have made there which preventing tabular data to pass to server side action.

screen shot

thanks

Answer 1

problem lies here grid.Column(null, null, format: @<input type="hidden" name="IDHidden" value="rowNum + 1" />),

now it is solved. full code

@model MVCCRUDPageList.Controllers.UserVM
@using (Html.BeginForm("Index", "WebGridEditable", FormMethod.Post))
{
    var grid = new WebGrid(Model.UserList, canSort: false, canPage: false);
    var rowNum = 0;

    <div id="gridContent" style=" padding:20px; ">
    @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        selectedRowStyle: "selected",
        headerStyle: "header",
        columns: grid.Columns
        (
            @*grid.Column(null, null, format: @<input type="hidden" name="IDHidden" value="rowNum + 1" />),*@
            grid.Column(null, null, format: item => rowNum = rowNum + 1),


            grid.Column("First Name",
                        style: "col2",
                            format: (item) => @Html.TextBox("UserList[" + (rowNum - 1).ToString() + "].FirstName", (object)item.FirstName)
                        ),


            grid.Column("Last Name",
                        style: "col2",
                        format: (item) =>
                            @Html.TextBox("UserList[" + (rowNum - 1).ToString() + "].LastName", (object)item.LastName)
                        )

        ))
    </div>
    <input type="submit" name="SaveButton" value="Save" />
}

controller and action code

public class WebGridEditableController : Controller
{
    // GET: WebGridEditable
    public ActionResult Index()
    {
        var usermodel = new UserVM
        {
            UserList = new List<UserModel>
            {
                new UserModel (){ ID=1, FirstName="Anubhav", LastName="Chaudhary" },   
                new UserModel (){ ID=2, FirstName="Mohit", LastName="Singh" },  
                new UserModel (){ ID=3, FirstName="Sonu", LastName="Garg" },  
                new UserModel (){ ID=4, FirstName="Shalini", LastName="Goel" },  
                new UserModel (){ ID=5, FirstName="James", LastName="Bond" }
            }
        };

        return View(usermodel);
    }

    // GET: WebGridEditable
    [HttpPost]
    public ActionResult Index(UserVM oUserVM)
    {
        return View(oUserVM);
    }
}

public class UserVM
{
    public List<UserModel> UserList { get; set; }
}

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

The same done with textboxfor using webgrid

razor view code

@model List<MVCCRUDPageList.test.Controllers.Student>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm("Index", "WebGrid", FormMethod.Post))
{
    var grid = new WebGrid(Model, canSort: false, canPage: false);
    var rowNum = 0;


    <div id="gridContent" style=" padding:20px; ">
        @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        selectedRowStyle: "selected",
        headerStyle: "header",
        columns: grid.Columns
        (
            grid.Column(null, null, format: item => rowNum = rowNum + 1),
            grid.Column("First Name", format: (item) => @Html.TextBoxFor(m => m[rowNum - 1].FirstName, new { @class = "edit-mode" })),
            grid.Column("Last Name", format: (item) => @Html.TextBoxFor(m => m[rowNum - 1].LastName, new { @class = "edit-mode" }))

        ))
        <input type="submit" value="Submit" />
    </div>

}

Controller and action code

public class WebGridController : Controller
    {
        // GET: WebGrid
        public ActionResult Index()
        {
            var UserList = new List<Student>
            {
                new Student (){ ID=1, FirstName="Anubhav", LastName="Chaudhary" },   
                new Student (){ ID=2, FirstName="Mohit", LastName="Singh" },  
                new Student (){ ID=3, FirstName="Sonu", LastName="Garg" },  
                new Student (){ ID=4, FirstName="Shalini", LastName="Goel" },  
                new Student (){ ID=5, FirstName="James", LastName="Bond" }
            };

            return View(UserList);
        }

        [HttpPost]
        public ActionResult Index(List<Student> oStudent)
        {
            return View(oStudent);
        }
    }

    public class Student
    {
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }              
    }