Question

我遇到这么多麻烦。我到处寻找，所以我希望有人可以向我解释如何做或者告诉我。这是我的问题：

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

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

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

保存按钮也适用于我为其编写的代码。总而言之，DataGrid工作得很漂亮，整齐地显示一切。但是，我希望保存按钮有一个最终作业：我希望它检查TextBox并验证输入的值是否符合我设置的条件（保留记住这些都在EditItemTemplates）。

我已经编写了Javascript来检查验证。我想要一个模态窗口（我已经设置）来显示，我希望有问题的TextBoxes的CSS改变。

我想用Javascript做这个但我的问题是我无法检查保存按钮来创建Click事件而我无法'找到'TextBoxes验证他们。有没有办法在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>

也许我应该重新解决我的问题：我设法'找到'TextBoxes感谢Zetlen。我也设法获得了价值。现在......如何使用这些值来测试验证？

以下是我用来获取值的代码：

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

Answer 1

ASP.NET webforms很难在JavaScript中使用，因为HTML元素的ID在页面生命周期中会发生变化！您正在调用“EditOper”的输入将获得类似“dgCamSizer_ctl102_EditOper”的HTML ID。您可以做的一件事是在DOM元素引用的缓存中的pageload上收集这些元素。我建议使用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，Save按钮不应该太难找到。

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++;
 });

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

2 个答案: