Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

License

Notifications You must be signed in to change notification settings

kevinjpetersen/BlazorQuery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

33 Commits

Repository files navigation

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

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

AltStyle によって変換されたページ (->オリジナル) /