CODEWITHSUNDEEP
asp.netcssjquery-ui
Shahin
Shahin

Reputation: 12843

jQuery UI Button Style for ASP.NET Button

How can I use jQuery UI buttons style for my ASP.NET buttons? How can I do it in my Skin or some other way?

Upvotes: 2

Views: 5364

Answers (4)

Mitr Raiputta
Mitr Raiputta

Reputation: 199

In JavaScript, to add button class:

<script> 
    $(document).on('ready', function () {
        document.getElementById('<%=btnCreate.ClientID%>').className = 'btn disabled';
    });
</script>

In JavaScript, to remove button class

<script> 
    $(document).on('ready', function () {
        document.getElementById('<%=btnCreate.ClientID%>').className = '';
    });
</script>

In ASP.NET CodeBehind:

<asp:Button ID="btnCreate" runat="server" Text="Create Account"
    Class="btn disabled" OnClick="btnCreate_Click" />

Upvotes: 0

Joe Johnston
Joe Johnston

Reputation: 2936

Remember all asp.net buttons are rendered as submits so add the following script: 

// All buttons     
$(":submit").addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only');

or 

// A specific button
$('#<%= button1.ClientID %>').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only');

Upvotes: 0

Andrea Turri
Andrea Turri

Reputation: 6500

asp.net button are different from normal button. To style it the best way is this:

<asp:button runat="server" ID="btnAspNet">Click me</asp:button>

get the correct ID from the asp.net button in jQuery

var btn = $('[id$=btnAspNet]');

add style from jQuery UI

btn.addClass('Ui class name');

Upvotes: 1

Ahmad
Ahmad

Reputation: 24847

Can you not try to use the CssClass property of the button and set it the relevant Jquery CSS class for that button?

This possibly might work - you can verify what the correct Jquery classes are and update

<asp:Button ID="btnEnter" runat="server" Text="Jquery Asp Button" CssClass="ui-button ui-widget" />

Edit:

Just thought of this now, but since the Asp button results in and if you are targeting all submit buttons on a page

<input type="submit" name="btnEnter" value="Click me!" id="btnEnter">

you could use some Jquery which selects all the inputs where the type equals submit and apply the Jquery CSS classes in one swoop.

I think it will be like this (syntax not verified)

$(":submit").addClass('ui-button ui-widget');

Upvotes: 4

Related Questions