DataGrid 中单选按钮列的客户端验证

引言

通常情况下，需要在 DataGrid 中包含一个单选按钮列。例如，一个包含用户详细信息和单选按钮的网格，用于从用户列表中选择一个用户。当网格中的用户发生变化时，之前的选择应该被取消。

在客户端实现这一点可以减少服务器和客户端之间的通信，从而减少网络流量。

以下示例将说明如何实现这一点。

第 1 节：ASPX 代码

从数据库中获取用户详细信息并填充到 DataSet 中。将 DataSet 作为 DataGrid 的数据源。

<form id="frmSecurity" method="post" runat="server">

<asp:datagrid id="dgrUserAcctList" runat="server" GridLines="Horizontal" >
 <Columns>
  <asp:TemplateColumn>
    <ItemTemplate>
      <asp:RadioButton id="radUserAccount" runat="server" Text=''></asp:RadioButton>
    </ItemTemplate>
  </asp:TemplateColumn>
  <asp:BoundColumn Visible = "False" DataField="USER_ID"></asp:BoundColumn>
  <asp:BoundColumn DataField="USER_NAME" HeaderText="User” </asp:BoundColumn>
  <asp:BoundColumn DataField="USER_DEPT" HeaderText="Deparatment "></asp:BoundColumn>
  <asp:BoundColumn DataField="USER_ROLE" HeaderText="Role"></asp:BoundColumn>
  </Columns>
</asp:datagrid>
</form>

第 2 节：代码隐藏文件 (ASPX.vb)

在代码隐藏文件中，实现 DataGrid 的 ItemDataBound 事件如下

Private sub dgrUserAcctList _ItemDataBound(ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
        Handles dgrUserAcctList.ItemDataBound
    Try
        If e.Item.ItemIndex > -1 Then
            Dim strSelRadio As String = _
                e.Item.Cells(0).FindControl("radUserAccount ").ClientID()
            CType(e.Item.FindControl("radUserAccount "), _
                RadioButton).Attributes.Add("onClick", _
                "fnCheckSel('" + strSelRadio + "')")
        End If
    Catch ex As Exception
        //Exception handling 
    End Try
End Sub

第 3 节：JavaScript 代码

现在可以使用 JavaScript 编写客户端验证代码，如下所示

function fnCheckSel(intObjId)
{
 var strSceTypeId; 
 strSceTypeId = intObjId + "1"
 for (var i=1; i<document.forms(0).length; i++)  
  { if(document.forms(0).elements[i].id )
   { if(document.forms(0).elements[i].id.indexOf("radUserAccount")!=-1)
    {if (document.forms(0).elements[i].id.indexOf("radUserAccount1")==-1)
     {document.forms(0).elements[i].checked=false
      }}}} //end for
 document.getElementById(intObjId).checked=true
}//end function

同样，如果至少选择一个用户是强制性的，可以使用以下函数在表单提交时进行验证

function fnCheckVal(intObjId)
{
 var found_it ;
 for (var i=1; i<document.forms(0).length; i++)   
 { if(document.forms(0).elements[i].id )
  { if(document.forms(0).elements[i].id.indexOf("radUserAccount")!=-1) 
   {if (document.forms(0).elements[i].checked)
    {// Set the flag if any radio button is checked
       found_it = true;
       break;
     }}}} 
 if(!found_it)
 {alert("Select an Account");
  return false;
 }
 else 
 {return true;
  } 
}

就是这样。