Skip to content

Commit b49b521

Browse files
Update README.md
1 parent eb7273f commit b49b521

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed

README.md

+67
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,72 @@
22
BlazorQuery is a Blazor Library that wraps jQuery completely in C# so that DOM Manipulation, Ajax, etc, can be done directly without leaving the comfort of C#.
33

44
## How to get started
5+
1. Install ``BlazorQuery`` through [Nuget](https://www.nuget.org/packages/BlazorQuery): ```Install-Package BlazorQuery```
6+
2. Add the following in your applications ``_Host.cshtml`` file (jQuery) (If you already have jQuery, you can skip this step):
7+
```javascript
8+
<script src="_content/BlazorQuery/jQuery.js"></script>
9+
```
10+
3. Add the following in your applications ``_Host.cshtml`` file, AFTER your jQuery script tag:
11+
```javascript
12+
<script src="_content/BlazorQuery/blazorQuery.js"></script>
13+
```
14+
4. Add the following Service to your applications ``Startup.cs`` file:
15+
```csharp
16+
services.AddBlazorQuery();
17+
```
18+
5. Setup is done, you can now go to "Usage" section
19+
20+
## Usage
21+
**IMPORTANT NOTE:** A current limitation of Blazor means you cannot execute DOM Manipulation in a Prerendering state, so you can only use ``DOM`` functions in ``OnAfterRenderAsync`` or AFTER Prerendering has been done (For example through a button click or an eventhandler, etc.)
22+
23+
**Example - CSS**
24+
```razor
25+
@page "/"
26+
@inject BlazorQueryDOM DOM
27+
28+
<h1>Hello, DOM!</h1>
29+
<h1>Hello, Blazor!</h1>
30+
31+
@code {
32+
protected override async Task OnAfterRenderAsync()
33+
{
34+
await DOM.Select("h1").CSS("background-color", "red");
35+
}
36+
}
37+
```
38+
39+
**Example - Text**
40+
```razor
41+
@page "/"
42+
@inject BlazorQueryDOM DOM
43+
44+
<h1>Hello, DOM!</h1>
45+
<h1>Hello, Blazor!</h1>
46+
47+
@code {
48+
protected override async Task OnAfterRenderAsync()
49+
{
50+
await DOM.Select("h1").Text("Now this text is changed");
51+
}
52+
}
53+
```
54+
55+
**Example - Combining Actions**
56+
```razor
57+
@page "/"
58+
@inject BlazorQueryDOM DOM
59+
60+
<h1>Hello, DOM!</h1>
61+
<h1>Hello, Blazor!</h1>
62+
63+
@code {
64+
protected override async Task OnAfterRenderAsync()
65+
{
66+
await DOM.Select("h1").Text("Now this text is changed").CSS("color", "yellow");
67+
}
68+
}
69+
```
70+
571

672
## Change log
773
- **Version 0.0.1 - 2019-07-09**
@@ -12,6 +78,7 @@ BlazorQuery is a Blazor Library that wraps jQuery completely in C# so that DOM M
1278
- Added Text (Set & Get)
1379
- Added CSS
1480

81+
1582
## Full list of functionality currently supported (In alphabetical order)
1683
- [ ] Add
1784
- [ ] AddBack

0 commit comments

Comments
 (0)