Skip to content
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#.
C# JavaScript
Branch: master
Clone or download
Latest commit 564cf07 Jul 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Refactored, Added NuGet Package Jul 9, 2019
.gitattributes Init Jul 8, 2019
.gitignore Init Jul 8, 2019
LICENSE Init Jul 8, 2019
README.md Update README.md Jul 23, 2019

README.md

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

Nuget GitHub

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>
  1. Add the following in your applications _Host.cshtml file, AFTER your jQuery script tag:
<script src="_content/BlazorQuery/blazorQuery.js"></script>
  1. Add the following Service to your applications Startup.cs file:
services.AddBlazorQuery();
  1. 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.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

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
You can’t perform that action at this time.