Skip to content

Commit 3e032f0

Browse files
csharpfritzcsharpfritz
authored
Fix129 Added button style and CausesValidation (#196)
* Added samples and tests for implementing style for the button component * Added CausesValidation feature to the Button
1 parent 591bd58 commit 3e032f0

File tree

18 files changed

+346
-5
lines changed

18 files changed

+346
-5
lines changed

‎docs/EditorControls/Button.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ It may seem strange that we have a Button component when there already is an HTM
55
- OnClick event handler
66
- OnClientClick JavaScript pointer
77
- OnCommand event handler with event bubbling
8+
- Button Style attributes and CssClass formatting
9+
- CausesValidation will control whether Form validation is triggered on click
810

911
## WebForms Syntax
1012

‎samples/AfterBlazorServerSide/Pages/ControlSamples/Button/CausesValidation.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page "/ControlSamples/Button/CausesValidation"
2+
@using BlazorWebFormsComponents.Validations
3+
4+
<h2>Causes Validation demo</h2>
5+
6+
<Nav></Nav>
7+
8+
<EditForm Model="@exampleModel" OnValidSubmit="@HandleSubmit" OnInvalidSubmit="@HandleSubmit">
9+
10+
<InputText id="value" @ref="Value.Current" @bind-Value="exampleModel.Value" />
11+
<RangeValidator ControlToValidate="@Value"
12+
Type="Integer"
13+
MinimumValue="0"
14+
MaximumValue="10"
15+
Text="Invalid"
16+
ErrorMessage="ErrorMessage!" />
17+
18+
<Button CausesValidation="false" Text="Submit"></Button>
19+
20+
<p>@ValidationMessage</p>
21+
22+
</EditForm>
23+
24+
@code {
25+
26+
private Model exampleModel = new Model();
27+
ForwardRef<InputBase<string>> Value = new ForwardRef<InputBase<string>>();
28+
private string ValidationMessage = "No validation yet";
29+
30+
public void HandleSubmit() {
31+
32+
ValidationMessage = "Validation Inspected";
33+
34+
}
35+
36+
public class Model {
37+
public string Value { get; set; }
38+
}
39+
40+
}
41+
42+

‎samples/AfterBlazorServerSide/Pages/ControlSamples/Button/Nav.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<div>
22
Other usage samples:
33
<NavLink href="./ControlSamples/Button" class="component-link" Match="NavLinkMatch.All">Simple Button</NavLink> |
4+
<NavLink href="./ControlSamples/Button/CausesValidation" class="component-link" Match="NavLinkMatch.All">Causes Validation</NavLink> |
45
<NavLink href="./ControlSamples/Button/JavaScript" class="component-link" Match="NavLinkMatch.All">JavaScript Click</NavLink> |
6+
<NavLink href="./ControlSamples/Button/Style" class="component-link" Match="NavLinkMatch.All">Button Style</NavLink> |
57
</div>

‎samples/AfterBlazorServerSide/Pages/ControlSamples/Button/Style.razor‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@page "/ControlSamples/Button/Style"
2+
@using static BlazorWebFormsComponents.WebColor
3+
4+
<h2>Button style demo</h2>
5+
6+
<Nav></Nav>
7+
8+
<style>
9+
.rounded-corners {
10+
border-radius: 25px;
11+
background: #73AD21;
12+
color: #FFF;
13+
padding: 20px;
14+
width: 200px;
15+
height: 150px;
16+
}
17+
</style>
18+
19+
<p>
20+
<Button Text="Blue Button with White text" BackColor="Blue" ForeColor="White" />
21+
</p>
22+
23+
<p>
24+
<Button Text="Red Button with Yellow text in Serif Font" BackColor="Red" ForeColor="Yellow" Font_Names="Serif" />
25+
</p>
26+
27+
<p>
28+
<Button Text="Rounded Corners" CssClass="rounded-corners" />
29+
</p>
30+
31+
<p>
32+
<Button Text="Purple Button with White Text and Bold Font" BackColor="Purple" ForeColor="White" Font_Bold="true" />
33+
</p>
34+
35+

‎samples/AfterBlazorServerSide/Shared/NavMenu.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<TreeNode Text="AdRotator" NavigateUrl="/ControlSamples/AdRotator" />
1818
<TreeNode Text="Button" NavigateUrl="/ControlSamples/Button">
1919
<TreeNode Text="JavaScript Click" NavigateUrl="/ControlSamples/Button/JavaScript" />
20+
<TreeNode Text="Style" NavigateUrl="/ControlSamples/Button/Style" />
2021
</TreeNode>
2122
<TreeNode Text="LinkButton" NavigateUrl="/ControlSamples/LinkButton">
2223
<TreeNode Text="JavaScript Click" NavigateUrl="/ControlSamples/LinkButton/JavaScript" />

‎samples/BeforeWebForms/BeforeWebForms.csproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
<Content Include="Content\bootstrap.min.css" />
108108
<Content Include="Content\Images\C#.png" />
109109
<Content Include="Content\Site.css" />
110+
<Content Include="ControlSamples\Button\default.aspx" />
110111
<Content Include="ControlSamples\DataList\RepeatColumns.aspx" />
111112
<Content Include="ControlSamples\DataList\StyleAttributes.aspx" />
112113
<Content Include="ControlSamples\DataList\FlowLayout.aspx" />
@@ -171,6 +172,13 @@
171172
<ItemGroup>
172173
<Compile Include="App_Start\BundleConfig.cs" />
173174
<Compile Include="App_Start\RouteConfig.cs" />
175+
<Compile Include="ControlSamples\Button\default.aspx.cs">
176+
<DependentUpon>default.aspx</DependentUpon>
177+
<SubType>ASPXCodeBehind</SubType>
178+
</Compile>
179+
<Compile Include="ControlSamples\Button\default.aspx.designer.cs">
180+
<DependentUpon>default.aspx</DependentUpon>
181+
</Compile>
174182
<Compile Include="ControlSamples\DataList\RepeatColumns.aspx.cs">
175183
<DependentUpon>RepeatColumns.aspx</DependentUpon>
176184
<SubType>ASPXCodeBehind</SubType>

‎samples/BeforeWebForms/ControlSamples/Button/default.aspx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="default.aspx.cs" Inherits="BeforeWebForms.ControlSamples.Button._default" %>
2+
3+
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
4+
5+
<h2>Button Demos</h2>
6+
7+
<p>
8+
This button has STYLE!
9+
10+
<asp:Button runat="server" ID="styleButton" BackColor="Blue" ForeColor="White" Text="Blue Button" />
11+
12+
</p>
13+
14+
<p>
15+
16+
This button does NOT cause validation:
17+
<asp:Button runat="server" ID="noValidationButton" CausesValidation="false" Text="No Validation for you!" />
18+
19+
</p>
20+
21+
22+
</asp:Content>

‎samples/BeforeWebForms/ControlSamples/Button/default.aspx.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.UI;
6+
using System.Web.UI.WebControls;
7+
8+
namespace BeforeWebForms.ControlSamples.Button
9+
{
10+
public partial class _default : System.Web.UI.Page
11+
{
12+
protected void Page_Load(object sender, EventArgs e)
13+
{
14+
15+
}
16+
}
17+
}

‎samples/BeforeWebForms/ControlSamples/Button/default.aspx.designer.cs‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/BeforeWebForms/Default.aspx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@
3636
<li><a href="ControlSamples/ListView">ListView</a></li>
3737
<li><a href="ControlSamples/Repeater/Default.aspx">Repeater</a></li>
3838
</ul>
39+
40+
<h3>Editor Controls</h3>
41+
<ul>
42+
<li><a href="ControlSamples/Button/Default.aspx">Button</a></li>
43+
</ul>
3944
</div>
4045

4146
<div class="col-md-3">

0 commit comments

Comments
 (0)