{"id":1506,"date":"2025-06-27T10:48:22","date_gmt":"2025-06-27T10:48:22","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=1506"},"modified":"2026-02-05T12:05:43","modified_gmt":"2026-02-05T12:05:43","slug":"how-do-you-pass-data-between-blazor-components","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/how-do-you-pass-data-between-blazor-components\/","title":{"rendered":"How Do you Pass Data Between Blazor Components?"},"content":{"rendered":"\n

Blazor allows components to communicate with each other in different ways, depending on how they are related. You can pass data from a parent to a child, notify a parent of an action from the child, or even share data across unrelated components. Understanding these methods helps you build clean, maintainable applications in Blazor.<\/p>\n\n\n\n

Different Ways to Pass Down Data Between Blazor Components<\/h2>\n\n\n\n

1. Using Parameters (Parent to Child)<\/h3>\n\n\n\n

The most common way to pass data.<\/p>\n\n\n\n

ParentComponent.razor<\/strong><\/p>\n\n\n\n

@page \"\/parent\"\n<h3>Parent Component<\/h3>\n<ChildComponent Message=\"Hello from Parent!\" \/><\/code><\/pre>\n\n\n\n
ChildComponent.razor<\/strong><\/p>\n\n\n\n
<h4>Child Component<\/h4>\n<p>@Message<\/p>\n\n@code {\n    [Parameter]\n    public string Message { get; set; }\n}<\/code><\/pre>\n\n\n\n
Explanation: <\/strong>The parent passes a value to the child via the Message parameter.<\/p>\n\n\n\n
2. Using EventCallback (Child to Parent)<\/h3>\n\n\n\n
Passing Data from Child to Parent using EventCallback<\/h4>\n\n\n\n
Useful when the child component needs to notify the parent of an action.<\/p>\n\n\n\n
ParentComponent.razor<\/strong><\/p>\n\n\n\n
<h3>Parent<\/h3>\n<p>Received: @ChildData<\/p>\n<ChildComponent OnDataSent=\"ReceiveDataFromChild\" \/>\n\n@code {\n    private string ChildData;\n\n    private void ReceiveDataFromChild(string data)\n    {\n        ChildData = data;\n    }\n}<\/code><\/pre>\n\n\n\n
ChildComponent.razor<\/strong><\/p>\n\n\n\n
<button @onclick=\"SendData\">Send Data to Parent<\/button>\n\n@code {\n    [Parameter]\n    public EventCallback<string> OnDataSent { get; set; }\n\n    private async Task SendData()\n    {\n        await OnDataSent.InvokeAsync(\"Hello Parent!\");\n    }\n}<\/code><\/pre>\n\n\n\n
Explanation<\/strong>: <\/strong>EventCallback allows invoking a method defined in the parent from the child.<\/p>\n\n\n\n
3. Using Cascading Values and Parameters<\/h3>\n\n\n\n
Great for passing data to deeply nested components without manually passing props.<\/p>\n\n\n\n
App.razor or a Parent Component<\/strong><\/p>\n\n\n\n
<CascadingValue Value=\"AppTitle\">\n    <NestedComponent \/>\n<\/CascadingValue>\n\n@code {\n    string AppTitle = \"Blazor Blog App\";\n}<\/code><\/pre>\n\n\n\n
NestedComponent.razor<\/strong><\/p>\n\n\n\n
<p>Cascading Value: @Title<\/p>\n\n@code {\n    [CascadingParameter]\n    public string Title { get; set; }\n}<\/code><\/pre>\n\n\n\n
Explanation: <\/strong>Useful for passing themes, user info, or localization strings down the component tree.<\/p>\n\n\n\n
4. Using a Shared Service (Unrelated Components or Sibling Communication via State)<\/h3>\n\n\n\n
Shared state or data across unrelated components.<\/p>\n\n\n\n
AppState.cs (Service)<\/strong><\/p>\n\n\n\n
public class AppState\n{\n    public string SharedMessage { get; set; }\n\n    public event Action OnChange;\n\n    public void SetMessage(string message)\n    {\n        SharedMessage = message;\n        NotifyStateChanged();\n    }\n\n    private void NotifyStateChanged() => OnChange?.Invoke();\n}<\/code><\/pre>\n\n\n\n
Program.cs (register the service)<\/strong><\/p>\n\n\n\n
builder.Services.AddScoped<AppState>();<\/code><\/pre>\n\n\n\n
SenderComponent.razor<\/strong><\/p>\n\n\n\n
@inject AppState AppState\n\n<input @bind=\"Message\" \/>\n<button @onclick=\"SendMessage\">Send<\/button>\n\n@code {\n    private string Message;\n\n    private void SendMessage()\n    {\n        AppState.SetMessage(Message);\n    }\n}<\/code><\/pre>\n\n\n\n
ReceiverComponent.razor<\/strong><\/p>\n\n\n\n
@inject AppState AppState\n\n<p>Received Message: @AppState.SharedMessage<\/p>\n\n@code {\n    protected override void OnInitialized()\n    {\n        AppState.OnChange += StateHasChanged;\n    }\n\n    public void Dispose()\n    {\n        AppState.OnChange -= StateHasChanged;\n    }\n}<\/code><\/pre>\n\n\n\n
Explanation<\/strong>: This is similar to a global event bus great for managing state or broadcasting data changes.<\/p>\n\n\n\n
5. Using .NET Events or Delegate Actions<\/h3>\n\n\n\n
You can pass delegate methods directly between components.<\/p>\n\n\n\n
<!-- ParentComponent.razor -->\n<ChildComponent ActionCallback=\"@DoSomething\" \/>\n\n@code {\n    private void DoSomething()\n    {\n        Console.WriteLine(\"Called from child!\");\n    }\n}<\/code><\/pre>\n\n\n\n
<!-- ChildComponent.razor -->\n<button @onclick=\"ActionCallback\">Call Parent Method<\/button>\n\n@code {\n    [Parameter]\n    public Action ActionCallback { get; set; }\n}<\/code><\/pre>\n\n\n\n
Summary<\/h2>\n\n\n\n
Method<\/strong><\/td>Direction<\/strong><\/td>Use Case<\/strong><\/td><\/tr>
[Parameter]<\/strong><\/td>Parent \u2192 Child<\/td>Passing data down<\/td><\/tr>
EventCallback<\/strong><\/td>Child \u2192 Parent<\/td>Triggering parent methods<\/td><\/tr>
CascadingParameter<\/strong><\/td>Parent \u2192 Deep Child<\/td>App-wide data (e.g., user, theme)<\/td><\/tr>
Shared Service<\/strong><\/td>Any \u2194 Any<\/td>Global\/shared state (siblings, global)<\/td><\/tr>
Delegate \/ Action<\/strong><\/td>Flexible<\/td>Passing logic as parameters<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Blazor provides a flexible and powerful component communication system. By using the right technique for the right scenario, you can ensure your Blazor apps remain modular, maintainable, and performant whether it’s a dashboard, a blog, or a complex enterprise portal.<\/p>\n","protected":false},"excerpt":{"rendered":"
Blazor allows components to communicate with each other in different ways, depending on how they are related. You can pass data from a parent to a child, notify a parent of an action from the child, or even share data across unrelated components. Understanding these methods helps you build clean, maintainable applications in Blazor. Different […]<\/p>\n","protected":false},"author":2,"featured_media":1511,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,3],"tags":[],"class_list":["post-1506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dot-net","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=1506"}],"version-history":[{"count":9,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1506\/revisions"}],"predecessor-version":[{"id":1517,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1506\/revisions\/1517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/1511"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=1506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=1506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=1506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}