如何爲DetailsView的插入和取消按鈕分配不同的樣式？

我有一個DetailsView在插入模式：如何爲DetailsView的插入和取消按鈕分配不同的樣式？

<asp:CommandField ShowInsertButton="True" ButtonType="Button" ControlStyle-CssClass="myButton" InsertText="My Insert text" />

兩個按鈕插入/刪除得到相同的風格，當然。

是否可以將這兩個樣式分別設置爲一個藍色和一個黃色？

在FormView控件可以單獨定義的按鈕是這樣的：

<asp:Button CommandName="Insert" Text="Insert" class="myButtonStyle1" ID="myButtonID1" runat="server" CausesValidation="True" /> 

<asp:Button CommandName="Cancel" Text="Cancel" class="myButtonStyle2" ID="myButtonID2" runat="server" CausesValidation="False" />

有東西給DetailsView控件相似？

來源

2012-05-23 Different111222

你能發表detailsview提供的html嗎？您可以使用Javascript在按鈕上設置樣式。 –

好的，如果我可以給他們自己的名字，我可以通過後面的C＃代碼訪問它們，對吧？下面是有關HTML： ' ' – Different111222

最簡單的解決辦法是將您的「新建，插入，取消「CommandField到模板領域。如果您使用WYSIWYG編輯器，則在OK按鈕上方有一個按鈕。這將生成以下（審查）的代碼，您可以輕鬆的風格。

 <asp:TemplateField ShowHeader="False"> 
      <InsertItemTemplate> 
       <asp:Button ID="LinkButton1" runat="server" CssClass="insertButton" CausesValidation="True" CommandName="Insert" Text="Insert" /> 
       &nbsp;<asp:Button ID="LinkButton2" runat="server" CssClass="cancelButton" CausesValidation="False" CommandName="Cancel" Text="Cancel" /> 
      </InsertItemTemplate> 
     </asp:TemplateField>

注：我添加了的CssClass屬性到按鈕下面用CSS類名「insertButton，cancelButton」，即都可以在你的樣式表來配置。

更多筆記：

當需要按鈕（NOT了LinkButton）不使用結束標記（</asp:button>） - 具有內嵌/標誌更換。否則，它將無法正常工作。
當使用僅插入模式時，被審查的ItemTemplate不是需要 - 將其刪除。
避免擁有ControlStyle控件，否則可能會導致類的推翻。

來源

2012-06-01 17:21:04 Zachary

好的工作，謝謝。我已更新您的解決方案以匹配我實際使用的解決方案。請參閱尾隨筆記。 – Different111222

使用jQuery（http://docs.jquery.com/Downloading_jQuery#Download_jQuery）：

<script src="../jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     var list = $("input[type=button]"); 
     list.each(function (itemIndex) { 
      if ($(this).val() == "Cancel") 
      { $(this).addClass("Cancel"); } 
      else { 
       if ($(this).val() == "Insert") 
       { $(this).addClass("Insert"); } 
      } 
     }); 
    }); 
</script>

只需添加兩個類（「插入」 & 「取消」）在你的CSS文件。例如：

<style type="text/css"> 
.Insert {background-color:Red;} 
    .Cancel {background-color:Black;} 
</style>

來源

2012-05-23 11:46:27

Kapil Khandelwal-我在哪裏放？我應該用我的類名（每個按鈕的幾個類名）替換addClass中的「插入」嗎？ – Different111222

@ Different111222只需在CSS文件中添加兩個類（「插入」和「取消」）。例如。 '.Insert {background-color :: red;} .Cancel {background-color :: black;}'把javascript代碼放在你的.aspx頁面上 –

Kapil Khandelwal-我把代碼放在的頭部，然後在Body ContentPlaceHolder（不是同一時間），向css中添加了插入和取消類，但沒有任何作用...我在哪裏準確地放置了jQuery函數（以前從未使用過jQuery），並且無法使用我的按鈕的常規樣式我使用（「myButton myButtonStyle1」）？ – Different111222

由於卡皮爾 - khandelwal這是使用jQuery的解決方案，這是在使用中直到從扎卡里新添加的答案：

<script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $("input").each(function() { 
       if ($(this).attr("type") == "submit") { 
        if ($(this).val() == "Insert") { $(this).addClass("Insert"); }; 
       }; 
       if ($(this).attr("type") == "button") { 
        if ($(this).val() == "Cancel") { $(this).addClass("Cancel"); }; 
       }; 
      }); 
     }); 
    </script>

來源

2012-06-01 16:46:57 Different111222

如何爲DetailsView的插入和取消按鈕分配不同的樣式？

回答

相關問題