How to fill link the column in FormEdit and Edit action?

sblb 1,166 Reputation points
2022-09-24T09:10:34.817+00:00

Hi,
My app : blazor wasm aps.net core5.

First of all I tried, I will try to explain the configuration of my application is : DataGridView with several column of which ECR & ECO

244526-capture.png

The column ECR is fill when the user click on AddEcr. Thanks to @AgaveJoe the number is incremented with the current year. it's ok.
We can acces to ECO column when we click on Edit button. I want that the user can take or not the number ECO xxx/YY (with the same format that ECR).

The button Update correspond to the Edit.razor this means populate all data in table from database.

Edit.razor

 <FormEdit ButtonText="Update" dev="dev"  
       OnValidSubmit="@EditDeveloper" />  
      
 @code {  
      
     [Parameter] public int developerId { get; set; }  
     Developer dev = new Developer();  
      
      
     protected async override Task OnParametersSetAsync()  
     {  
         dev = await http.GetFromJsonAsync<Developer>($"api/developer/{developerId}");  
     }  
      
     async Task EditDeveloper()  
     {  
         await http.PutAsJsonAsync("api/developer", dev);  
         await js.InvokeVoidAsync("alert", $"Updated Successfully!");  
         uriHelper.NavigateTo("developer");  
                             
     }  

Now the button Number ECO allows to user take the number .

The definition of the button Number ECO is in FormEdit.razor

 <EditForm Model="@dev" OnValidSubmit="@OnValidSubmit">  
     <DataAnnotationsValidator />  
      
      
  <button type="submit" @onclick="@OnSubmitEcoNumber" >Submit</button>  
      
 </EditForm>  
      
 @code {  
  [Parameter] public Developer dev { get; set; }  
  [Parameter] public EventCallback OnValidSubmit { get; set; }  
          
     Developer[] developers { get; set; }   
 protected void OnSubmitEcoNumber()  
 {  
   //It's here that I've to call the method   
 }  
   }  

My question is : how to do the link between the button Number ECO (I think I have to put check box) with the Edit.razor to fill the column ECO?

the api is define below to fill the ECO number with a good format

  [HttpPost]  
        public async Task<IActionResult> Post(Developer developer)  
        {  
            YearCountECO deveco = await IncrementECODeveloperIdAsync();  
  
            developer.YearECO = deveco.YearECO;  
            developer.CountECO = deveco.CountECO;  
  
            YearCount dev = await IncrementDeveloperIdAsync();  
  
            developer.Year = dev.Year;  
            developer.Count = dev.Count;  
  
            _context.Add(developer);  
            await _context.SaveChangesAsync();  
            return Ok(developer.Id);  
        }        
    
  
 private async Task<YearCountECO> IncrementECODeveloperIdAsync()  
        {  
            if (!await _context.Developers.AnyAsync(d => d.Year == DateTime.Now.Year))  
            {  
                return new YearCountECO() { CountECO = 1, YearECO= DateTime.Now.Year };  
            }  
  
            int max = await _context.Developers.Where(d => d.Year == DateTime.Now.Year).MaxAsync(d => d.Count) + 1;  
            return new YearCountECO() { CountECO = max, YearECO = DateTime.Now.Year };  
        }  
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,452 questions
{count} votes

11 answers

Sort by: Most helpful
  1. sblb 1,166 Reputation points
    2022-09-25T09:23:09.777+00:00

    The code clearly generates and inserts the ERC and ECO values into the Developer table when the Post method is invoked.

    I agree with you. Currently the column ECO is fill when I create a new row. But I don't want the value of ECO to be created when a new one is created.

    Create.razor

    @page "/developer/create"  
    @inject HttpClient http  
    @inject NavigationManager uriHelper  
      
    <FormCreate ButtonText="Create ECR" dev="@dev" OnValidSubmit="@CreateDeveloper"/>  
      
    @code {  
        Developer dev = new Developer();  
      
        async Task CreateDeveloper()  
        {  
            await http.PostAsJsonAsync("api/developer", dev);  
            uriHelper.NavigateTo("developer");       
              
        }  
    }  
    

    Edit.razor

    @page "/developer/edit/{developerId:int}"  
    @inject HttpClient http  
    @inject NavigationManager uriHelper  
    @inject IJSRuntime js  
      
    <FormEdit ButtonText="Update" dev="dev"  
          OnValidSubmit="@EditDeveloper" />  
      
    @code {  
      
        [Parameter] public int developerId { get; set; }  
        Developer dev = new Developer();  
      
      
        protected async override Task OnParametersSetAsync()  
        {  
            dev = await http.GetFromJsonAsync<Developer>($"api/developer/{developerId}");  
        }  
      
        async Task EditDeveloper()  
        {  
            await http.PutAsJsonAsync("api/developer", dev);  
            await js.InvokeVoidAsync("alert", $"Updated Successfully!");  
            uriHelper.NavigateTo("developer");  
                             
        }      
          
      
    }  
    

    FetchData.razor

    .....  
    <RadzenDataGridColumn TItem="Developer" Property="ECO" Title="ECO">  
                        <Template Context="developers">  
                                 <span style='color:black'> @developers.ECO</span>  
                        </Template>  
      
    .....  
      
    @code{  
      
    ....  
     Developer[] developers { get; set; }  
      
     protected override async Task OnInitializedAsync()  
        {  
            developers = await client.GetFromJsonAsync<Developer[]>("api/developer");  
             
        }  
      
    ....  
      
    }  
    

    Can you explain the use case rather than the solution?

    I would like to create the ECO value in the Edit page and not in the create page.
    I want to give the user the option to create or not create an ECO number in the Edit page for example with a button or a checkbox.

    My question: how do I create the ECO number in the Edit page?


  2. sblb 1,166 Reputation points
    2022-09-25T15:36:46.06+00:00

    I asked for the use case not the solution.

    I try to explain the use case with some pictures.

    1- Click on Add ECR which open a new page.

    244534-image.png

    2-Click on create ECR. The new row is created

    244510-image.png

    3- New line created. Open the edit mode

    244591-image.png

    4-Navigate into Edit mode

    244470-image.png

    5-The user decide to take Eco Number

    244592-image.png

    6- Result in ECO Column

    244535-image.png


  3. sblb 1,166 Reputation points
    2022-09-26T10:03:57.697+00:00

    the use case can be explain as below :
    _the user create a new ECR in page create and a ECR number is taken.
    _ the ECO number is not in page create, it is only in mode edit.
    _ the user can choose to take or not the ECO number by validated the checkbox;
    _ In a row there may be an ECR number without an ECO number.
    _ The format ECO must be xxx/YY ; xxx is integer which is incremented for each row and YY two digits of the current year.


  4. sblb 1,166 Reputation points
    2022-09-26T16:10:26.807+00:00

    I follow up your recommendation here : WebApiSqlite to do the ECR column.
    In your github you didn't use FormattedId; So I have adapted the code

      public string ECR   
            {  
                get  
                {  
                    return $"{Count.ToString().PadLeft(3, '0')}/{Year}";  
                }  
                set { }  
      
            }    
    

    If I've to use FormatId I've to add return ECR = FormatId , right?

    I did not see any code that populates ECO in this thread

    I invoke Put method to populate ECO, no?

    <FormEdit ButtonText="Update" dev="dev"  
           OnValidSubmit="@EditDeveloper" />  
          
     @code {  
          
         [Parameter] public int developerId { get; set; }  
         Developer dev = new Developer();  
          
          
         protected async override Task OnParametersSetAsync()  
         {  
             dev = await http.GetFromJsonAsync<Developer>($"api/developer/{developerId}");  
         }  
          
         async Task EditDeveloper()  
         {  
             await http.PutAsJsonAsync("api/developer", dev);  
             await js.InvokeVoidAsync("alert", $"Updated Successfully!");  
             uriHelper.NavigateTo("developer");  
                                 
         }      
    

  5. sblb 1,166 Reputation points
    2022-09-26T11:59:55.813+00:00

    You expect the application users to query the database to find the next count value and enter a one when the year changes and no ECO numbers exist?

    Are you doing it on purpose?

    you can write your own code.

    According to you I already have the solution, right?

    The code is :

    <EditForm Model="@dev" OnValidSubmit="@OnValidSubmit">  
        <DataAnnotationsValidator />  
      
     <RadzenCheckBox @bind-Value=@checkBox1Value Disabled="value:false" Name="CheckBox1" TValue="bool" Change=@(args => OnChange(args)) />  
                                                <RadzenLabel Text="Take ECO Number" Component="CheckBox1" Style="margin-left: 8px; vertical-align: middle;" />  
                                                @if(checkBox1Value == true)  
                                                {  
                                                   dev.ECO = $"{dev.CountECO.ToString().PadLeft(3, '0')}/{dev.YearECO}";  
                                                    
                                                }  
      
    </EditForm>  
      
      
      
    <FormEdit ButtonText="Update" dev="dev"  
          OnValidSubmit="@EditDeveloper" />  
      
    @code {  
      
        [Parameter] public int developerId { get; set; }  
        Developer dev = new Developer();  
      
      
        protected async override Task OnParametersSetAsync()  
        {  
            dev = await http.GetFromJsonAsync<Developer>($"api/developer/{developerId}");  
        }  
      
        async Task EditDeveloper()  
        {  
            await http.PutAsJsonAsync("api/developer", dev);  
            await js.InvokeVoidAsync("alert", $"Updated Successfully!");  
            uriHelper.NavigateTo("developer");  
                             
        }      
    

    api controller

            [HttpPut]  
            public async Task<IActionResult> Put(Developer developer)  
            {  
                YearCountECO deveco = await IncrementECODeveloperIdAsync();  
      
                developer.YearECO = deveco.YearECO;  
                developer.CountECO = deveco.CountECO;  
      
                _context.Entry(developer).State = EntityState.Modified;  
                await _context.SaveChangesAsync();  
                return NoContent();  
            }  
      
            //Take a number ECO  
            private async Task<YearCountECO> IncrementECODeveloperIdAsync()  
            {  
                if (!await _context.Developers.AnyAsync(deco => deco.YearECO == DateTime.Now.Year))  
                {  
                    return new YearCountECO() { CountECO = 1, YearECO = DateTime.Now.Year };  
                }  
      
                int max = await _context.Developers  
                                        .Where(deco => deco.YearECO == DateTime.Now.Year).MaxAsync(deco => deco.CountECO) + 1;  
                return new YearCountECO() { CountECO = max, YearECO = DateTime.Now.Year };  
      
            }  
    

    With this code I obtained
    244747-image.png

    As you can see in row 1 and 3 the user decides not to take an ECO number.
    In line 2 & 4 the user decide to take an Eco number when checkboxValue1 = true.

    But as you can see the count is not good.
    244828-image.png

    I don't understand why I obtained the ECO number in row 2 : 001/2022 then CountECO = 2