c#中gridview中的复选框

checkbox in gridview in c# validation in javascript

本文关键字：复选框 gridview      更新时间：2023-09-26

我有一个gridview与2 ItemTemplates-一个复选框，一个文本框我必须使用Javascript验证4如果一个复选框被选中，而数量没有写在复选框里!!我必须通知客户，我该怎么办?复选框和文本框位于gridview的同一行。请把剧本给我提前感谢。

如果您正在使用jQuery，这可以很容易地做到。创建一个函数，将"this"作为参数，并在复选框"Click"上将"this"传递给函数。然后使用jQuery的。prev()方法，你可以得到网格的"tr"行

 var trContainer = $(this).prev("tr")

一旦你有了just do(使用jQuery查找)

//如果在

行中只有一个文本框
 var txtBox = $(trContainer).find("input");

//如果你有多个文本框

//为文本框添加一些虚拟的css类，例如txtValidateClass

var txtBox = $(trContainer).find(".txtValidateClass");

有了这个文本框之后勾选

if($(txtBox).val().trim() == ""){
      //Show error
}else{
    //Continue
}

这个问题很老了，但万一有人需要一个只适用于JavaScript的解决方案，这里是如何解决的。

1。c# Part (In Page_Load Method)

在Page_Load中我们需要添加一个小hack:

foreach(GridViewRow row in YourGridViewControlID.Rows)
{
    if (row.RowType == DataControlRowType.DataRow )
    {
      ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:ShowErrorMessage(" + (row.RowIndex ) + ");");
    }
}

这样，我们在GridView的每个CheckBox的OnChange事件上添加JavaScript函数调用。特殊的是，我们无法通过HTML实现的是，我们在JavaScript函数中传递了每个函数的Row Index，这是我们稍后需要的。

2。关于HTML Part

的一些重要注意事项

确保Checkbox控件和Textbox控件，但更重要的是您的GridView控件具有静态id，使用ClientIDMode="Static"如下所示:

<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />

对于GridView控件:

<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">

3。Javascript部分

然后在JavaScript文件/代码中:

function ShowErrorMessage(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];
  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked && rowTextBox.value === '') {
    // Empty textbox therefore show error message.
    return;
  }
  // Optionally hide the error message here.
}

4。关于上述实现的一些注意事项

    请注意，在JavaScript代码中，在
    这一行:var currentGridViewRow = GridView.rows[Row + 1];
    [Row + 1]对于实现此工作非常重要，不应该更改。
  • 最后:

以下行:

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

.cells[2]和.cells[0]对你来说可能不同，所以你必须在[]中选择正确的数字。
通常，这将是从0开始计数的GridView的列号。

如果你的CheckBox是在GridView的第一列，那么你需要.cells[0]。
如果你的TextBox在GridView的第二列，那么你需要.cells[1](在上面的例子中，TextBox在我的GridView的第三列，因此，我使用.cells[2])。

5。一个小小的补充

上面的代码是问题所有者描述问题的代码。

但是我认为，在这种情况下，隐藏错误消息时，已经对文本框进行了更改也是一个好主意。这是当用户选中复选框而文本框为空时，得到一个错误消息，然后在文本框中键入一些内容，我们应该隐藏错误消息。

简而言之，这里是对上述注释的补充(为了简单起见，我删除了其他代码，但如果你想保留整个功能，你应该保留这两个代码):

下面是c#的修改: 
foreach(GridViewRow row in YourGridViewControlID.Rows)
{
    if (row.RowType == DataControlRowType.DataRow )
    {
      ((TextBox) row.FindControl("YourTextBoxID")).Attributes.Add("onkeyup", "javascript:HideErrorMessage(" + (row.RowIndex ) + ");");
      ((TextBox) row.FindControl("YourTextBoxID")).Attributes.Add("onblur", "javascript:HideErrorMessage(" + (row.RowIndex ) + ");");
    }
}

可以在这里看到，他也添加了onblur事件，因为这个事件与onkeyup的组合，我们确保代码将在所有情况下执行。

下面是JavaScript修改:

function HideErrorMessage(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];
  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked && rowTextBox.value !== '') {
    // Hide the error message here.
  }
}
相关文章：