We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.



3 Replies 1 reply marked as answer

SP Sureshkumar P Syncfusion Team October 26, 2022 07:01 AM

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


Marked as answer

AC Alessandro Cirignaco October 26, 2022 08:42 AM

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



SP Sureshkumar P Syncfusion Team October 27, 2022 01:55 AM

Hi Alessandro,


Thanks for your update.


Regards,

Sureshkumar P


Loader.
Live Chat Icon For mobile
Up arrow icon