創建按鈕單擊事件並使用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造成太大的影響。