How to take values in textbox/numerictextbox/datetimepicker and pass them to api call as an object

[Alessandro Cirignaco]

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" @[email protected] FloatLabelType="@FloatLabelType.Always" Enabled="false" Format="######"></SfNumericTextBox>

                <SfDateTimePicker ID="LastCommDate" Placeholder="Last Communication Date" @[email protected] FloatLabelType="@FloatLabelType.Always" Enabled="false"></SfDateTimePicker>

                <SfDateTimePicker ID="NextCommDate" Placeholder="Next Communication Date" @[email protected] FloatLabelType="@FloatLabelType.Always" Enabled="false"></SfDateTimePicker>

                <SfNumericTextBox ID="BatteryLvl" Placeholder="Battery Level" @[email protected] FloatLabelType="@FloatLabelType.Always" Enabled="false" Format="######"></SfNumericTextBox>

                <SfNumericTextBox ID="SignalStrength" Placeholder="Signal Strength" @[email protected] 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.

[Sureshkumar P]

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

[Alessandro Cirignaco]

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

[Sureshkumar P]

Hi Alessandro,

Thanks for your update.

Regards,

Sureshkumar P