创建按钮单击事件并使用Javascript验证文本框

Question

我对此有太多的麻烦。我到处寻找，所以我希望有人可以向我解释如何做到这一点或向我展示。这是我的问题：

我有一个DataGrid填充DataBound项目（ItemTemplate），它是使用ASP.Net创建的。

我对ItemTemplates超过常规DataBound字段的原因是为了启用DataGrid的编辑模式。在我的ItemTemplates中，我有标签来显示数据和两个选项按钮（编辑/删除）。我在后面的代码中使用了按钮（C＃）。

编辑将DataGrid置于编辑模式。在EditItemTemplates我有DropDownLists,TextBoxe s和一个保存按钮代替编辑按钮。

保存按钮也适用于我为它编写的代码。总而言之，DataGrid工作得非常漂亮，并且整齐地显示了一切。然而，我想要一个最终的工作保存按钮来做：我希望它检查文本框并验证输入的值是否符合我设置的标准（请记住这些是在EditItemTemplates）。

我已经写了Javascript，将检查验证。我想要一个模式窗口（我已经设置）来显示，我希望有问题的文本框的CSS可以更改。

我想这样做，使用Javascript，但我的问题是，我可以不检查保存按钮以创建Click事件，我不能“定位”的文本框，以验证它们。 DataGrid处于编辑模式时，是否可以“找到”这些元素？

下面是用于创建数据网格，如果它有助于代码的小位：

<asp:DataGrid ID="dgCamsizer" CssClass="data" runat="server" AutoGenerateColumns="False" 
       GridLines="None" OnItemCommand="dgCamsizer_ItemCommand" ShowHeader="true"> 
       <Columns> 
        <asp:TemplateColumn HeaderStyle-CssClass="infoHeaderDG"> 
         <HeaderTemplate> 
          Operator</HeaderTemplate> 
         <ItemTemplate> 
          <asp:Label ID="Operator" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>' 
           runat="server" /></ItemTemplate> 
         <EditItemTemplate> 
          <asp:TextBox ID="EditOper" Width="40px" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>' 
           runat="server"></asp:TextBox></EditItemTemplate> 
         <HeaderStyle CssClass="infoHeaderDG"></HeaderStyle> 
        </asp:TemplateColumn> 

        <asp:TemplateColumn HeaderStyle-CssClass="infoHeaderDG"> 
         <ItemTemplate> 
          <asp:Button ID="Edit" Text="Edit" CommandName="Edit" runat="server" /></ItemTemplate> 
         <EditItemTemplate> 
          <asp:Button ID="Save" Text="Save" CommandName="Save" runat="server" /></EditItemTemplate> 
         <HeaderStyle CssClass="infoHeaderDG"></HeaderStyle> 
        </asp:TemplateColumn> 
    </Columns> 
</asp:DataGrid> 

也许我应该重新阶段我的问题：我设法“发现”的TextBoxes感谢Zetlen。我也设法获得了价值。现在...我如何使用这些值来测试验证？

这里是我用来获取值码：

$("#<%=dgCamsizer.ClientID %> :text").each(function() { 
         alert($(this).val()); 
        }); 

Answer 1

所以我设法解决自己的问题，并回答我自己的问题。我能够获得所有TextBoxes的ID，我甚至将它们放入一个数组中以用于我的验证。以下是我以前所做的全部内容：

var i = 0; 
var data = []; 
$("#<%=dgCamsizer.ClientID %> :text").each(function() { 
    data[i] = $(this).attr("id"); 
    i++; 
}); 

Answer 2

ASP.NET Web表单难以在JavaScript中工作，因为你的HTML元素的ID在页面生命周期过程中改变！您调用“EditOper”的输入将获得类似“dgCamSizer_ctl102_EditOper”之类的HTML ID。你可以做的一件事是在页面加载DOM元素引用缓存中收集这些元素。我建议使用jQuery或类似的DOM查询库。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $editorElms = {}, 
      idSeparator = "_"; // the underscore is ASP.NET's default ID separator, but this can be changed if you wish with the IDSeparator property. 
     $('#dgCamSizer input').each(function() { 
      $editorElms[this.id.split('_').pop()] = $(this); 
     }); 

    // now you can access every input using the $editorElms hash. 
    // e.g.  
     function someValidationRoutine() { 

      if (!$editorElms.EditOper.val()) { 
       someErrorDisplayer("EditOper must not be blank."); 
       return false; 
      } 

     } 
    }) 
</script> 

而且，再次使用jQuery，保存按钮不应该太难找到。

var $saveButton = $('#dgCamSizer :submit[value=Save]'); 

所以你可以绑定事件那样：

$saveButton.click(function(e) { 
    if (!someValidationRoutine()) { 
      e.preventDefault(); 
    } 
}); 

这还不是最高效的解决方案 - 这种复杂的选择总是有点慢。但它可以完成工作，而不会对DataGrid造成太大的影响。