如何将焦点移动到Web Grid MVC中的下一行

Question

我有一个ASP .NET MVC应用程序。在其中一个视图中，这是一个局部视图，我有一个绑定到模型的Web Grid。两个列可以在网格中编辑。用户希望通过按Tab键在可编辑单元格之间导航。当用户选中最后一个可编辑列时，需要保存该行。

这是我的网格

        var grid = new WebGrid(source: Model, selectionFieldName: "SelectedRow",
            rowsPerPage: ((Session["ShowAll"].ToString() == "true") ? 200 : 8),
            columnNames: new[] { "ID", "PathUse", "Design_No", "Prod_No", "Seq_No", "Seq_Position", "MCLSFlag", "Status" });
var shal = Session["ShowAll"].ToString();

     <div id="gridContent">

    @grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-row-style",
    htmlAttributes: new { id = "LSgrid" },
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    columns: grid.Columns(

            grid.Column("ID", header: "ID", format: @<text>@item.ID</text>, style:"colID"),
            grid.Column("PathUse", header: "Image", format: @<img class="img-thumbnail" width="100" height="180" src="@item.PathUse" />, style:"colPath"),
            grid.Column("DesignNo", header: "DesignNo", format: @<text>@item.Design_No</text>, style:"colDesignNo"),
            grid.Column("StyleNo", header: "StyleNo", format: @<text>@item.Prod_No</text>, style:"colStyleNo"),
            grid.Column("PageNo", header: "PageNo", format:@<input id="valPageNo" type="number" value="@item.Seq_No"/>, style:"colPageNo" ),
            grid.Column("Position", header: "Position", format:@<input id="valPosition" type="number" value="@item.Seq_Position" /> , style:"colPosition"),
            grid.Column("MCLSFlag", header: "MCLSFlag", format: @<input id="valMCLSFlag" type="checkbox" value="@item.MCLSFlag" />, style: "colMCLSFlag"),
            grid.Column("Status", header: "Status", format: @<text>@item.Status </text>, style: "colStatus"),
            grid.Column(header: "rNo", format: item => item.WebGrid.Rows.IndexOf(item) + 1, style:"colRowNo")
                     )
    )

</div>

这是我捕获键码并使用控制器方法保存行的脚本

     $(document).ready(function () {
       $('.colPosition').on("keydown", function (e) {
           var eCode = e.keycode || e.which


           if (eCode == 9) {

               iid = $(this).closest('tr').find('td.colID').text();

               idesign = $(this).closest('tr').find('td.colDesignNo').text();

               istyle = $(this).closest('tr').find('td.colStyleNo').text();

               var ides1 = $(this).closest('tr').find('#valPageNo').val();

               var ipos1 = $(this).closest('tr').find('#valPosition').val();

               var irno = $(this).closest('tr').find('td.colRowNo').text();

               $.ajax({
                   url: '@Url.Action("SaveLineSheetGirdRow", "LSControl")',
                   type: 'POST',
                   cache: false,
                   data: { id: iid, ipgNo: ides1, ipos: ipos1, bmcls: false, rownum:irno },
                   success: function (result) { refreshImageGrid(result);}
               }).done(function (result) {

                   console.log("saved");
                   return false;
               });
               function refreshImageGrid(result) {

                   $('#MainPage').html(result);
                   alert("After MainPage Load");
                   alert($(this).closest('tr').next().find('#valPosition').val());
                   $(this).closest('tr').next().find('#valPosition').focus();
               }
           }
   });
    });

然而，这不起作用。

任何方向都会非常感谢！

编辑.. 根据Stephen的建议，对事件捕获和回调函数进行了以下更改。在回调部分中获取不正确的类型错误，它指的是行变量

     $(document).ready(function () {
       $('.colPosition').on("keydown", function (e) {
           var eCode = e.keycode || e.which

           //alert("this code .");
           if (eCode == 9) {
               //alert($(this).closest('tr').);
               // alert("position tab pressed");
               var row = $(this).closest('tr');
               alert(row.next().find('#valPosition').val())
               iid = $(this).closest('tr').find('td.colID').text();
            //   alert(iid);
               idesign = $(this).closest('tr').find('td.colDesignNo').text();
            //   alert(idesign);
               istyle = $(this).closest('tr').find('td.colStyleNo').text();
             //  alert(istyle);
               var ides1 = $(this).closest('tr').find('#valPageNo').val();
           //    alert(ides1);
               var ipos1 = $(this).closest('tr').find('#valPosition').val();

               var irno = $(this).closest('tr').find('td.colRowNo').text();
               alert(irno);
          //     var imcls = $(this).closest('tr').find('#colMCLSFlag').val();
               $.ajax({
                   url: '@Url.Action("SaveLineSheetGirdRow", "LSControl")',
                   type: 'POST',
                   cache: false,
                   data: { id: iid, ipgNo: ides1, ipos: ipos1, bmcls: false, rownum:irno },
                   success: function (result) { refreshImageGrid(result);}
               }).done(function (result) {

                   console.log("saved");
                   return false;
               });
               function refreshImageGrid(result,row) {
                  // alert("refresh");
                   $('#MainPage').html(result);
                   alert("After MainPage Load");
                   alert(row.next().find('#valPosition').val());
                   row.next().find('#valPosition').focus();
               }
           }
   });
    });