00mjk/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#.

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#.

How to get started

1. Install BlazorQuery through Nuget: Install-Package BlazorQuery
2. Add the following in your applications _Host.cshtml file (jQuery) (If you already have jQuery, you can skip this step):

<script src="_content/BlazorQuery/jQuery.js"></script>

3. Add the following in your applications _Host.cshtml file, AFTER your jQuery script tag:

<script src="_content/BlazorQuery/blazorQuery.js"></script>

4. Add the following Service to your applications Startup.cs file:

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

@page "/"
@inject BlazorQueryDOM DOM

<h1>Hello, DOM!</h1>
<h1>Hello, Blazor!</h1>

@code {
    protected override async Task OnAfterRenderAsync()
    {
      await DOM.Select("h1").CSS("background-color", "red");
    }
}

Example - Text

@page "/"
@inject BlazorQueryDOM DOM

<h1>Hello, DOM!</h1>
<h1>Hello, Blazor!</h1>

@code {
    protected override async Task OnAfterRenderAsync()
    {
      await DOM.Select("h1").Text("Now this text is changed");
    }
}

Example - Combining Actions

@page "/"
@inject BlazorQueryDOM DOM

<h1>Hello, DOM!</h1>
<h1>Hello, Blazor!</h1>

@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
• AddClass
• After
• AjaxComplete
• AjaxError
• AjaxSend
• AjaxStart
• AjaxStop
• AjaxSuccess
• AndSelf
• Animate
• Append
• AppendTo
• Attr
• Before
• Bind
• Blur
• Change
• Children
• ClearQueue
• Click
• Clone
• Closest
• Context
• ContextMenu
• 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
• Height_Set
• 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
• RemoveClass
• RemoveData
• RemoveProp
• ReplaceAll
• ReplaceWith
• Resize
• Scroll
• ScrollLeft
• ScrollTop
• Select (Equivalent to $/jQuery, to select elements)
• SelectJS
• Serialize
• SerializeArray
• Show
• Siblings
• Size
• Slice
• SlideDown
• SlideToggle
• SlideUp
• Stop
• Submit
• Text_Set
• Text_Get
• ToArray
• Toggle
• ToggleClass
• Trigger
• TriggerHandler
• Unbind
• Undelegate
• Unload
• Unwrap
• Val
• Width_Set
• Width_Get
• Wrap
• WrapAll
• WrapInner