Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kevinjpetersen/BlazorQuery
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#.
https://github.com/kevinjpetersen/BlazorQuery
Last synced: 18 days ago
JSON representation
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#.
- Host: GitHub
- URL: https://github.com/kevinjpetersen/BlazorQuery
- Owner: kevinjpetersen
- License: mit
- Created: 2019-07-08T23:31:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-21T19:33:18.000Z (over 3 years ago)
- Last Synced: 2024-08-09T21:22:36.223Z (3 months ago)
- Language: C#
- Homepage:
- Size: 293 KB
- Stars: 82
- Watchers: 10
- Forks: 18
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BlazorQuery
**Note:** Currently working to remove the jQuery dependency and make it completely Plain JS, but keep the jQuery syntax the same, without the jQuery.
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#.
[](https://www.nuget.org/packages/BlazorQuery) [](https://github.com/kevinjpetersen/BlazorQuery/blob/master/LICENSE)
## How to get started
1. Install ``BlazorQuery`` through [Nuget](https://www.nuget.org/packages/BlazorQuery): ```Install-Package BlazorQuery```
2. Add the following in your applications ``_Host.cshtml`` file (jQuery) (If you already have jQuery, you can skip this step):
```javascript
```
3. Add the following in your applications ``_Host.cshtml`` file, AFTER your jQuery script tag:
```javascript
```
4. Add the following Service to your applications ``Startup.cs`` file:
```csharp
services.AddBlazorQuery();
```
5. Setup is done, you can now go to "Usage" section
## Usage
**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.)
**Example - CSS**
```razor
@page "/"
@inject BlazorQueryDOM DOM
Hello, DOM!
Hello, Blazor!
@code {
protected override async Task OnAfterRenderAsync()
{
await DOM.Select("h1").CSS("background-color", "red");
}
}
```
**Example - Text**
```razor
@page "/"
@inject BlazorQueryDOM DOM
Hello, DOM!
Hello, Blazor!
@code {
protected override async Task OnAfterRenderAsync()
{
await DOM.Select("h1").Text("Now this text is changed");
}
}
```
**Example - Combining Actions**
```razor
@page "/"
@inject BlazorQueryDOM DOM
Hello, DOM!
Hello, Blazor!
@code {
protected override async Task OnAfterRenderAsync()
{
await DOM.Select("h1").Text("Now this text is changed").CSS("color", "yellow");
}
}
```
## Change log
- **Version 0.0.3 - 2021-05-01**
- Migrated to .NET 5 and updated all packages to .NET 5 versions
- Some cleanup, such as moving BlazorQueryDOMHelpers to a new file
- Fixed a bug where Height and Width on DOM element needed to be double
- Added "href" to DOM element
- **Version 0.0.2 - 2020-07-29**
- Functionality added
- Update projects to build with latest version of Blazor
- Migration from blazor preview --> blazor release
- Starting wrapping fadein and fadeout
- New testapp to test with blazor webassembly, and refactoring to make common code between the 2 testaspp
- **Version 0.0.1 - 2019-07-09**
- Functionality added
- Added Select (Equivalent to $/jQuery, to select elements)
- Added AddClass, RemoveClass,
- Added Height (Set & Get), Width (Set & Get)
- Added Text (Set & Get)
- Added CSS
## Contributors
- **Kevin J. Petersen https://github.com/kevinjpetersen**
- **Sybaris https://github.com/sybaris**
- **AmazingAlek https://github.com/amazingalek**
## Full list of functionality currently supported (In alphabetical order)
- [ ] Add
- [ ] AddBack
- [x] AddClass
- [ ] After
- [ ] AjaxComplete
- [ ] AjaxError
- [ ] AjaxSend
- [ ] AjaxStart
- [ ] AjaxStop
- [ ] AjaxSuccess
- [ ] AndSelf
- [ ] Animate
- [ ] Append
- [ ] AppendTo
- [ ] Attr
- [ ] Before
- [ ] Bind
- [ ] Blur
- [ ] Change
- [ ] Children
- [ ] ClearQueue
- [ ] Click
- [ ] Clone
- [ ] Closest
- [ ] Context
- [ ] ContextMenu
- [x] CSS
- [ ] Data
- [ ] DBLClick
- [ ] Delay
- [ ] DelegateJS
- [ ] Dequeue
- [ ] Detach
- [ ] Die
- [ ] Each
- [ ] Empty
- [ ] End
- [ ] Eq
- [ ] Error
- [ ] FadeIn
- [ ] FadeOut
- [ ] FadeTo
- [ ] FadeToggle
- [ ] Filter
- [ ] Find
- [ ] Finish
- [ ] First
- [ ] Focus
- [ ] FocusIn
- [ ] FocusOut
- [ ] Get
- [ ] Has
- [ ] HasClass
- [x] Height_Set
- [x] Height_Get
- [ ] Hide
- [ ] Hover
- [ ] Html
- [ ] Index
- [ ] InnerHeight
- [ ] InnerWidth
- [ ] InsertAfter
- [ ] InsertBefore
- [ ] Is
- [ ] jQuery
- [ ] KeyDown
- [ ] KeyPress
- [ ] KeyUp
- [ ] Last
- [ ] Length
- [ ] Live
- [ ] Load
- [ ] Map
- [ ] MouseDown
- [ ] MouseEnter
- [ ] MouseLeave
- [ ] MouseMove
- [ ] MouseOut
- [ ] MouseOver
- [ ] MouseUp
- [ ] Next
- [ ] NextAll
- [ ] NextUntil
- [ ] Not
- [ ] Off
- [ ] Offset
- [ ] OffsetParent
- [ ] On
- [ ] One
- [ ] OuterHeight
- [ ] OuterWidth
- [ ] Parent
- [ ] Parents
- [ ] ParentsUntil
- [ ] Position
- [ ] Prepend
- [ ] PrependTo
- [ ] Prev
- [ ] PrevAll
- [ ] PrevUntil
- [ ] Promise
- [ ] Prop
- [ ] PushStack
- [ ] Queue
- [ ] Ready
- [ ] Remove
- [ ] RemoveAttr
- [x] RemoveClass
- [ ] RemoveData
- [ ] RemoveProp
- [ ] ReplaceAll
- [ ] ReplaceWith
- [ ] Resize
- [ ] Scroll
- [ ] ScrollLeft
- [ ] ScrollTop
- [x] Select (Equivalent to $/jQuery, to select elements)
- [ ] SelectJS
- [ ] Serialize
- [ ] SerializeArray
- [ ] Show
- [ ] Siblings
- [ ] Size
- [ ] Slice
- [ ] SlideDown
- [ ] SlideToggle
- [ ] SlideUp
- [ ] Stop
- [ ] Submit
- [x] Text_Set
- [x] Text_Get
- [ ] ToArray
- [ ] Toggle
- [ ] ToggleClass
- [ ] Trigger
- [ ] TriggerHandler
- [ ] Unbind
- [ ] Undelegate
- [ ] Unload
- [ ] Unwrap
- [ ] Val
- [x] Width_Set
- [x] Width_Get
- [ ] Wrap
- [ ] WrapAll
- [ ] WrapInner