9 | Blazor.Net
10 |
11 |
12 |
13 |
14 | @Body
15 |
16 |
17 |
2 |
8 |
9 | @functions {
10 |
11 | [Parameter] public string Header { get; set; }
12 |
13 | [Parameter] public string Introduction { get; set; }
14 |
15 | [Parameter] public RenderFragment ChildContent { get; set; }
16 |
17 | }
--------------------------------------------------------------------------------
/BlazorBinding/Components/DocumentationSupport/ChangeLogItems.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 |
6 | namespace BlazorBinding.Components.DocumentationSupport
7 | {
8 | public class ChangeLog
9 | {
10 | public DateTime dated { get; set; }
11 | public string content { get; set; }
12 | public Child[] child { get; set; }
13 | }
14 |
15 | public class Child
16 | {
17 | public string text { get; set; }
18 | }
19 |
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/BlazorBinding/Components/DocumentationSupport/DisplayCode.md:
--------------------------------------------------------------------------------
1 | # DisplayCode enhancement
2 |
3 | *Update: 5th Dec 2018*
4 | *Much of this has now been replaced by the new DisplayCode component which does not use JSInterop*
5 |
6 | When I saw SQL Mister Magoo's excellent BlazorBinding project I thought it would be an
7 | interesting experiment to try to add Code Syntax Highlighting to his `@Header
3 |
4 |
7 | @Introduction
5 | @ChildContent 6 |` so we
22 | could pull the `innerText` from the element, apply the syntax highlighting, and then re-render
23 | the text back.
24 |
25 | I added the file `wwwroot/js/displayCode.js` library to host the Javascript methods I needed, and
26 | added these to the `index.html` page. The helper methods `GetInnerText` and `SetInnerHTML` call the
27 | Javascript code.
28 |
29 | I also added an override for `OnAfterRenderAsync` which then grabs the raw inner text
30 | from the `div` and applies the syntax highlighting.
31 |
32 | I also added a new `[Parameter] string Languages {get;set;} = "html";` which
33 | defaults to HTML (since most examples use this), but allows the component to do
34 | highlighting for any of the
35 | [supported languages](https://github.com/WilliamABradley/ColorCode-Universal/blob/master/ColorCode.Core/Common/LanguageId.cs)
36 |
37 | Example:
38 | ```
39 |
40 | @("")
41 |
42 | ```
43 | ### Issues
44 |
45 | The `
72 |
73 |
74 | ` tag added a number of blank lines and I added the `CleanCode` method to trim these off, otherwise the code sample
46 | has a lot of blank space above/below. There might be a better fix for this, as it would also remove intentionally blank lines within
47 | the code as well as at the start/end.
48 |
49 |
50 |
--------------------------------------------------------------------------------
/BlazorBinding/Components/DocumentationSupport/DisplayCode.razor:
--------------------------------------------------------------------------------
1 | @using BlazorBinding.Services
2 | @inject ICodeHighlighter CodeHighlighter
3 |
4 | @if (Code != null)
5 | {
6 |
7 | @ToggleText code
8 | @if (displayCode)
9 | {
10 |
11 | @CodeMarkup
12 |
13 | }
14 |
15 | }
16 |
17 | @code
18 | {
19 | bool displayCode = false;
20 | [Parameter] public string Language { get; set; } = "HTML";
21 | [Parameter] public string[] Code { get; set; }
22 | MarkupString cache;
23 | private MarkupString CodeMarkup
24 | {
25 | get
26 | {
27 | if (!string.IsNullOrWhiteSpace(cache.Value))
28 | return cache;
29 |
30 | switch (Language.ToUpper())
31 | {
32 | case "HTML":
33 | cache = (MarkupString)CodeHighlighter.HighlightHtml(string.Join("\n", Code));
34 | return cache;
35 | case "CSHARP":
36 | cache = (MarkupString)CodeHighlighter.HighlightCSharp(string.Join("\n", Code));
37 | return cache;
38 | }
39 | cache = (MarkupString)string.Join("\n", Code);
40 | return cache;
41 | }
42 | }
43 |
44 | string ToggleText => displayCode ? "hide" : "show";
45 | void ToggleCode()
46 | {
47 | displayCode = !displayCode;
48 | StateHasChanged();
49 | }
50 |
51 | }
--------------------------------------------------------------------------------
/BlazorBinding/Components/ListView.razor:
--------------------------------------------------------------------------------
1 | @typeparam TList
2 |
3 | @if (ListData == null)
4 | {
5 | Nothing to display
6 | }
7 | else
8 | {
9 | foreach (var listItem in ListData)
10 | {
11 |
12 |
20 |
21 | }
22 | }
23 |
24 | @code
25 | {
26 | TList activeItem;
27 |
28 | [Parameter] public List ListData { get; set; }
29 | [Parameter] public Action> ListDataChanged { get; set; }
30 | [Parameter] public Action ChangeAction { get; set; }
31 | [Parameter] public RenderFragment ListItemContent { get; set; }
32 |
33 | string GetActive(TList item)
34 | {
35 | return item?.Equals(activeItem) ?? false ? "active" : "";
36 | }
37 |
38 | void SelectItem(TList item)
39 | {
40 | activeItem = item;
41 | ChangeAction?.Invoke(item, "Selected");
42 | StateHasChanged();
43 | }
44 |
45 | void DeleteItem(TList item)
46 | {
47 | if (item.Equals(activeItem))
48 | activeItem = default(TList);
49 | ListData.Remove(item);
50 | ChangeAction?.Invoke(item, "Deleted");
51 | StateHasChanged();
52 | }
53 | }
--------------------------------------------------------------------------------
/BlazorBinding/Components/MMDialog.razor:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
47 |
48 |
49 |
50 | @code
51 | {
52 |
53 | [Parameter] public RenderFragment TitleContent { get; set; }
54 | [Parameter] public RenderFragment BodyContent { get; set; }
55 | [Parameter] public RenderFragment BtnPriContent { get; set; }
56 | [Parameter] public RenderFragment BtnSecContent { get; set; }
57 | [Parameter] public Action BtnPriClick { get; set; }
58 | [Parameter] public Action BtnSecClick { get; set; }
59 |
60 | ElementReference mmdialogref;
61 | string Classes = "modal fade";
62 | string Styles = "display: none;";
63 | string TitleText;
64 | string BodyText;
65 | string BtnPriText;
66 | string BtnSecText;
67 |
68 | #region "Public Actions"
69 | public void Show()
70 | {
71 | Classes = "modal fade show";
72 | Styles = "display: block; padding-right: 17px;";
73 | Console.WriteLine("SHOW");
74 | StateHasChanged();
75 | }
76 | public void Hide()
77 | {
78 | Classes = "modal fade";
79 | Styles = "display: none;";
80 | StateHasChanged();
81 | }
82 | #endregion
83 |
84 | #region "Internal Actions"
85 | protected void BtnPriClickInternal(MouseEventArgs args)
86 | {
87 | if (BtnPriClick == null)
88 | {
89 | Console.WriteLine("Primary Button Self Closing");
90 | Hide();
91 | }
92 | else
93 | {
94 | Console.WriteLine("Primary Button Invoke");
95 | BtnPriClick.Invoke(args);
96 | }
97 | }
98 | protected void BtnSecClickInternal(MouseEventArgs args)
99 | {
100 | if (BtnSecClick == null)
101 | {
102 | Console.WriteLine("Secondary Button Self Closing");
103 | Hide();
104 | }
105 | else
106 | {
107 | Console.WriteLine("Secondary Button Invoke");
108 | BtnSecClick.Invoke(args);
109 | }
110 | }
111 | protected void CloseDialog(MouseEventArgs args)
112 | {
113 | Console.WriteLine("Close Button");
114 | Hide();
115 | }
116 | #endregion
117 |
118 | #region "Public Setters"
119 | public void SetTitle(string Title)
120 | {
121 | Console.WriteLine($"New Title: {Title}");
122 | TitleText = Title;
123 | }
124 | public void SetBody(string Body)
125 | {
126 | Console.WriteLine($"New Body: {Body}");
127 | BodyText = Body;
128 | }
129 | public void SetBtnPriText(string Btn)
130 | {
131 | Console.WriteLine($"New Pri: {Btn}");
132 | BtnPriText = Btn;
133 | }
134 | public void SetBtnSecText(string Btn)
135 | {
136 | Console.WriteLine($"New Sec: {Btn}");
137 | BtnSecText = Btn;
138 | }
139 | public void SetBtnPriCallback(Action Callback)
140 | {
141 | BtnPriClick = Callback;
142 | }
143 | public void SetBtnSecCallback(Action Callback)
144 | {
145 | BtnSecClick = Callback;
146 | }
147 | #endregion
148 |
149 | protected override void OnInitialized()
150 | {
151 | if (TitleContent == null && TitleText == null) SetTitle("Information");
152 | if (BodyContent == null && BodyText == null) SetBody("This is a sample dialog, with default values.");
153 | if (BtnPriText == null && BtnPriText == null) SetBtnPriText("OK");
154 | if (BtnSecText == null && BtnSecText == null) SetBtnSecText("Cancel");
155 | }
156 | //
157 | }
158 |
--------------------------------------------------------------------------------
/BlazorBinding/Components/ModelAttribute.cs:
--------------------------------------------------------------------------------
1 | using System;
2 |
3 | namespace BlazorBinding.Components
4 | {
5 | [AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
6 | sealed class ModelAttribute : Attribute
7 | {
8 | public ModelAttribute() { }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/BlazorBinding/Components/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using Microsoft.AspNetCore.Components.Web
--------------------------------------------------------------------------------
/BlazorBinding/Models/DataModel.cs:
--------------------------------------------------------------------------------
1 | using System.ComponentModel;
2 | using System.Runtime.CompilerServices;
3 |
4 | namespace BlazorBinding.Models
5 | {
6 | class DataModel : INotifyPropertyChanged
7 | {
8 | public event PropertyChangedEventHandler PropertyChanged;
9 | bool _toggle;
10 |
11 | public bool Toggle
12 | {
13 | get => _toggle;
14 | set
15 | {
16 | if (value != _toggle)
17 | {
18 | _toggle = value;
19 | RaisePropertyChanged();
20 | }
21 | }
22 | }
23 |
24 | private void RaisePropertyChanged([CallerMemberName] string name = null)
25 | {
26 | PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/BlazorBinding/Models/ISampleData.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 |
6 | namespace BlazorBinding.Models
7 | {
8 | public interface ISampleData
9 | {
10 | int Id { get; }
11 | string Name { get; set; }
12 | string NickName { get; set; }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/BlazorBinding/Models/SampleUserData.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 |
6 | namespace BlazorBinding.Models
7 | {
8 | public class SampleUserData : ISampleData
9 | {
10 | public SampleUserData()
11 | {
12 | }
13 |
14 | public SampleUserData(string Name, string NickName)
15 | {
16 | this.Name = Name;
17 | this.NickName = NickName;
18 | }
19 |
20 | public int Id { get; }
21 | public string Name { get ; set ; }
22 | public string NickName { get ; set ; }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/CascadeCallback.razor:
--------------------------------------------------------------------------------
1 | @page "/cc"
2 | @inherits CascadeCallbackModel
3 |
4 | Cascading Value With Callback - "Two Way Binding"
5 |
6 | This is the parent control
7 |
8 | Try clicking the checkbox - the second checkbox will also change because of the CascadingValue.
9 |
10 |
11 |
12 |
13 |
14 |
15 | This is the Child control
21 |
22 | This is the child control, try clicking the checkbox - it will update the parent Value.
23 |
24 |
25 |
26 |
28 |
29 |
30 | ",
32 | " ",
33 | "",
34 | })"/>
35 |
36 | The CheckBox2 implementation :
37 |
38 |
39 | Here we bind to a local proxy value so we can fire the Callback when the local value changes
40 |
41 | Callback { get; set; }" ,
46 | " [CascadingParameter(Name =\" ParentValue\")] bool ParentValue { get; set; }",
47 | " bool Value { get { return ParentValue; } set { Callback?.Invoke(value); } }" ,
48 | "}" ,
49 | })" />
50 |
51 |
52 |
53 | Page implementation:
54 |
55 | StateHasChanged();",
60 | " void UpdateValue(bool value) { ParentValue = value; Refresh(null); }",
61 | "}",
62 | })" />
63 |
64 | @*
65 | Event List (@EventList.Count)
66 | @GetEvents()
67 | *@
--------------------------------------------------------------------------------
/BlazorBinding/Pages/CascadeCallback.razor.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Components;
2 | using Microsoft.AspNetCore.Components.Web;
3 | using System;
4 | using System.Collections.Generic;
5 | using System.Text;
6 |
7 | namespace BlazorBinding.Pages
8 | {
9 |
10 | public class CascadeCallbackModel : ComponentBase
11 | {
12 | private bool _parentValue;
13 | internal bool ParentValue
14 | {
15 | get
16 | {
17 | return _parentValue;
18 | }
19 | set
20 | {
21 | AddEvent("Parent", $"Set ParentValue: {value}");
22 | _parentValue = value;
23 | }
24 | }
25 |
26 | internal void AddEvent(string Entity,string Value)
27 | {
28 | EventList.Add($"{Entity} - {DateTime.Now.ToLongTimeString()} : {Value}");
29 | }
30 |
31 | internal void Refresh(MouseEventArgs args)
32 | {
33 | AddEvent("Parent", $"Refresh: {args?.Type ?? "page"}");
34 | StateHasChanged();
35 | }
36 |
37 | internal void UpdateValue(bool value)
38 | {
39 | AddEvent("Parent", $"UpdateValue : {value}");
40 | ParentValue = value;
41 | Refresh(null);
42 | }
43 |
44 | internal string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
45 |
46 | internal List EventList = new List();
47 |
48 | internal MarkupString GetEvents()
49 | {
50 | if (EventList?.Count == 0)
51 | return (MarkupString)string.Empty;
52 |
53 | StringBuilder events = new StringBuilder();
54 | string last = EventList?.Count > 0 ? EventList[0] : string.Empty;
55 | string curr = string.Empty;
56 | int count = 0;
57 | foreach (var item in EventList)
58 | {
59 | curr = item;
60 | if (!curr.Equals(last,StringComparison.Ordinal))
61 | {
62 | events.Append($"{last} ( x {count} )
");
63 | count = 0;
64 | }
65 | last = curr;
66 | count++;
67 | }
68 | events.Append($"{last} ( x {count} )
");
69 | return (MarkupString)events.ToString();
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/DialogDemo.razor:
--------------------------------------------------------------------------------
1 | @page "/dia"
2 |
3 | Using CascadingValue To Share A Global Component - Dialog
4 |
5 | Sample form for customising the modal dialog - simple local binding.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | @if (string.IsNullOrWhiteSpace(BtnPri))
19 | {
20 |
21 |
22 |
23 |
24 | }
25 |
26 |
27 |
28 |
29 | @if (string.IsNullOrWhiteSpace(BtnSec))
30 | {
31 |
32 |
33 |
34 |
35 | }
36 |
37 |
38 | @if (!string.IsNullOrWhiteSpace(Message))
39 | {
40 | @Message
41 | }
42 |
43 | Data Binding Examples
6 |
7 |
8 | This is a working example of various binding techniques for Blazor.
9 |
10 |
11 | Please use the menu to work through the different options - if you work down the list, I think you will see how we have to accomodate the fact there are some issues in data-binding in Blazor.
12 |
13 |
14 | The code is on GitHub Blazor Binding Source
15 |
16 |
17 |
18 |
19 |
20 | @if (ChangeLogItems != null)
21 | {
22 | @foreach (var item in ChangeLogItems)
23 | {
24 |
25 | @item.dated.ToLongDateString()
26 |
27 | @((MarkupString)item.content)
28 | @if (item.child != null)
29 | {
30 | foreach (var child in item.child)
31 | {
32 |
33 | @((MarkupString)child.text)
34 |
35 | }
36 | }
37 |
38 |
39 | }
40 | }
41 |
42 | @functions
43 | {
44 | //
45 | [Inject] HttpClient httpClient { get; set; }
46 | ChangeLog[] ChangeLogItems;
47 |
48 | protected async override Task OnInitializedAsync()
49 | {
50 | await base.OnInitializedAsync();
51 | try
52 | {
53 | var changeLogString = await httpClient.GetStringAsync("data/changelog.json");
54 | var changeLogItems = JsonSerializer.Deserialize(changeLogString);
55 | ChangeLogItems = changeLogItems;
56 | Console.WriteLine($"Got {ChangeLogItems.Length} ChangeLogItems");
57 | }
58 | catch (Exception e)
59 | {
60 | Console.WriteLine($"ERROR: {e.GetBaseException().Message}");
61 | }
62 | }
63 |
64 | //
65 | }
--------------------------------------------------------------------------------
/BlazorBinding/Pages/Readme.razor:
--------------------------------------------------------------------------------
1 | @page "/readme"
2 |
3 | @Contents
4 |
5 |
6 | @code
7 | {
8 | //
9 | [Inject] HttpClient httpClient { get; set; }
10 | MarkupString Contents;
11 |
12 | protected async override Task OnInitializedAsync()
13 | {
14 | await base.OnInitializedAsync();
15 | try
16 | {
17 | var stream = await httpClient.GetStringAsync("https://raw.githubusercontent.com/SQL-MisterMagoo/BlazorBinding/master/README.md");
18 | Contents = (MarkupString)Markdig.Markdown.ToHtml(stream);
19 | }
20 | catch (Exception ex)
21 | {
22 | Console.WriteLine("Failed to load README.md");
23 | Console.WriteLine(ex.GetBaseException().Message);
24 | Contents = (MarkupString)Markdig.Markdown.ToHtml("# BlazorBinding\n" +
25 | "Sample Blazor App demonstrating various data binding scenarios\n" +
26 | "\n" +
27 | "## Simple Cascade\n" +
28 | "Demonstrates how CascadingValue is a one-way data transfer, which updates the subscriber but not the publisher.\n" +
29 | "\n" +
30 | "## Cascade With Callback\n" +
31 | "Demonstrates how you can add a Callback Action to update the CascadingValue from subscriber to publisher.\n" +
32 | "\n" +
33 | "## Simple Binding\n" +
34 | "Demonstrates the use of parameter binding, which is a one-way binding like the CascadingValue, but specific to the bound Component.\n" +
35 | "\n" +
36 | "## Simple Binding With Callback\n" +
37 | "Demonstrates how you can add a Callback Action to update the parent values from the child.\n" +
38 | "\n" +
39 | "## Value Binding\n" +
40 | "Demonstrates how the bind-Value syntax works in a one-way mode, like simple binding.\n" +
41 | "*This is considered to be a bug by many*\n" +
42 | "\n" +
43 | "## Value Binding With Callback\n" +
44 | "Demonstrates how you can update the parent from a child component by invoking the _required_ ValueChanged Action.\n" +
45 | "\n" +
46 | "## Value Binding With Callback + Refresh\n" +
47 | "Demonstrates how you can ensure the parent knows a child component has updated data, and trigger a refresh.\n" +
48 | "\n" +
49 | "## Value Binding Class Object" +
50 | "Demonstrates how to two-way bind a list of objects with multiple properties." +
51 | "\n" +
52 | "## The Problem With Clicks - \"Propagation\"\n" +
53 | "Demonstrates how events on standard html elements propagate in Blazor. This is very bad.\n" +
54 | "\n" +
55 | "## Using CascadingValue To Share A Global Component - Dialog\n" +
56 | "Demonstrates how to use CascadingValue to share a component from MainLayout so that it is globally accessible.\n" +
57 | "\n" +
58 | "## Autocomplete text input" +
59 | "Demonstrates how to perform autocomplete on a text input." +
60 | "\n" +
61 | "## ViewModel Binding" +
62 | "Demonstrates a simple method to enable a page to bind a ViewModel that automatically hooks into StateHasChanged." +
63 | "\n" +
64 | "### Summary\n" +
65 | "\n" +
66 | "In all cases, some kind of callback action is required to notify the parent component of a change in the data.\n" +
67 | "This is, in my opinion OK - as it gives me control of the data and UI - however, some people consider the manual intervention required to be a bug.\n" +
68 | "\n" +
69 | "I have not included any examples of using \"State\" to achieve two way binding, although that is also possible, it would also require some kind of callback notification.\n" +
70 | "");
71 | }
72 | }
73 |
74 | //
75 | }
--------------------------------------------------------------------------------
/BlazorBinding/Pages/SimpleBinding.razor:
--------------------------------------------------------------------------------
1 | @page "/sb"
2 |
3 | Simple Binding Value - "One Way Binding"
4 |
5 | This is the parent control
6 |
7 | The second checkbox will also change because of the Value parameter.
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | This is the Child control
20 |
21 | Try clicking the checkbox - it will not update the parent Value.
22 |
23 |
24 |
31 | The CheckBox3 implementation :
32 | Invoking StateHasChanged
44 |
45 |
46 |
47 |
48 | Last refresh @DateTime.Now
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | Now click the button to refresh this page - nothing will change except the Last Refresh time, because the Value parameter is a one-way binding.
57 |
58 | Refresh",
60 | })" />
61 |
62 |
63 |
64 | Page implementation:
65 |
66 | StateHasChanged();",
70 | "}",
71 | })"/>
72 |
73 | @functions
74 | {
75 | bool ParentValue;
76 | void Refresh(MouseEventArgs args) => StateHasChanged();
77 | string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
78 | }
79 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/SimpleBindingCallback.razor:
--------------------------------------------------------------------------------
1 | @page "/sbc"
2 | Simple Binding With Callback - "Two Way Binding"
3 |
4 | This is the parent control
5 |
6 | Try clicking the checkbox - the second checkbox will also change because of the Value parameter.
7 |
8 |
9 |
10 |
11 |
12 |
13 | This is the Child control
19 |
20 | This is the child control, try clicking the checkbox - it will update the parent Value.
21 |
22 |
23 | The CheckBox4 implementation :
28 | Here we bind to a local proxy value so we can fire the Callback when the local value changes.
29 | Callback { get; set; }",
33 | "bool LocalValue { get { return Value; } set { Callback?.Invoke(value); } }",
34 | "}"
35 | })"/>
36 |
37 |
38 |
39 | Invoking StateHasChanged
40 |
41 |
42 |
43 |
44 | Last refresh @DateTime.Now
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | Page implementation:
53 |
54 |
55 | Now click the button to refresh this page - nothing will change except the Last Refresh time, because we are propogating the value back from Child to Parent and refreshing the Parent.
56 |
57 | Refresh",
59 | "@functions {",
60 | "bool ParentValue;",
61 | "void Refresh(MouseEventArgs args) => StateHasChanged();",
62 | "void UpdateValue(bool value) { ParentValue = value; Refresh(null); })",
63 | "}"
64 | })"/>
65 |
66 |
67 |
68 | @code
69 | {
70 | bool ParentValue;
71 | void Refresh(MouseEventArgs args) => StateHasChanged();
72 | void UpdateValue(bool value) { ParentValue = value; Refresh(null); }
73 | string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
74 | }
--------------------------------------------------------------------------------
/BlazorBinding/Pages/SimpleCascade.razor:
--------------------------------------------------------------------------------
1 | @page "/sc"
2 |
3 | Simple Cascading Value - "One Way Binding"
4 |
5 |
6 | This is the parent control
7 |
8 | Try clicking the checkbox - the second checkbox will also change because of the CascadingValue.
9 |
10 |
11 |
12 |
13 |
14 |
15 | This is the Child control
23 |
24 | Try clicking the checkbox - it will not update the parent Value.
25 |
26 |
27 |
28 |
30 |
31 |
32 | ",
34 | " The CheckBox implementation :
38 |
48 |
49 |
50 | Invoking StateHasChanged
51 |
52 |
53 |
54 |
55 | Last refresh @DateTime.Now
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | Now click the button to refresh this page - nothing will change except the Last Refresh time, because the CascadingValue is a one-way binding
64 |
65 | Refresh",
67 | })"/>
68 |
69 |
70 |
71 | Page implementation:
72 |
73 | StateHasChanged();",
78 | "}",
79 | })"/>
80 |
81 | @functions
82 | {
83 |
84 | bool ParentValue;
85 | void Refresh(MouseEventArgs args) => StateHasChanged();
86 | string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
87 |
88 | }
89 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/Suggestion.razor:
--------------------------------------------------------------------------------
1 | @page "/sugg"
2 | @using GenFu
3 | @using BlazorBinding.Components.AutoComplete
4 |
5 | @if (values == null)
6 | {
7 | Loading random list of names for the auto-complete list.
8 | }
9 | else
10 | {
11 | There are @values?.Count names in the auto-complete list.
12 | }
13 |
14 |
15 |
16 | @context
17 |
18 |
19 |
20 | Page Code values;
28 |
29 | protected override async Task OnParametersSetAsync()
30 | {
31 | await base.OnParametersSetAsync();
32 | Task.Factory.StartNew(LoadData);
33 | }
34 | void LoadData()
35 | {
36 | values = A.ListOf(200).Select(p => $"{p.FirstName} {p.LastName}").Distinct().ToList();
37 | Task.Factory.StartNew(async () => await LoadCode());
38 | StateHasChanged();
39 | }
40 | async Task LoadCode()
41 | {
42 | try
43 | {
44 | var stream = await httpClient.GetStringAsync("https://raw.githubusercontent.com/SQL-MisterMagoo/BlazorBinding/master/BlazorBinding/Pages/Suggestion.cshtml");
45 | PageContents = stream.Split(Environment.NewLine.ToCharArray());
46 | StateHasChanged();
47 | }
48 | catch (Exception ex)
49 | {
50 | Console.WriteLine("Failed to load Suggestion.cshtml");
51 | Console.WriteLine(ex.GetBaseException().Message);
52 | }
53 | }
54 | class Person
55 | {
56 | public string FirstName { get; set; }
57 | public string LastName { get; set; }
58 | public Person()
59 | {
60 |
61 | }
62 | }
63 | //
64 | }
65 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/TheProblemWithClicks.razor:
--------------------------------------------------------------------------------
1 | @page "/tpwc"
2 |
3 | The Problem With Clicks - "Propagation"
4 |
5 |
6 | This is the parent control
7 |
8 | Try clicking the parent -
9 |
10 |
11 |
12 | ",
14 | })" />
15 | ParentPingValue ? \"ping-on\" : \"ping-off\";",
19 | "void OnParentClick(MouseEventArgs args) => ParentPingValue = !ParentPingValue;",
20 | "}",
21 | })" />
22 |
23 | This is the child control
24 |
25 | Try clicking the child and/or the hide/show code buttons and watch the parent.
26 |
27 |
28 |
29 | ",
31 | })" />
32 | ChildPingValue ? \"ping-on\" : \"ping-off\";",
36 | "void OnChildClick(MouseEventArgs args) => ChildPingValue = !ChildPingValue;",
37 | "}",
38 | })" />
39 |
40 | This is the grandchild control
41 |
42 | Try clicking the grandchild
43 |
44 |
45 |
46 | ",
48 | })" />
49 | GrandChildPingValue ? \"ping-on\" : \"ping-off\";",
53 | "void OnGrandChildClick(MouseEventArgs args) => GrandChildPingValue = !GrandChildPingValue;",
54 | "}",
55 | })" />
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | @code
64 | {
65 | bool ParentPingValue;
66 | string ParentPingCss => ParentPingValue ? "ping-on" : "ping-off";
67 | void OnParentClick(MouseEventArgs args) { ParentPingValue = !ParentPingValue; StateHasChanged(); }
68 |
69 | bool ChildPingValue;
70 | string ChildPingCss => ChildPingValue ? "ping-on" : "ping-off";
71 | void OnChildClick(MouseEventArgs args) { ChildPingValue = !ChildPingValue; StateHasChanged(); }
72 |
73 | bool GrandChildPingValue;
74 | string GrandChildPingCss => GrandChildPingValue ? "ping-on" : "ping-off";
75 | void OnGrandChildClick(MouseEventArgs args) { GrandChildPingValue = !GrandChildPingValue; StateHasChanged(); }
76 | }
--------------------------------------------------------------------------------
/BlazorBinding/Pages/ValueBinding.razor:
--------------------------------------------------------------------------------
1 | @page "/vb"
2 |
3 | Value Binding - "One Way Value Passing"
4 |
5 |
6 | This is the parent control
7 |
8 | Try clicking the checkbox - the second checkbox will also change because of the Value parameter.
9 |
10 |
11 |
12 |
13 |
14 |
15 | This is the Child control
23 |
24 | Try clicking the checkbox - it will not update the parent Value.
25 |
26 |
27 | The CheckBox5 implementation :
34 | The "ValueChanged" Action is required by the Blazor engine because we are using the bind-Value syntax.
35 | ValueChanged { get; set; })",
43 | "}",
44 | })"/>
45 |
46 |
47 |
48 |
49 |
50 | Invoking StateHasChanged
51 |
52 |
53 |
54 |
55 | Last refresh @DateTime.Now
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | Now click the button to refresh this page - the child checkbox will revert back to match the parent value
64 | because we are doing nothing to propogate the value change from child to parent
65 | and Blazor does not do it for us, despite requiring the ValueChanged Action.
66 |
67 | Refresh",
69 | })"/>
70 |
71 |
72 |
73 | Page implementation:
74 |
75 | StateHasChanged();",
80 | "}",
81 | })"/>
82 |
83 | @functions
84 | {
85 |
86 | bool ParentValue;
87 | void Refresh(MouseEventArgs args) => StateHasChanged();
88 | string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
89 |
90 | }
91 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/ValueBindingCallback.razor:
--------------------------------------------------------------------------------
1 | @page "/vbc"
2 |
3 | Value Binding With Callback - "Two Way Value Binding - No Refresh"
4 |
5 |
6 | This is the parent control
7 |
8 | Try clicking the checkbox - the second checkbox will also change because of the Value parameter.
9 |
10 |
11 |
12 |
13 |
14 |
15 | This is the Child control
23 |
24 | Try clicking the checkbox - it will not update the parent Value until you click Refresh below.
25 |
26 |
27 | The CheckBox6 implementation :
34 | We use a custom setter so we can fire the ValueChanged event when the local value changes.
35 | Invoking the ValueChanged event is required in Blazor.
36 | ValueChanged { get; set; })",
45 | "}",
46 | })" />
47 |
48 |
49 |
50 | Invoking StateHasChanged
51 |
52 |
53 |
54 |
55 | Last refresh @DateTime.Now
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | Now click the button to refresh this page - the Parent checkbox will revert back to match the Child's value
64 | because we are propogating the value change from child to parent but there is no automatic Refresh
65 | The value has propogated back from Child to Parent, but the parent has not refreshed.
66 |
67 | Refresh",
69 | })"/>
70 |
71 |
72 |
73 | Page implementation:
74 |
75 | StateHasChanged();",
80 | "}",
81 | })"/>
82 |
83 |
84 | @functions
85 | {
86 |
87 | bool ParentValue;
88 | void Refresh(MouseEventArgs args) => StateHasChanged();
89 | string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
90 |
91 | }
92 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/ValueBindingCallbackRefresh.razor:
--------------------------------------------------------------------------------
1 | @page "/vbcr"
2 |
3 | Value Binding With Callback - "Two Way Value Binding - With Refresh"
4 |
5 |
6 | This is the parent control
7 |
8 | Try clicking the checkbox - the second checkbox will also change because of the @@bind-Value parameter.
9 |
10 |
11 |
12 |
13 |
14 |
15 | This is the Child control
22 |
23 | Try clicking the checkbox - it will update the parent Value.
24 |
25 |
26 | The CheckBox6 implementation :
33 | Here we bind to a local proxy value so we can fire the ValueChanged event when the local value changes.
34 | ValueChanged { get; set; })",
43 | "}",
44 | })"/>
45 |
46 |
47 |
48 | Page implementation:
49 |
50 | StateHasChanged();",
56 | "}",
57 | })" />
58 |
59 | @functions
60 | {
61 |
62 | bool localParentValue;
63 | bool ParentValue { get { return localParentValue; } set { localParentValue = value; Refresh(null); } }
64 | protected void Refresh(MouseEventArgs args) { StateHasChanged(); }
65 | string StateHasChangedCss => ParentValue ? "ping-on" : "ping-off";
66 |
67 | }
68 |
--------------------------------------------------------------------------------
/BlazorBinding/Pages/ValueBindingClassCallbackRefresh.razor:
--------------------------------------------------------------------------------
1 | @using BlazorBinding.Models
2 | @page "/vbccr"
3 |
4 | Value Binding a Class object With Callback - "Two Way Class Binding - With Refresh"
5 |
6 |
7 | This is the parent control with @(data?.Count) items.
8 |
9 | Try adding a new user, it should add them to the list.
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | @LastChange
19 |
20 |
21 |
22 |
27 |
28 |
29 |
30 | @@
31 |
32 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ",
46 | " ",
47 | " ",
69 | })" />
70 |
71 |
75 | ListData { get; set; }",
126 | " [Parameter] public Action> ListDataChanged { get; set; }",
127 | " [Parameter] public Action ChangeAction { get; set; }",
128 | " [Parameter] public RenderFragment ListItemContent { get; set; }",
129 | "",
130 | " string GetActive(TList item)",
131 | " {",
132 | " return item?.Equals(activeItem) ?? false ? \"active\" : \"\";",
133 | " }",
134 | "",
135 | " void SelectItem(TList item)",
136 | " {",
137 | " activeItem = item;",
138 | " ChangeAction?.Invoke(item, \"Selected\");",
139 | " StateHasChanged();",
140 | " }",
141 | "",
142 | " void DeleteItem(TList item)",
143 | " {",
144 | " if (item.Equals(activeItem))",
145 | " activeItem = default(TList);",
146 | " ListData.Remove(item);",
147 | " ChangeAction?.Invoke(item, \"Deleted\");",
148 | " StateHasChanged();",
149 | " }",
150 | "}",
151 | })" />
152 |
153 |
154 | This is the Child control with @(data?.Count) items.
76 |
77 | @*",
89 | " ",
90 | " ",
92 | "",
93 | })" />
94 | Nothing to display
",
102 | "}",
103 | "else",
104 | "{",
105 | " foreach (var listItem in ListData)",
106 | " {",
107 | " Try editing a user - it will update the parent control.
*@ 78 |
79 |
80 |
81 |
82 |
84 |
85 |
86 |
87 | @context.Name ( @($"@{context.NickName}") )
83 |@context.Name @($\"@{context.NickName}\")
", 91 | "The ListView implementation :
95 |",
108 | " ",
116 | "
",
117 | " }",
118 | "}",
119 | })" />
120 | 155 | Page implementation: 156 |
157 |View Model Binding - "Two Way Value Binding"
4 | 5 |
6 |
20 |
21 | This is the parent control
7 |
8 |
19 | Try clicking the checkbox - the second checkbox will also change because of the bound Value parameter.
9 |
10 |
11 |
12 |
13 |
14 |
15 |
22 |
49 |
50 | This is the Child control
23 |
24 | ValueChanged { get; set; })",
45 | "}",
46 | })" />
47 |
48 | Try clicking the checkbox - it will also update the parent Value because we are using a ViewModel.
25 |
26 |
27 |
30 | The CheckBox6 implementation :
34 |We use a custom setter so we can fire the ValueChanged event when the local value changes.
35 |Invoking the ValueChanged event is required in Blazor.
36 |Page Functions
51 |
8 |
18 |
19 |
10 |
82 |
83 |
84 | @functions {
85 | bool collapseNavMenu = true;
86 |
87 | void ToggleNavMenu()
88 | {
89 | collapseNavMenu = !collapseNavMenu;
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/BlazorBinding/Startup.cs:
--------------------------------------------------------------------------------
1 | using BlazorBinding.Services;
2 | using Microsoft.AspNetCore.Components.Builder;
3 | using Microsoft.Extensions.DependencyInjection;
4 |
5 | namespace BlazorBinding
6 | {
7 | public class Startup
8 | {
9 | public void ConfigureServices(IServiceCollection services)
10 | {
11 | services.AddSingleton
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `