Hi,
I have an overview page where the user can see values relating to a chosen sensor. My goal is if the user makes a change to a field then when they press save it is passed back to an api call somewhere else in my program.
My issue is i am unsure how to create an object for the textbox fields with the values inside.
here is my razor component:
@if(this.filteredSensors == null)
{
<div class="d-flex justify-content-center" style="padding-top:25px">
<div class="spinner-border text-primary" role="status" >
<span class="sr-only"></span>
</div>
</div>
}
else
{
<h2 style="padding-top: 10px">Sensor Details <SfButton style="float:right; margin: 2.5px" @onclick=@Navigate>Back</SfButton> <SfButton style="float:right; margin:2.5px" CssClass="e-success" @onclick=@UpdateSensor>Save</SfButton></h2>
<div class="row">
@foreach(MMSensor sensors in filteredSensors)
{
if (sensors.SensorId == sensorId)
{
<div class="column left">
<SfNumericTextBox ID="SensorID" Placeholder="Sensor ID" @bind-Value=@sensors.SensorId FloatLabelType="@FloatLabelType.Always" Enabled="false" Format="######"></SfNumericTextBox>
<SfDateTimePicker ID="LastCommDate" Placeholder="Last Communication Date" @bind-Value=@sensors.LastCommunicationDate FloatLabelType="@FloatLabelType.Always" Enabled="false"></SfDateTimePicker>
<SfDateTimePicker ID="NextCommDate" Placeholder="Next Communication Date" @bind-Value=@sensors.NextCommunicationDate FloatLabelType="@FloatLabelType.Always" Enabled="false"></SfDateTimePicker>
<SfNumericTextBox ID="BatteryLvl" Placeholder="Battery Level" @bind-Value=@sensors.BatteryLevel FloatLabelType="@FloatLabelType.Always" Enabled="false" Format="######"></SfNumericTextBox>
<SfNumericTextBox ID="SignalStrength" Placeholder="Signal Strength" @bind-Value=@sensors.SignalStrength FloatLabelType="@FloatLabelType.Always" Enabled="false" Format="######"></SfNumericTextBox>
<SfNumericTextBox ID="State" Placeholder="State" @bind-Value="@sensors.State" FloatLabelType="@FloatLabelType.Always" Enabled="false"></SfNumericTextBox>
</div>
<div class="column left">
<SfTextBox ID="SensorName" Placeholder="Sensor Name" @bind-Value="@sensors.Name" FloatLabelType="@FloatLabelType.Always"></SfTextBox>
<SfNumericTextBox ID="OffValFrom" Placeholder="Off Value From" @bind-Value="@sensors.OffValueFrom" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>
<SfNumericTextBox ID="OffValTo" Placeholder="Off Value To" @bind-Value="@sensors.OffValueTo" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>
<SfNumericTextBox ID="IdleValFrom" Placeholder="Idle Value From" @bind-Value="@sensors.IdleValueFrom" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>
<SfNumericTextBox ID="IdleValTo" Placeholder="Idle Value To" @bind-Value="@sensors.IdleValueTo" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>
<SfNumericTextBox ID="ActiveValFrom" Placeholder="Active Value From" @bind-Value="@sensors.ActiveValueFrom" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>
</div>
}
}
<div class="column right">
<div style="height: 350px">
<SfChart Title=" Sensor Timeline Overview">
<ChartSeriesCollection>
</ChartSeriesCollection>
</SfChart>
</div>
</div>
</div>
<div class="col-12 control-section">
<div class="content-wrapper">
<div class="row">
<SfGrid DataSource="filteredData" Height="347px" AllowSorting="true" AllowPaging="true">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="CommunicationDate" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridPageSettings PageCount="5" PageSize="10"></GridPageSettings>
<GridColumns>
<GridColumn Field="@nameof(mmData.SensorId)" AllowSorting="false"></GridColumn>
<GridColumn Field="@nameof(mmData.DataValue)" AllowSorting="false"></GridColumn>
<GridColumn Field="@nameof(mmData.CommunicationDate)" AllowSorting="true"></GridColumn>
<GridColumn Field="@nameof(mmData.State)" AllowSorting="false"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
</div>
}
@code
{
public void UpdateSensor()
{
//create object here to be passed to api call
apiHelper.UpdateSensors(MMSensor_);
}
}
I am still new to blazor, so any help would be appreciated.
Hi Alessandro,
We have validated the reported issue based on shared information. You have used all the component value with two-way binding variables so we suggest you get the value from your application using this.filteredSensors variable.
Regards,
Sureshkumar P
Thank you for the quick reply
Would it be possible to have an example on this?
thank you
Edit: I managed to work it out. Thanks
Hi Alessandro,
Thanks for your update.
Regards,
Sureshkumar P