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

Question

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

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

我在常规DataBound字段上使用ItemTemplates原因是启用DataGrid的“编辑模式”。 在我的ItemTemplates ，我有显示数据的标签和两个选项按钮（Edit / Delete）。 我已经在（C＃）后面的代码中使用了按钮。

“编辑”将DataGrid置于“编辑模式”。 在EditItemTemplates我有DropDownLists ， TextBoxe和一个Save按钮来代替Edit按钮。

保存按钮还可以与我为此编写的代码一起使用。 总而言之，DataGrid可以很好地工作，并且可以整洁地显示所有内容。 但是，我要完成“ 保存”按钮的最后一项工作： 我希望它检查TextBoxes并验证输入的值是否与我设置的条件匹配 （请记住，这些值在EditItemTemplates ）。

我已经写了Javascript，它将检查验证。 我希望显示一个模态窗口（已经设置），并且希望更改有问题的TextBoxes的CSS。

我想使用Javascript来执行此操作，但是我的问题是我无法检查“ 保存”按钮来创建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 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造成太多干扰。

Answer 2

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

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