按 Tab 键自动更新 GridView 行并将下一行置于编辑模式

• 下载源代码 - 47.8 KB

引言

对于使用模板列的GridView，当一行被置于编辑模式并且最后一个单元格的控件被选中时，当用户按下TAB键时，它会自动更新该行的更改，然后将下一行置于编辑模式。

背景

客户需求是在编辑GridView行时，在最后一个单元格上按下TAB键时，保存该行的更改并将下一行置于编辑模式。这允许他们快速进行批量更新，而无需停止使用鼠标单击特定行的“更新”和“编辑”按钮。

当我开始编写这段代码时，我以为我可以简单地生成ASP.NET GridView生成的那些神秘的对象名称（例如gvPunchList$ctl103$ctl100），直到我意识到这些名称会根据回发和事件而变化。我为此苦恼不已，试图弄清楚GridView/ASP.NET是如何做到这一点的，直到我找到了上述方法。现在无需理解GridView的内部工作原理了。

Using the Code

以下代码被添加到GridView的RowEditing事件中

//This is the control found in the last cell of the GridView template:

DropDownList dlc = 
  (DropDownList)gvPunchList.Rows[e.NewEditIndex].FindControl("dlCategory");

//////////////////////////////////////////////////////////////////////
// TAB KEYPRESS ON LAST CONTROL TO AUTO SAVE AND EDIT NEXT RECORD:
//////////////////////////////////////////////////////////////////////
// This Code Block wires up the category drop down list so that
// if the user preses TAB while on that control, the edit record
// will be saved, and the next record will be brought into edit mode:
//////////////////////////////////////////////////////////////////////

PostBackOptions myPostBackOptions = new PostBackOptions(this);
myPostBackOptions.AutoPostBack = false;
myPostBackOptions.RequiresJavaScriptProtocol = true;
myPostBackOptions.PerformValidation = true;

//This gets the required javascript code that fires 
//when the UPDATE link button is clicked:
String evt = Page.ClientScript.GetPostBackClientHyperlink(
              sender as GridView, "Update$" + 
              e.NewEditIndex.ToString());

// iNewNavigate is used to determine the target row.
// if we are at the end of the GridView rows we will 
// go back to the first row and place it in edit mode:
int iNewNavigate = 0;
if (gvPunchList.Rows.Count - 1 != e.NewEditIndex)
{
    iNewNavigate = e.NewEditIndex + 1;
}
else
{
    iNewNavigate = 0;
}

// Get the javascript that is used to place a gridview row
// into edit mode and specify the next row //as the target:
string evt2 = Page.ClientScript.GetPostBackClientHyperlink(
                sender as GridView, "Edit$" + iNewNavigate.ToString());

// Add to the control onkeydown javascript event code
// to check if the TAB key has been pressed
// If it was, and fire off the events to execute
// the intrinsic Update event, and place the next row
// into Edit mode:

StringBuilder js = new StringBuilder();
js.Append(@"if(event.which || event.keyCode)");
js.Append(@"{if ((event.which == 9) || (event.keyCode == 9)) ");
js.Append("{" + evt + ";" + evt2 + ";return false;}} else {return true}");

// Add this javascript event to the last control in the GridView Row:
dlc.Attributes.Add("onkeydown", js.ToString());
//////////////////////////////////////////////////////////////////////////
// END TAB KEYPRESS AUTOSAVE/EDIT
/////////////////////////////////////////////////////////////////////////

上述代码块中的注释应该解释了正在发生的事情。基本上，我们自动构建了在GridView行最后一个单元格中找到的控件所需的postback方法，并在该控件获得焦点并且按下TAB键时触发该postback方法。TAB键通过JavaScript keyCode方法检测。

GetPostBackClientHyperlink用于向我们提供一个字符串，其中包含触发GridView CommandField（编辑或更新，也可以是SELECT）的UPDATE或EDIT事件所需的必要JavaScript语句。

在创建我们的JavaScript键陷阱和客户端postback方法之后，我们只需将其绑定到最后一个GridView行单元格的onkeydown事件中。

关注点

不要试图破译GridView创建的生成的客户端代码，尤其是不要试图以编程方式重新创建它创建的唯一的<TD>名称！

历史

• 2007/07/26 - 初始实现。