Page rendering Asp.net Disabledcssclass

Asked

Viewed 115 times

1

I have the following problem, I have this code on a page:

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

this page is loaded in two moments, when I will add records and when I will consult. When I edit the page, these buttons must be disabled. So I run the code in the codebehind below:

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

so these Htmls elements are rendered this way:

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

I know Framework 4.0 defines this style sheet "aspNetDisabled" when an element is disabled, but the problem is that it is overwriting the bootstrap css, which formats the button layout.

Have some configuration so that it does not overwrite style classes?

c# css asp.net webforms
  • 1

    Try using in HTML CssClass ASP.NET, instead of class. Or add the classes in codebehind thus: btnSalvar.Attributes.Add("class", "classe-que-eu-quero");.

  • I didn’t even notice I was using the class instead of Cssclass, that’s right..

3 answers

0

What you can try is to put the attribute is to use the 

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

and by jquery remove the class as user actions.

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

You can also search the disabled class’s css file and put ! Important so it can be rendered as a priority. See the options to use Gularjs or jquery to manipulate the front end, it’s easier and the back end is bank and business rules. With Angular a simple indication type

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

that is if the form is not valid and some required field is missing, this button is automatically disabled and you do not need to manipulate client-side in the back end. You can do the same with jquery, but it goes a little bit more code.

Documentation of Angularjs

  • Thanks, but just change the css tag to Cssclass, which already solved.

0

You can use the Button Cssclass property and change it so that the bootstrap css is not rewritten.

btnSalvar.Enabled = false;
btnSalvar.CssClass = "btn btn-outline-secondary";
btnCancelar.Enabled = false;
btnCancelar.CssClass = "btn btn-outline-secondary";

  • Thanks, but just change the css tag to Cssclass, which already solved.

0


In accordance with Douglas Garrido commented, all I had to do was change the css tag to Cssclass, which I already solved, it was a lot of distraction for me not to notice it, and I didn’t even think it would give this problem.

even because with the rendering compatibility mode (controlRenderingCompatibilityVersion) configured for 3.5, this error did not occur.

Browser other questions tagged c# css asp.net webforms

You are not signed in. Login or sign up in order to post.