0

I have the following code written in Blazor I wrote it following this tutorial in dot net learn but I didn't understand how the value of currentStar is changed when I click this span 

<span class="btn btn-danger"@onclick="(e => SubmitRating(currentStar))"></span> but when I use the same code use i instead of currentStar the value sent to the SubmitRating() function is always 6 it does not change according to the span I click e.g when I click the first span displayed by the loop using the variable currentStar in the @onclickevent the value submitted to the SubmitRating() is 1 but when using the variable i instead the value submitted to the SubmitRating() is always 6 this is the code below and please watch the video linked up to understand clearly what I am trying to say.

@for (int i = 1; i < 6; i++)
{
    int currentStar=i;
    
    if (i <= currentRating)
    {
        <span class="btn btn-dark"  @onclick="(e => SubmitRating(currentStar))"></span>
    }
    else
    {
        <span class="btn btn-danger" @onclick="(e => SubmitRating(i))"></span>
    }
}

@code {
    Paiza selectedProduct;
    string selectedProductid;
    void selectProducts(string id)
    {
        selectedProductid = id;
        selectedProduct = Productservis.GetProducts().First(x => x.Id == id);
        GetCurrentRating();
    }

    int currentRating = 0;
    int voteCount = 0;
    string voteLabel;

    void GetCurrentRating()
    {
        if (selectedProduct.Ratings == null)
        {
            currentRating = 0;
            voteCount = 0;
        }
        else
        {
            voteCount = selectedProduct.Ratings.Count();
            voteLabel = voteCount > 1 ? "Votes" : "Vote";
            currentRating = selectedProduct.Ratings.Sum() / voteCount;
        }

    
    }

    void SubmitRating(int rating)
    {
      
        Productservis.AddRating(selectedProductid, rating);
        selectProducts(selectedProductid);
    }
}

`

I tried logging both variables but the value rendered in HTML is the same.

if (i <= currentRating)
{
    <span class="btn btn-dark" id="@i" name="@currentStar" @onclick="(e => SubmitRating(currentStar))"></span>
}
else
{
    <span class="btn btn-danger" id="@i" name="@currentStar" @onclick="(e => SubmitRating(i))"></span>
}
H H
  • 263,252
  • 30
  • 330
  • 514
Richard77
  • 3
  • 2
  • @Henk I have seen your answer [here](https://stackoverflow.com/questions/56425558/blazor-variable-argument-passing-to-onclick-function) It hates the point but It does not explain the difference I googled " lambda 'captures' the loop variable" but I am a beginner and could not understand much of the results in fact I have more questions now, could you please just explain the difference as if I don't know c# at all – Richard77 Dec 17 '22 at 10:42
  • 1
    SO answers can solve small conccrete problems. They cannot provide weeks or months worth of education. Start here: https://learn.microsoft.com/en-us/training/browse/?products=dotnet&roles=maker%2Cdeveloper&expanded=business-applications&levels=beginner – H H Dec 17 '22 at 17:18

2 Answers2

0

Please try this:

<span id="@i" class="btn btn-danger" @onclick='(() => SubmitRating(i))'></span>
Arani
  • 891
  • 7
  • 18
0

Variable i is incremented when the Razor component code is evaluated to be rendered and is always 6. That's why you have line:

int currentStar=i;

To store intermidiate value of i

Please see my answer

maciek
  • 724
  • 2
  • 4
  • 16
  • I saw the answer but I still do not understand how the value is different for both var, [this video](https://www.youtube.com/watch?v=IhoDDZBW6dc&t=665s) is where I got the code it is a dot net tutorial video on youtube – Richard77 Dec 17 '22 at 09:16
  • this is to notify you that there is a new comment above this one – Richard77 Dec 17 '22 at 09:53