Open page as a dialog problem

Radzen.Blazor Components
1

Hello,

I want to open a dialog as in this example (Blazor Dialog component) but unfortunately, the dialog does not open in my case. (There is no error either.) What may I have missed? I kindly request your help.

Thank you.

Also registered dialog service

builder.Services.AddScoped<DialogService>();

Here is the page I want to open as a dialog

@page "/dialogcard/{OrderID}"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Orders
@inject IViewOrderByIdUseCase ViewOrderByIdUseCase
@inject Radzen.DialogService dialogService


<div class="row">
    <div class="col-lg-6 d-flex">
        <RadzenCard Style="width: 100%; overflow: hidden;">
            <h3 class="h5">Contact</h3>
            <div class="d-flex flex-row">
                <RadzenImage Path="@order.DoneBy" Class="rounded-circle float-left mt-1 mr-3" Style="width: 90px; height: 90px;" />
                <div>
                    <div>Employee</div>
                    <b>@order.DoneBy?</b>
                    <div class="mt-3">Company</div>
                    <b>@order.Customer?.Name</b>
                </div>
            </div>
        </RadzenCard>
    </div>
    <div class="col-lg-6 d-flex">
        <RadzenCard Style="width: 100%; overflow: hidden;">
            <h3 class="h5">Delivery Information</h3>
            <div class="row">
                <div class="col">
                    <div>Address</div>
                    <b>@(order.OrderDetails.Where(od => od.OrderId == OrderID).Select(x => x.ShippingNumber)), @(order.OrderDetails.Where(od => od.OrderId == OrderID).Select(x => x.TrackingNumber))</b>
                    <div class="mt-3">Vendor</div>
                    <b>@(order.OrderDetails.Where(od => od.OrderId == OrderID).Select(x => x.Vendor.Name))</b>
                </div>
            </div>
        </RadzenCard>
    </div>
</div>
<div class="row my-4">
    <div class="col-md-12">
        <RadzenCard>
            <h3 class="h5">
                Order @OrderID Details
                <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.OrderDetails.Where(od => od.OrderId == OrderID).Select(x => x.TotalBuyPrice))}") Class="float-right" />
            </h3>
            <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                            Data="@(orderDetails.Where(o => o.Order.Id == OrderID))" TItem="OrderDetail" ColumnWidth="200px" Class="mt-3">
                <Columns>
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Order.OrderDate" Title="Order Date" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
                </Columns>
            </RadzenDataGrid>
        </RadzenCard>
    </div>
</div>
<div class="row">
    <div class="col-md-12 text-right">
        <RadzenButton Click="@((args) => dialogService.Close(false))" ButtonStyle="ButtonStyle.Secondary" Text="Cancel" Style="width: 120px" Class="mr-1" />
        <RadzenButton Click="@((args) => dialogService.Close(true))" Text="OK" Style="width: 120px" />
    </div>
</div>

@code {
    [Parameter] public int OrderID { get; set; }

    Order? order;
    IEnumerable<OrderDetail> orderDetails;
    IList<Order?> SelectedOrders { get; set; }
    IEnumerable<Order?> _orders = new List<Order?>();

    protected override async Task OnInitializedAsync()
    {
        order = await ViewOrderByIdUseCase.ExecuteAsync(OrderID);
        SelectedOrders = new List<Order?> { _orders.FirstOrDefault() };
    }
}

Here is the page I am triggering dialog

@page "/report"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Customer
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.Vendor
@using Microsoft.AspNetCore.Components
@using System.Globalization
@inject ILogger<ExportOrders> Logger
@inject IWebHostEnvironment Environment
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IViewAllVendorsUseCase ViewAllVendorsUseCase
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject IViewAllCustomersUseCase ViewAllCustomersUseCase
@inject DialogService DialogService
@implements IDisposable
<style>
    .btns {
        padding: 5px;
        width: calc(13% - 10px);
    }
    

</style>

<h1>Export Orders</h1>
<br/>

<div class="m-4">
    <div class="row g-6">
        <div class="col-3">
            <label class="form-label">Vendor</label>
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
                                    Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnChange(args))
                                    Class="w-100"/>

        </div>
        <div class="col-3">
            <label class="form-label">Order Date Start</label>
            <RadzenDatePicker @bind-Value=@startValue DateFormat="d" Class="w-100" Change=@(args => OnStartDateChange(args)) />
        </div>
        <div class="col-3">
            <label class="form-label">Order Date End</label>
            <RadzenDatePicker @bind-Value=@endValue DateFormat="d" Class="w-100" Change=@(args => OnEndDateChange(args)) />
        </div>
        <div class="col-3">
            <label class="form-label">Order Status</label>
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@orderStatusList Name="Status" Change=@(args => OnStatusChange(args))/>
        </div>
    </div>
    <div class="mt-5">
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">
            <button type="button" class="btn btn-primary btns" @onclick="ExportExcel">
                Orders Excel Export
            </button>
        </div>
    </div>
