Unable to modify the Form button in C# ASP.NET

Question

I have a very simple form built on a website using C#, ASP.NET. I am not able to modify the style of the Submit button in the form. I am not able to find the code of the button implementation. I am not using Visual Studio but just modifying the aspx and aspx.cs files. I think this is a very simple issue but I am really not able to find out what is happening here.

Following is the complete form wizard code.

    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server" Height="220px" Width="544px" OnCreatedUser="CreateUserWizard1_CreatedUser">
  <WizardSteps>
    <asp:CreateUserWizardStep runat="server">
      <ContentTemplate>
        <table border="0" style="font-size: 100%; width: 544px; height: 220px">
          <tr>
            <td align="center" colspan="2">
              <h2>
                                    CREATE NEW PORTAL USER  
                                    </h2> </td>
          </tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>
          <tr></tr>
          <tr>
            <td align="left" style="width: 110px">
              <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
            </td>
            <td>
              <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
              <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
                ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
            </td>
          </tr>
          <tr>
            <td align="left" style="width: 110px">
              <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
            </td>
            <td>
              <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
              <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
            </td>
          </tr>
          <tr>
            <td align="left" style="width: 110px">
              <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label>
            </td>
            <td>
              <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>
              <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword"
                ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
            </td>
          </tr>
          <tr>
            <td align="left" style="width: 110px">
              <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">E-mail:</asp:Label>
            </td>
            <td>
              <asp:TextBox ID="Email" runat="server"></asp:TextBox>
              <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" ErrorMessage="E-mail is required."
                ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
            </td>
          </tr>
          <tr>
            <td align="center" colspan="2">
              <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match." ValidationGroup="CreateUserWizard1"></asp:CompareValidator>
            </td>
          </tr>
          <tr>
            <td align="center" colspan="2" style="color: black">
              <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
            </td>
          </tr>
        </table>
      </ContentTemplate>
    </asp:CreateUserWizardStep>

    <asp:CompleteWizardStep runat="server"> </asp:CompleteWizardStep>
  </WizardSteps>
</asp:CreateUserWizard>

The submit button displays "Create User", but I have had no luck modifying it. The whole button appears right aligned as shown in the image below and I am not able to left align the button.

score 2 · Answer 1 · answered Jun 16 '16 at 22:08

2

Welcome to ASP.NET webforms, where you are, by design, abstracted from the HTML that is actually sent to the client.

You need to add a CreateUserButtonStyle-CssClass attribute to the CreateUserWizard (assuming you want to use CSS to style it).

<asp:CreateUserWizard runat="server" CreateUserButtonStyle-CssClass="someclass"...>

There are a whole lot of other options like CreateUserButtonStyle-BorderColor if you don't want to use CSS, but adding them is going to be very difficult without Visual Studio providing intellisense.

answered Jun 16 '16 at 22:08

Paul Abbott

7,065
3
27
45

1

The HTML of the button itself? Not really, it's created deep inside the compiled code for the `CreateUserWizard` control. Its attributes are built using the control's properties like `CreateUserButtonStyle-CssClass`. – Paul Abbott Jun 16 '16 at 22:35
Alright. I wanted to access the parent of that element as the button is left-aligned and now I find no way to access the row on which it exists. – goutam Jun 16 '16 at 22:36

score 1 · Answer 2 · answered Jun 16 '16 at 23:06

1

Use following template fields

StartNavigationTemplate
StepNavigationTemplate
FinishNavigationTemplate

After WizardSteps add following code

<FinishNavigationTemplate>
    <asp:Button ID="btnSave" run="server" Text="Custom Button Text" CausesValidation="true" CommandName="MoveComplete"/>
</FinishNavigationTemplate>

for more detail click here

answered Jun 16 '16 at 23:06

sawbeanraz

187
10

You had answered it twice. I accepted one answer. You can delete this answer. Thanks. – goutam Jun 20 '16 at 19:29

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

For CreateUserWizard, modify CreateUserButtonText property of the control.

In your case:

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" Height="220px" Width="544px" OnCreatedUser="CreateUserWizard1_CreatedUser" CreateUserButtonText="Custom Button Text">
.....

Another answer

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .wiz-button 
        {
            background-color: #ddd;
            padding:8px;
            border:1px solid #aaa;
            border-radius: 8px;
            float:left;
            margin-left:110px;
        }
    </style>
</asp:Content>


<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" Height="220px" Width="544px"
    CreateUserButtonText="Submit"
    CreateUserButtonStyle-CssClass="wiz-button">

Change CSS as required for class wiz-button. Refer to the result below.

edited May 23 '17 at 12:16

Community

1
1

answered Jun 16 '16 at 23:13

sawbeanraz

187
10

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.createuserwizard.aspx – sawbeanraz Jun 16 '16 at 23:15
I am also unable to align the button. The button is displayed inside of a table and I am not able to access the parent element of the button. – goutam Jun 17 '16 at 16:54
you can use CSS to control placement of button. However, the parent of the create user button have align=right by default. So float:left should do the job. Please see the edited answer – sawbeanraz Jun 20 '16 at 08:30
Exactly what I was looking for! – goutam Jun 20 '16 at 19:29

score 0 · Answer 4 · answered Jun 17 '16 at 06:25

0

Try to modify the button text with JQuery in document.ready.

answered Jun 17 '16 at 06:25

Dexion

1,101
8
14

Unable to modify the Form button in C# ASP.NET

4 Answers4