|
| 1 | +# Code Snippets Package |
| 2 | + |
| 3 | +The BlazorWebFormsComponents Snippets package provides Visual Studio code snippets to accelerate development with the BlazorWebFormsComponents library. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +This Visual Studio extension includes snippets for: |
| 8 | + |
| 9 | +1. **Static Imports** - Quickly add `@using static` directives for enumeration types |
| 10 | +2. **Component Patterns** - Common component markup templates with placeholders |
| 11 | +3. **Validation Controls** - Quick templates for validation scenarios |
| 12 | + |
| 13 | +## Installation |
| 14 | + |
| 15 | +### From VSIX File |
| 16 | + |
| 17 | +1. Download the `.vsix` file from the [releases page](https://github.com/FritzAndFriends/BlazorWebFormsComponents/releases) |
| 18 | +2. Double-click the `.vsix` file to install |
| 19 | +3. Restart Visual Studio |
| 20 | + |
| 21 | +### From Visual Studio Marketplace |
| 22 | + |
| 23 | +1. Open Visual Studio |
| 24 | +2. Go to **Extensions** > **Manage Extensions** |
| 25 | +3. Search for "Blazor Web Forms Components Snippets" |
| 26 | +4. Click **Download** and restart Visual Studio |
| 27 | + |
| 28 | +## Building the Extension |
| 29 | + |
| 30 | +To build the VSIX extension from source: |
| 31 | + |
| 32 | +```bash |
| 33 | +cd src/BlazorWebFormsComponents.Snippets |
| 34 | +dotnet build |
| 35 | +``` |
| 36 | + |
| 37 | +The VSIX file will be created in `bin/Debug/net472/` or `bin/Release/net472/`. |
| 38 | + |
| 39 | +## Available Snippets |
| 40 | + |
| 41 | +### Static Import Snippets |
| 42 | + |
| 43 | +| Shortcut | Description | Output | |
| 44 | +|----------|-------------|--------| |
| 45 | +| `bwfall` | All common static imports | All enumeration static imports | |
| 46 | +| `bwfrepeat` | RepeatLayout enumeration | `@using static BlazorWebFormsComponents.Enums.RepeatLayout` | |
| 47 | +| `bwfdatalist` | DataListEnum enumeration | `@using static BlazorWebFormsComponents.Enums.DataListEnum` | |
| 48 | +| `bwfvalidation` | Validation enumerations | Static imports for validation types | |
| 49 | + |
| 50 | +### Component Snippets |
| 51 | + |
| 52 | +| Shortcut | Component | Description | |
| 53 | +|----------|-----------|-------------| |
| 54 | +| `bwfgridview` | GridView | Basic GridView with columns | |
| 55 | +| `bwfdl` | DataList | DataList with ItemTemplate | |
| 56 | +| `bwfrepeater` | Repeater | Repeater with ItemTemplate | |
| 57 | +| `bwfformview` | FormView | FormView with Item and Edit templates | |
| 58 | +| `bwfbutton` | Button | Button with click handler | |
| 59 | +| `bwftextbox` | TextBox | TextBox with binding | |
| 60 | +| `bwfcheckboxlist` | CheckBoxList | CheckBoxList with data binding | |
| 61 | + |
| 62 | +### Validation Snippets |
| 63 | + |
| 64 | +| Shortcut | Control | Description | |
| 65 | +|----------|---------|-------------| |
| 66 | +| `bwfrequired` | RequiredFieldValidator | Required field validation | |
| 67 | +| `bwfvalsummary` | ValidationSummary | Validation summary display | |
| 68 | + |
| 69 | +## Usage Examples |
| 70 | + |
| 71 | +### Example 1: Adding Static Imports |
| 72 | + |
| 73 | +To use enumeration values without full qualification: |
| 74 | + |
| 75 | +1. Type `bwfall` at the top of your `.razor` file |
| 76 | +2. Press `Tab` twice |
| 77 | +3. All common static imports are added |
| 78 | + |
| 79 | +```razor |
| 80 | +@using BlazorWebFormsComponents |
| 81 | +@using static BlazorWebFormsComponents.Enums.RepeatLayout |
| 82 | +@using static BlazorWebFormsComponents.Enums.DataListEnum |
| 83 | +@using static BlazorWebFormsComponents.Enums.ValidationSummaryDisplayMode |
| 84 | +@using static BlazorWebFormsComponents.Enums.ButtonType |
| 85 | +@using static BlazorWebFormsComponents.Enums.ValidationDataType |
| 86 | +@using static BlazorWebFormsComponents.Enums.ValidationCompareOperator |
| 87 | +@using static BlazorWebFormsComponents.Enums.BorderStyle |
| 88 | +@using static BlazorWebFormsComponents.Enums.HorizontalAlign |
| 89 | +@using static BlazorWebFormsComponents.Enums.VerticalAlign |
| 90 | +@using static BlazorWebFormsComponents.Enums.TextAlign |
| 91 | +``` |
| 92 | + |
| 93 | +Now you can use values like `Table`, `Flow`, `Horizontal`, `Vertical` directly: |
| 94 | + |
| 95 | +```razor |
| 96 | +<DataList TItemType="Product" DataSource="@products" RepeatLayout="Table" RepeatDirection="Horizontal"> |
| 97 | + ... |
| 98 | +</DataList> |
| 99 | +``` |
| 100 | + |
| 101 | +### Example 2: Creating a GridView |
| 102 | + |
| 103 | +1. Type `bwfgridview` where you want the component |
| 104 | +2. Press `Tab` twice |
| 105 | +3. Fill in the placeholders: |
| 106 | + - First tab stop: Item type (e.g., `Product`) |
| 107 | + - Second tab stop: Data source variable (e.g., `products`) |
| 108 | +4. Add more columns as needed |
| 109 | + |
| 110 | +### Example 3: Adding Form Validation |
| 111 | + |
| 112 | +1. Type `bwftextbox` to create a TextBox |
| 113 | +2. Type `bwfrequired` to add validation |
| 114 | +3. Type `bwfvalsummary` to add a validation summary |
| 115 | + |
| 116 | +```razor |
| 117 | +<TextBox @bind-Text="userName" CssClass="form-control" /> |
| 118 | +<RequiredFieldValidator ControlToValidate="userName" |
| 119 | + ErrorMessage="User name is required" |
| 120 | + Display="Dynamic" /> |
| 121 | +
|
| 122 | +<ValidationSummary HeaderText="Please correct the following errors:" |
| 123 | + DisplayMode="BulletList" |
| 124 | + ShowSummary="true" /> |
| 125 | +``` |
| 126 | + |
| 127 | +## Why Use Static Imports? |
| 128 | + |
| 129 | +BlazorWebFormsComponents uses static classes for enumeration types to provide a more object-oriented approach. Static imports allow you to use these values more concisely: |
| 130 | + |
| 131 | +**Without static import:** |
| 132 | +```razor |
| 133 | +<DataList RepeatLayout="BlazorWebFormsComponents.Enums.RepeatLayout.Table" /> |
| 134 | +``` |
| 135 | + |
| 136 | +**With static import:** |
| 137 | +```razor |
| 138 | +@using static BlazorWebFormsComponents.Enums.RepeatLayout |
| 139 | +
|
| 140 | +<DataList RepeatLayout="Table" /> |
| 141 | +``` |
| 142 | + |
| 143 | +## Supported Languages |
| 144 | + |
| 145 | +The snippets are available in: |
| 146 | +- Razor (`.razor` files) |
| 147 | +- C# (`.cs` files, for the static imports) |
| 148 | +- HTML (for component markup) |
| 149 | + |
| 150 | +## Requirements |
| 151 | + |
| 152 | +- Visual Studio 2022 or later |
| 153 | +- BlazorWebFormsComponents NuGet package in your project |
| 154 | + |
| 155 | +## Contributing |
| 156 | + |
| 157 | +To add new snippets: |
| 158 | + |
| 159 | +1. Create a new `.snippet` file in the `Snippets/` folder |
| 160 | +2. Follow the XML structure of existing snippets |
| 161 | +3. Add appropriate shortcut, description, and code template |
| 162 | +4. Build the project to test |
| 163 | + |
| 164 | +## Structure |
| 165 | + |
| 166 | +``` |
| 167 | +BlazorWebFormsComponents.Snippets/ |
| 168 | +├── BlazorWebFormsComponents.Snippets.csproj # Project file |
| 169 | +├── source.extension.vsixmanifest # VSIX manifest |
| 170 | +├── LICENSE.txt # MIT license |
| 171 | +├── icon.png # Extension icon |
| 172 | +├── README.md # Documentation |
| 173 | +└── Snippets/ # Snippet files |
| 174 | + ├── snippets.pkgdef # VS registration |
| 175 | + ├── AllStaticImports.snippet |
| 176 | + ├── StaticImportRepeatLayout.snippet |
| 177 | + ├── StaticImportDataListEnum.snippet |
| 178 | + ├── StaticImportValidation.snippet |
| 179 | + ├── GridViewComponent.snippet |
| 180 | + ├── DataListComponent.snippet |
| 181 | + ├── RepeaterComponent.snippet |
| 182 | + ├── FormViewComponent.snippet |
| 183 | + ├── ButtonComponent.snippet |
| 184 | + ├── TextBoxComponent.snippet |
| 185 | + ├── CheckBoxListComponent.snippet |
| 186 | + ├── RequiredFieldValidator.snippet |
| 187 | + └── ValidationSummary.snippet |
| 188 | +``` |
| 189 | + |
| 190 | +## More Information |
| 191 | + |
| 192 | +- [BlazorWebFormsComponents Documentation](https://fritzandfriends.github.io/BlazorWebFormsComponents/) |
| 193 | +- [GitHub Repository](https://github.com/FritzAndFriends/BlazorWebFormsComponents) |
| 194 | +- [NuGet Package](https://www.nuget.org/packages/Fritz.BlazorWebFormsComponents/) |
| 195 | +- [Visual Studio Snippets Reference](https://learn.microsoft.com/en-us/visualstudio/ide/code-snippets) |
0 commit comments