如何从 model 遍历数组

Question

I have an API which returns a reponse like this:

{
  "count": 1,
  "value": [
    {
      "id": "20",
      "url": "https://dev.azure.com/xxx/_apis/wit/workItems/20"
    },

    {
      "id": "21",
      "url": "https://dev.azure.com/xxx/_apis/wit/workItems/20"
    }
  ]
}

I am mapping the response to a C# model like this:

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

  public class Value
  {
    public string id { get; set; }
    public string url { get; set; }
  }
}

I initialize the model in my index.razor page as:

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


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

TestSuitesResult works fine as of this step, in that I can do a foreach loop and see the json reponse displayed on my blazor page.

The only issue I have is when I use the library: https://github.com/Postlagerkarte/blazor-dragdrop

The library says to use the drag and drop service as:

<Dropzone Items="MyItems">
  <div>@context.MyProperty</div>
</Dropzone>

MyItems is a sample array and MyProperty is an array key.

But when I use it like this, it doesn't work:

<Dropzone Items="TestSuitesResult">
  <div>@context.value</div>
</Dropzone>

I get an error saying TestSuitesResult isn't valid. I don't know how else to pass the array into the component

Answer 1

When the Dropzone component is rendered, it's possible the TestSuitesResult object isn't yet populated. You also aren't targeting the List object. Try the implementation below:

@if(TestSuitesResult != null)
    {
      <Dropzone Items="TestSuitesResult.value">
          <div>@context.url </div>
      </Dropzone>
    }

Answer 2

I think Dropzone component is trying to use the entire TestSuitesResult object as an array of items, but it expects an array of values. You should assign the value property of the TestSuitesResult object to the Items property of the Dropzone component instead:

<Dropzone Items="TestSuitesResult.value">
<div>@context.id</div>
</Dropzone>

Also, it's possible that the TestSuitesResult object isn't yet populated when the Dropzone component is rendered. To solve this issue, you can consider using a loading indicator to only render the Dropzone component after the TestSuitesResult object has been populated.

@if (TestSuitesResult != null)
{
 <Dropzone Items="TestSuitesResult.value">
 <div>@context.value</div>
 </Dropzone>
}
else
{
  // ... loading
}

Answer 3

try this

List<Value> TestSuitesResult;
protected async Task GetTestSuites()
{
  // url = ... 
  var model = await TestSuiteService.GetTestSuites(url);
  TestSuitesResult = model.value;

  await base.OnInitializedAsync();
}

Answer 4

The dropzone component actually expects you to provide a property which implements IList<T>

You can see this when pressing F12 within Visual Studio on the parameters name. Or within the code on Github.

public IList<TItem> Items { get; set; }

So all you'll need to do is to provide your Values to the component.

@if (TestSuitesResult != null)
{
    <Dropzone Items="TestSuitesResult.value">
        <div>@context.id</div> @* access properties from Value class here *@
    </Dropzone>
}