</div>
<RadzenTabs>
    <Tabs>
        <RadzenTabsItem Text="Order Details">
            <RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" PageSize="10" AllowSorting="true" Data="@_orders" TItem="ReportViewModel"
                            PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced"
                            AllowVirtualization="true" Style="width: calc(100vw - 100px);" ColumnWidth="170px">

                <Columns>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px">
                        <Template Context="ReportViewModel">
                            @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
                        </Template>

                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product Number"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Code" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C}", (detail.BuyUnitPrice * (detail.CostRatio / 100)) + detail.BuyUnitPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C}", (detail.BuyUnitPrice * (detail.CostRatio / 100)) + detail.BuyUnitPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C}", (detail.BuyUnitPrice * (detail.CostRatio / 100)) + detail.BuyUnitPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px">
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C}", detail.BuyUnitPrice * detail.Quantity)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C}", detail.BuyUnitPrice * detail.Quantity)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C}", detail.BuyUnitPrice * detail.Quantity)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C}", detail.Quantity * detail.SellUnitPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C}", detail.Quantity * detail.SellUnitPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C}", detail.Quantity * detail.SellUnitPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
                        <Template Context="order">
                            <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order.OrderId))">
                            </RadzenButton>
                        </Template>
                    </RadzenDataGridColumn>

                </Columns>
            </RadzenDataGrid>
        </RadzenTabsItem>

    </Tabs>
</RadzenTabs>
@code {
    RadzenDataGrid<ReportViewModel?> _grid;
    DateTime? startValue = DateTime.Now.Date;
    DateTime? endValue = DateTime.Now.Date;
    DateTime? _startDate;
    DateTime? _endDate;
    string? _status;
    int _vendorId;
    int orderID;
    readonly List<string> orderStatusList = new() { "Completed", "Cancelled", "Continues" };
    IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
    IEnumerable<Vendor?> _vendors = new List<Vendor?>();
    IEnumerable<Customer?> _customers;

    protected override async Task OnInitializedAsync()
    {
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate);
        _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
        _customers = await ViewAllCustomersUseCase.ExecuteAsync();
        //_grid.OrderBy("OrderId");
        
    }
    

    public void Dispose()
    {
    // The DialogService is a singleton so it is advisable to unsubscribe.
        DialogService.Dispose();
      
    }
    void OnChange(object vendor)
    {
        _vendorId = Int32.Parse(vendor.ToString());

    }
    void OnStartDateChange(DateTime? value)
    {
        if(value != null){
            _startDate = value;
        }else{
            _startDate = null;
        }
        
    }
    void OnEndDateChange(DateTime? value)
    {
        if (value != null)
        {
            _endDate = value;
        }
        else
        {
            _endDate = null;
        }
    }
    void OnStatusChange(object status){
        if(status != null){
            _status = status.ToString();
        }else{
            _status = null;
        }
       
    }
    private async Task ExportExcel()
    {
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate);
        
    }

    private async Task OpenOrder(object args)
    {
        orderID = Int32.Parse(args.ToString());
        await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
            new Dictionary<string, object>() { { "OrderID", orderID } },
            new DialogOptions() { Width = "700px", Height = "570px", Resizable = true, Draggable = true });
    }
}
2

You've missing this step:

image
image1920×1080 176 KB

3

Thank you for your quick support @enchev. I added the RadzenDialog as follows:

@inherits LayoutComponentBase

<PageTitle>Vorlance</PageTitle>
<style>
    .pb-3,
    .py-3 {
        padding-bottom: 0.93rem !important;
    }
</style>
<div class="page">
    <div class="sidebar @NavMenuCssClass">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4 auth navbar-light">
            <div class="container-fluid toggler-container">
                <button title="Navigation menu" class="navbar-toggler custom-toggler" @onclick="ToggleNavMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span class="navbar-brand mb-0 h2" href="#">
                    <img src="/css/images/v.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
                    Vorlance
                </span>
                
            </div> 
            <a href="Identity/Account/Register">Register</a>
            <a href="Identity/Account/Login">Log in</a>
         
        </div>

        <article class="content px-4">
            @Body
            <RadzenDialog />
        </article>
    </main>
</div>
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Now I encountered an error;

System.NullReferenceException: Object reference not set to an instance of an object.
   at IMS.WebApp.Pages.Orders.DialogCardPage.<BuildRenderTree>b__0_0(RenderTreeBuilder __builder2) in C:\Users\197199\Source\Repos\IMS.WebApp\IMS.WebApp\Pages\Orders\DialogCardPage.razor:line 0
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Radzen.Blazor.RadzenCard.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Any idea what causes the error?

Thank you.

4

There is a null reference exception in your DialogCardPage. Use the Visual Studio debugger to debug it - most probably order is null.

1 Like
5

Blazor(?) starts to render HTML before OnInizialization executes. Then it execute OnInizialization and try render HTML again.
You need to check order for null in HTML-part of your dialog.

@if (order !=null)
{
    <div class="row">
    ...
   </div>
}
2 Likes