Code Monkey home page Code Monkey logo

blazorquery's Introduction

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

blazorquery's People

Contributors

amazingalek avatar kevinjpetersen avatar sybaris avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blazorquery's Issues

JS files are missing from Nuget package

jQuery.js and blazorQuery.js seem to be missing from Nuget package v0.0.3. Not sure when/how that happened, might have been my mistake. I'll look into it if I have time but can't promise anything.

Project still alive ?

Hi

The project seems interesting, but I do not see any activity from about 1 year.
And the solution use preview version of blazor, and have not been updated.

Do you plan to continue some work on this project or not ?

Regards,
Sybaris

Just curious

Is this project still relevant?
Now that we can call JQ directly from Blazor with IJSObjectReference .

Example:
JQuery
$('table').DataTable()

Blazor

 var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
 await jQuery.InvokeVoidAsync("DataTable");

Compatability with Blazor updating?

Is this compatible with Blazor updating the DOM? Wouldn't that override all changes?
For example:

@page "/"
@inject BlazorQueryDOM DOM

<h1>@TestVal</h1>

@code {
    string TestVal = "TestA";

    protected override async Task OnAfterRenderAsync()
    {
      await DOM.Select("h1").Text("TestB");
      TestVal = "TestC"
    }
}

What will actually be displayed? (I'm not at home and I'm really interested into this, maybe you can answer, else I'll try it out later)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.