文件列表:

Blazor.JsonEditor.Demo.Wasm/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/App.razor (465, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Blazor.JsonEditor.Demo.Wasm.csproj (590, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Blazor.JsonEditor.Demo.Wasm.csproj.user (233, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Client/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Client/Program.cs (652, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonItemCustomEditor.razor (4238, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonItemCustomEditor.razor.cs (5113, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonItemCustomEditor.razor.css (2006, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonItemCustomView.razor (1104, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonItemCustomView.razor.cs (272, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonItemCustomView.razor.css (336, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonObjectCustomView.razor (571, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonObjectCustomView.razor.cs (796, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Component/JsonObjectCustomView.razor.css (62, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Model/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Model/IndexModel.cs (132, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Pages/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Pages/Index.razor (1668, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Pages/Index.razor.cs (496, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Pages/Index.razor.css (50, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Properties/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Properties/launchSettings.json (1281, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Shared/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Shared/MainLayout.razor (1645, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/Shared/MainLayout.razor.css (1462, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/_Imports.razor (441, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/wwwroot/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/wwwroot/css/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/wwwroot/css/app.css (3717, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/wwwroot/css/bootstrap/ (0, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/wwwroot/css/bootstrap/bootstrap.min.css (162720, 2023-10-17)
Blazor.JsonEditor.Demo.Wasm/wwwroot/css/bootstrap/bootstrap.min.css.map (449111, 2023-10-17)
... ...

# Blazor.JsonEditor JSON Editor and Viewer ( with customization) for Blazor Server App and Wasm. Rewrited and working version of **[Blazoring.JsonEditor](https://github.com/vmakharashvili/Blazoring-JsonEditor)** ## Demo: [Click me to see the demo](https://652d69a95eff6137d8c4e6f8--cool-pasca-c1252e.netlify.app/) ## Json Editor and Viewer tool * To install the package run the following command: **`Install-Package Blazor.JsonEditor`** or search **Blazor.JsonEditor** in Nuget gallery. This will install Blazor.JsonEditor in your project. You also need to add in **_Imports.razor**: ```html @using Blazor.JsonEditor.Component ``` Also, you need to add a javascript file in _Host.cshtml ( Server app) or index.html ( Wasm) file: ```html ``` For icon support, JsonEditor uses the Font-Awesome icons library. You need to add a link to _Host.cshtml ( Server app) or index.html ( Wasm) file: ```html ``` ### Using in code to have an editor: ```html ``` ### Using in code to have a viewer: ```html ``` Blazor.JsonEditor doesn't work without EditForm. Also, validation is required. # Customization ## Editor template: You can customize and pass your own editor template as a dynamic component. The editor template is everything that you see after the property name and value like buttons and the editor window itself. For this, you need to set the parameter CustomEditor. As an example **CustomEditor="typeof([JsonItemCustomEditor](https://github.com/joghyrt/Blazor.JsonEditor/tree/main/Blazor.JsonEditor.Demo/Component))"** ```html ``` In your custom component you need to have parameters: ```c# //Main Json object [Parameter] public JsonObject? JsonObject { get; set; } //Event that you need to invoke on every object change [Parameter] public EventCallback JsonObjectChanged { get; set; } //Values for dropdown [Parameter] public Dictionary? KeyValues { get; set; } //Edit item in case of edit [Parameter] public KeyValuePair? JsonItemToEdit { get; set; } ``` Also on add and edit, you need to pass data to **JsonHelper**. We have two methods for this: AddNodeValue and EditNodeValue ```c# public static void AddNodeValue(JsonObject jsonObject, JsonItem jsonItem) public static void EditNodeValue(JsonObject jsonObject, JsonItem jsonItem, string editPropertyName) ``` After Add/Edit/Delete do not forget to Invoke JsonObjectChanged ```c# await JsonObjectChanged.InvokeAsync(JsonObject); ``` ## View templates: You can customize the view template for an item and an object. Item is key: value template. An object view template is an object template that contains a lot of items template in it. ```json { "Nullable" : null, //item view template "String" : "random", //item view template "Number" : 1, //item view template "Array" : [1,2,3], //item view template "True" : true, //item view template "False" : false, //item view template "Object" : { //!OBJECT! view template "Nullable" : null, //item view template "String" : "random", //item view template "Number" : 1, //item view template "Array" : [1,2,3], //item view template "True" : true, //item view template "False" : false //item view template } } ``` ### Item view template: ```html ``` In your custom component you need to have parameters: ```c# [Parameter] public KeyValuePair JsonItem { get; set; } ``` You can find an example in [repository](https://github.com/joghyrt/Blazor.JsonEditor/tree/main/Blazor.JsonEditor.Demo.Wasm/Component). ### Object view template: ```html ``` In your custom component you need to have parameters: ```c# [Parameter] public KeyValuePair JsonItem { get; set; } [Parameter] public EventCallback ValueChanged { get; set; } [Parameter] public Dictionary? KeyValues { get; set; } [Parameter] public bool AllowEdit { get; set; } = true; [Parameter] public Type? CustomEditor { get; set; } [Parameter] public Type? CustomItemView { get; set; } [Parameter] public Type? CustomObjectView { get; set; } ``` Don't forget to include **InternalJsonEditor** inside you custom template to allow build lower object level. Example: ```html ``` You can find an example in [repository](https://github.com/joghyrt/Blazor.JsonEditor/tree/main/Blazor.JsonEditor.Demo.Wasm/Component). ## Next steps - Refactor ## If you like it please support: [Buy me a coffee](https://www.buymeacoffee.com/joghyrt) [Donate](https://ko-fi.com/joghyrt)

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：