Как назначить другой стиль кнопкам «Вставить» и «Отмена» в DetailsView?

Question

У меня есть DetailsView в режиме вставки:

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

Обе кнопки Insert/Отмена получить тот же стиль, конечно.

Можно ли установить эти два отдельно, чтобы быть одним синим и одним желтым?

В 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?

Answer 1

Самым простым решением было бы преобразовать «New, Insert , Отменить "CommandField в TemplateField. Если вы используете редактор WYSIWYG, для этой кнопки есть кнопка ОК. Это создаст следующий (цензурный) код, который вы можете легко стилизовать.

 <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», которые могут быть настроены в таблице стилей.

Другие ноты:

1. Когда кнопки необходимы (НЕ LinkButtons) не использовать закрывающий тег (</asp:button>) - заменить его инлайн / марки. В противном случае это не сработает.

2. При использовании режима только вставки, цензурный ItemTemplate не равен - удалите его.

3. Избегайте использования элемента управления ControlStyle, в противном случае это может привести к перегрузке класса.

Answer 2

Использование 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> 

Answer 3

Благодаря Капилом-Ханделвал это решение с помощью 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>