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

Question

我在这方面遇到了很多麻烦。我到处寻找，所以我希望有人可以向我解释如何做到这一点或告诉我。这是我的问题：

我有一个用 ASP.Net 创建的数据绑定项 (ItemTemplate) 填充的 DataGrid。

我之所以使用ItemTemplates 而不是常规的DataBound 字段是为了启用DataGrid 的编辑模式。在我的ItemTemplates 中，我有显示数据的标签和两个选项按钮（编辑/删除）。我的按钮在后面的代码中工作（C#）。

Edit 将 DataGrid 置于编辑模式。在EditItemTemplates 中，我有DropDownLists、TextBoxes 和一个保存 按钮来代替编辑 按钮。

Save 按钮也适用于我为它编写的代码。总而言之，DataGrid 工作得很好，并且可以整齐地显示所有内容。但是，我希望 Save 按钮完成最后一项工作：我希望它检查文本框并验证输入的值是否符合我设置的标准（保持请记住，这些都在EditItemTemplates)。

我已经编写了 Javascript 来检查验证。我想要显示一个模式窗口（我已经设置了），并且我想要更改相关文本框的 CSS。

我想使用 Javascript 执行此操作，但我的问题是我无法检查 Save 按钮来创建 Click 事件，并且我无法“定位”要验证的文本框他们。有没有办法在 DataGrid 处于编辑模式时“找到”这些元素？

如果有帮助，这里有一小部分用于创建 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>

也许我应该重新提出我的问题：感谢 Zetlen，我设法“找到”TextBoxes。我还设法获得了这些值。现在...如何使用这些值来测试验证？

这是我用来获取值的代码：

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

Answer 1

ASP.NET 网络表单很难在 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。

Answer 2

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

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