ASP.Net MVC 面临将可编辑表格数据传递给操作的困难

Question

我正在使用 webgrid 在编辑模式下以表格格式显示数据。当我的应用程序是运行时，文本框会以带有数据的表格格式出现。当用户更改文本框中的现有数据并单击提交按钮时，将调用我的服务器端操作，但没有数据传递到那里，这导致我的 List<UserModel> oUserModel 始终为 null

我在这里粘贴我的视图和操作代码。

查看代码

@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" />
}

操作代码

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;
        }
    }

请突出显示我犯了什么错误，阻止了表格数据传递给服务器端操作。

屏幕截图

谢谢

Answer 1

问题出在这里grid.Column(null, null, format: @<input type="hidden" name="IDHidden" value="rowNum + 1" />),

现在已经解决了。完整代码

@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" />
}

控制器和动作代码

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; }
}

对于使用 webgrid 的文本框也是如此

razor 查看代码

@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>

}

控制器和动作代码

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; }              
    }

ASP.Net MVC 面临将可编辑表格数据传递给操作的困难

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

asp.net-mvc

webgrid

查看代码

操作代码

屏幕截图

控制器和动作代码

对于使用 webgrid 的文本框也是如此

razor 查看代码

控制器和动作代码