Error: System.InvalidCastException with RadzenDropDown

Radzen.Blazor Components
1

Having issues embedding RadzenDropDown in a child form. My code is as below:

    <EditForm Model="@Order"
              OnValidSubmit="@HandleValidSubmit"
              OnInvalidSubmit="@HandleInvalidSubmit">
        <DataAnnotationsValidator />
        <div class="mb-3">
            <label for="jobnumber" class="form-label">Job Number</label>
            <InputText id="jobnumber" class="form-control" @bind-Value="Order.JobNumber" />
            <ValidationMessage For="() => Order.JobNumber" />

            <div class="form-group">
                <div class="form=group">
                    <button type="button" class="btn btn-secondary" 
                        @onclick="@(() => Order.Lines.Add(new OrderLine()))">Add Line</button>
                </div>

                @for (var i = 0; i < Order.Lines.Count; i++)
                {
                    var index = i;
                    var orderLine = Order.Lines[i];

                    <h5>Line @(i+1)</h5>

                    <div class="form-group">
                        <label for="products" class="form-label">Product</label>

                        @*<InputSelect id="product" class="form-select selectpicker" @bind-Value="orderLine.ProductId">
                            @if (Products is not null)
                            {
                                @foreach (var p in Products)
                                {
                                    <option value="@p.ProductId">@p.Name</option>
                                }
                            }
                        </InputSelect>*@

                        <RadzenDropDown FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
                                        FilterOperator="StringFilterOperator.Contains" 
                                        AllowFiltering="true"
                                        Data=@Products 
                                        TextProperty="Name" 
                                        ValueProperty="ProductID" 
                                        AllowClear="true" 
                                        @bind-Value="orderLine.ProductId" 
                                        Style="width: 100%; max-width: 400px;" />
                    
                    </div>

                }
            </div>

        </div>
        @if (IsEdit)
        {
            <button type="submit" class="btn btn-primary" disabled="@IsBusy">Update</button>
            <button type="button" class="btn btn-secondary" @onclick="@HandleCancel" disabled="@IsBusy">Cancel</button>
        }
        else
        {
            <button type="submit" class="btn btn-primary" disabled="@IsBusy">Add</button>
        }

    </EditForm>

So the idea is that the user can click an 'Add Line' button which will allow them to add an additional line to the current order. The drop-down allows the user to select a single product.

The Drop Down renders perfectly, and I can filter it as expected. However when I click an option in the list, I get an 'Error: System.InvalidCastException' error in the browser console.

I can't change the @bind-value to just 'ProductId' as it doesn't exist in the context as it is a value assigned to orderLine.ProductId

If I use a standard 'InputSelect' element (the one commented out above) it works perfectly. I really want to use the filterable Radzen component though.

What am I doing wrong?

2

Any stack trace to check what exactly is invalid?

3

Hi @enchev

I get no server-side error, the only error I get is in the browser:

image
image694×352 50 KB

This only happens after I select a valid option from the list. The list remains empty after the error is thrown.

I get the feeling the issue is related to the fact that the component is rendered inside the 'for' loop but I cannot for the life of me figure out why what I have is not working. I need it to be inside the loop as I don't know how many lines (products) will be added to the order....

4

Try to change this to:

Data=@Products.Select(p => p)
5

Hi @enchev

Exactly the same result I am afraid...

What I don't understand is why the component is trying to assign the value 'Product' (or more completely GuinnessPartnershipOMS.Shared.Domain.Product) to the value.... I have explicitly set the ValueProperty to ProductId, a property of OrderLine

6

If it helps, here are the structures of my DbContext classes:

public class Order
{
    [Required]
    public int OrderId { get; set; }
    [Required]
    public DateTime Date { get; set; }
    [Required]
    [StringLength(50)]
    public string JobNumber { get; set; }
    public List<OrderLine> Lines { get; set; } = new List<OrderLine>();
}

public class OrderLine
{
    public int OrderLineId { get; set; }
    public Order Order { get; set; }
    public Product Product { get; set; }
    public int ProductId { get; set; }
    public int Quantity { get; set; }
}

public class Product
{
    [Required]
    public int ProductId { get; set; }
    [Required]
    [StringLength(50)]
    public string? Name { get; set; }
    [StringLength(200)]
    public string? Description { get; set; }
    [StringLength(200)]
    public string? ImageUrl { get; set; }

}

Nothing terribly complicated....

7

I'm afraid that I don't know what's causing this exception. Try to attach the source code of Radzen.Blazor to your project to debug it.

8

This should be set to ProductId - the casing is important.

1 Like
9

@korchev Can't believe I missed that! I'll give that a go shortly.

10

@korchev That has cracked it! Thank you so much. I am now going to go and hide in embarrassment!

In case anyone else hits the same issue, all I have changed from my code above is to camel case ProductId in the ValueProperty attribute, to match my class property.

11

The nameof C# keyword helps a lot to prevent such cases e.g.

ValueProperty="@nameof(Product.ProductId)"
1 Like