1

Estou com o seguinte problema, tenho esse código em uma página:

<div class="modal-footer">
    <asp:Button runat="server" ID="btnCancelar" Text="Cancelar" class="btn btn-sm btn-danger" data-dismiss="modal" Width="90px" />
    <asp:Button runat="server" ID="btnSalvar" Text="Gravar" class="btn btn-sm btn-primary" ClientIDMode="Static" Width="90px" OnClick="btnSalvar_Click" />
</div>

essa página é carregada em dois momentos, quando vou adicionara registros e quando vou consultar. Quando edito a página, esse botões deve estar desabilitados. Assim eu executo o código no codebehind abaixo:

btnSalvar.Enabled = false;
btnCancelar.Enabled = false;

assim esse elementos HTMLs são renderizados dessa forma:

<div class="modal-footer">
    <input type="submit" name="btnCancelar" value="Cancelar" id="btnCancelar" disabled="disabled" class="aspNetDisabled" data-dismiss="modal" style="width:90px;">
    <input type="submit" name="btnSalvar" value="Gravar" id="btnSalvar" disabled="disabled" class="aspNetDisabled" style="width:90px;">
</div>

Sei que o Framework 4.0 define essa folha de estilo "aspNetDisabled" quando um elemento é desabilitado, mas o problema é que ele está sobrescrevendo os css do bootstrap, que formata o layout do botão.

Tem alguma configuração para que não sobrescreva as classes de estilo?

2
  • 1
    Tenta utilizar no HTML CssClass do ASP.NET, ao invés de class. Ou adicione as classes no codebehind assim: btnSalvar.Attributes.Add("class", "classe-que-eu-quero");. Commented 13/01/2017 às 18:50
  • Nem reparei que estava usando o class ao invés do CssClass, era isso mesmo.. Commented 13/01/2017 às 19:14

3 Respostas 3

0

O que você pode tentar é colocar o atributo é utilizar a

class="btn btn-sm btn-danger disabled"

e por jquery remover a classe conforme as ações do usuário.

<script>
$( "#btnEnviar" ).onclick( function(){
    $( "#btnSalvar" ).addClass( "disabled" );
    $("#btnSalvar").removeClass("disabled");
});
</script>

Você pode também buscar no arquivo css da classe disabled e colocar !important para que possa ser renderizado como prioridade. Consulte as opções de utilizar angularjs ou jquery para manipular o front-end, é mais fácil e o back-end fica por conta de banco e regras de negócio. Com o Angular uma simples indicação tipo

 <button type="submit" class="btn btn-default btn-sm" ng-disabled="!form.$valid">Enviar</button>

ou seja se o formulário não é válido e falta alguma campo requerido, é automaticamente desativado este botão e você não precisa manipular client-side no back-end. Dá para fazer o mesmo com jquery, mais vai um pouco mais de código.

Documentação do AngularJs

1
  • Obrigado, mas bastava alterar a tag css para CssClass, que já resolveu. Commented 13/01/2017 às 19:18
0

Você pode utilizar a propriedade CssClass do Botão e alterar para que o css do bootstrap não seja reescrito.

btnSalvar.Enabled = false;
btnSalvar.CssClass = "btn btn-outline-secondary";
btnCancelar.Enabled = false;
btnCancelar.CssClass = "btn btn-outline-secondary";
1
  • Obrigado, mas bastava alterar a tag css para CssClass, que já resolveu. Commented 13/01/2017 às 19:18
0

Conforme Douglas Garrido comentou, bastava eu alterar a tag css para CssClass, que já resolveu, foi muita distração minha não ter reparado nisso, e nem imaginava que isso dava esse problema.

até porque com o modo de compatibilidade de renderização (controlRenderingCompatibilityVersion) configurado para 3.5, esse erro não acontecia.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .