CODEWITHSUNDEEP
c#asp.netforms
goutam
goutam

Reputation: 657

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

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.

Upvotes: 0

Views: 265

Answers (4)

sawbeanraz
sawbeanraz

Reputation: 177

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.

result

Upvotes: 1

Dexion
Dexion

Reputation: 1101

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

Upvotes: 0

sawbeanraz
sawbeanraz

Reputation: 177

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

Upvotes: 1

Paul Abbott
Paul Abbott

Reputation: 7211

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.

Upvotes: 2

Related Questions