Providing empty data from a model to a component

Question

I have two components like this:

<div class="col">
  <p>To Do</p>
  <Dropzone Items="MyFirstList" Class="h-100">
      <ChildContent>
          <div class="card" style="border-left: 3px solid black">
              <div class="card-body">
                  <h6>@context.Title</h6>                    
              </div>
          </div>
      </ChildContent>
  </Dropzone>
</div>
<div class="col">
  <p>In Progress</p>
  <Dropzone Items="MyThirdList" Class="h-100">
      <ChildContent>
          <div class="card" style="border-left: 3px solid orange">
              <div class="card-body">
                  <h6>@context.Title</h6>
              </div>
          </div>
      </ChildContent>
  </Dropzone>
</div>

The two components take these data respectively:

public List<TodoItem> MyFirstList = new List<TodoItem>()
{
  new TodoItem(){Title = "Item 1"},
  new TodoItem(){Title = "Item 2"},
  new TodoItem(){Title = "Item 3"},
  new TodoItem(){Title = "Item 4"},
  new TodoItem(){Title = "Item 5"},
  new TodoItem(){Title = "Item 6"},
  new TodoItem(){Title = "Item 7"},
};
  
public List<TodoItem> MyThirdList = new List<TodoItem>()
{

};

Now there is no issue with the code I provided above (code is from https://github.com/Postlagerkarte/blazor-dragdrop ) it's a drag and drop function that works perfectly You drag items from MyFirstList component to MyThirdList.

Since it works, I wanted to get rid of the dummy data and replace it with my own data model, and here is the data for the first component:

protected override async Task OnInitializedAsync()
{
  await this.GetTestSuites();
}

TestSuiteModel MyFirstList;
protected async Task GetTestSuites()
{
  // url = ... 
  MyFirstList = await TestSuiteService.GetTestSuites(url);
  await base.OnInitializedAsync();
}

And the component as:

<Dropzone Items="MyFirstList.value" Class="h-100">
  <ChildContent>
      <div class="card" style="border-left: 3px solid black">
          <div class="card-body">
              <h6>@context.id</h6>
         </div>
      </div>
  </ChildContent>
</Dropzone>

So the above works perfectly but I need my second component to be empty, but for some reason feeding it an empty data throw an error

public List<TestSuiteModel> MySecondList = new List<TestSuiteModel>()
{
    new Value () {id = 1}, // disambiguous error here
};


<Dropzone Items="MyThirdList.value" Class="h-100">
  <ChildContent>
      <div class="card" style="border-left: 3px solid black">
          <div class="card-body">
              <h6>@context.id</h6>
          </div>
      </div>
  </ChildContent>
</Dropzone>

So the problem is with the above component and List. I don't know how to provide is an empty list.

This is what TestSuiteModel looks like btw:

namespace ABC.Models.TestSuiteModel 
{
    public class TestSuiteModel 
    {
        public List<Value> value { get; set; }
        public int count { get; set; }
    }

    public class Value
    {
        public int id { get; set; }
        public string name { get; set; }
    }
}

Answer 1

You should make sure the collection property is initialized, as internally, this library iterates the collection, which throws if null for obvious reasons.

Add the following initialization:

    public class TestPlansModel
    {
        public List<Value> value { get; set; } = new List<Value>();
        public int count { get; set; }
    }

So the above works perfectly but I need my second component to be empty, but for some reason feeding it an empty data throw an error

in the example you have provided, the type of the list is different than the type of the model you are initializing.

Answer 2

Instead of the new Value () {id = 1}, // disambiguous error here in the list initiaizer, write new TestSuiteModel() { value = new Value () { id = 1 } } .

This should initialize the list with an empty TestSuiteModel.

Edit: Forgot the value list, here's the initialization including everything:

public List<TestSuiteModel> MySecondList = new List<TestSuiteModel>()
{
    new TestSuiteModel()
    {
        value = new List<Value>()
            {
                new Value() { id = 1 }
            }
    }
};