@bind-Value does not work

[Brice FROMENTIN]

Hello,

<SfTextBox ID="login" @ref="login" Placeholder="Login ..."  @[email protected] />

Always returns NULL.

Thx

[Sureshkumar P]

Hi Brice, 

 

Greetings from Syncfusion support.  

 

Based on your shared information, we suspect that you want to get the textbox component value when post the editform. We have created the sample based on your requirement.  

 

Kindly refer the code example.  

@page "/" 

 

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.Buttons 

@using System.ComponentModel.DataAnnotations; 

 

<div class="row"> 

    <div style="width:100%;margin:20px;"> 

        <EditForm OnValidSubmit="FormSubmit" EditContext="@editContext"> 

            <DataAnnotationsValidator /> 

            <div class="form-group"> 

 

                <SfTextBox Placeholder="Test Property" FloatLabelType='@FloatLabelType.Always' @bind-Value="model.TestProperty" CssClass="@cssClass"></SfTextBox> 

                <ValidationMessage For="() => model.TestProperty" /> 

            </div> 

            <SfButton IsPrimary="true" HtmlAttributes="@(new Dictionary<string, object> { { "type", "submit" } })">Save</SfButton> 

        </EditForm> 

    </div> 

</div> 

@code{ 

    private Test model; 

    private EditContext editContext; 

    private string cssClass { get; set; } 

    protected override void OnInitialized() 

    { 

        model = new Test(); 

        editContext = new EditContext(model); 

    } 

    public class Test 

    { 

        [Required] 

        public string TestProperty { get; set; } 

    } 

 

    public void FormSubmit(EditContext context) 

    { 

        Console.WriteLine("valid"); 

    } 

} 

 

 

 

Please find the returned value when post the form  

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBoxFormpost1707130462  

 

please check the above sample and let us know whether it suits your requirement. if not please get revert us with details 

 

Regards, 

Sureshkumar P 

[Brice FROMENTIN]

Thanks for your answer, but my use case is with a REST service not a form (it works with *.45) :

@inherits LayoutComponentBase

@using Kairos.Models.Security

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime

@inject NavigationManager NavigationManager

@inject UserState  User

@inject ISyncLocalStorageService localStorage

@inject HttpClient httpClient

@inject ApplicationState application

<div class="grid-login">

    <div></div><div></div><div></div>

    <div></div>

    <div class="login-panel">

        <div class="login-picture"></div>

        <div class="login-fields">

            <div>

                <SfTextBox ID="login" @ref="login" Placeholder="Login ..." OnKeyup="OnLoginEnter" Created="OnLoginCreated" @[email protected] />

            </div>

            <div>

                <SfTextBox ID="password" @ref="password" Placeholder="Password ..." Type="Password" OnKeyup="OnPasswordEnter" @[email protected] />

            </div>

            <div class="@cssError">

                Invalid credentials !!

            </div>

            <div>

                <SfButton ID="connect" @ref="connect" Content="Connect" CssClass="login-button" OnClick="OnConnectClicked" />

            </div>

        </div>

    </div>

    <div></div>

    <div></div><div></div><div></div>

</div>

@functions{

    SfTextBox login;

    SfTextBox password;

    SfButton connect;

    string cssError = "login-no-error";

    LoginModel loginModel = new LoginModel();

    private void OnLoginCreated(object button)

    {

        login.FocusIn();

    }

    private void OnLoginEnter(KeyboardEventArgs args)

    {

        Console.WriteLine(args.Code);

        if (args.Code == "Enter" || args.Code == "NumpadEnter")

        {

            password.FocusIn();

        }

    }

    private void OnPasswordEnter(KeyboardEventArgs args)

    {

        if (args.Code == "Enter" || args.Code == "NumpadEnter")

        {

            connect.Click();

        }

    }

    private async Task OnConnectClicked(MouseEventArgs args)

    {

        var JSRuntimeSync = (IJSInProcessRuntime)JSRuntime;

        JSRuntimeSync.Invoke<object>("kairos.layout.showLoader");

        var IsLoggedIn = await User.Login(loginModel, application, httpClient, localStorage);

        if (IsLoggedIn)

        {

            cssError = "login-no-error";

            NavigationManager.NavigateTo("/");

        }

        else

        {

            cssError = "login-error";

        }

        JSRuntimeSync.Invoke<object>("kairos.layout.hideLoader");

    }

}

[Sureshkumar P]

Hi Brice, 

 

Thanks for your update. 

 

Based on your shared code example. We suspect that you have get the bind-value model in the OnConnectClicked method. 

 

Kindly refer the below screen shot: 

 

 

 

We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox860939327  

 

Regards, 

Sureshkumar P 

[Brice FROMENTIN]

I reproduce your sample and it works perfectly now.

[Sureshkumar P]

Hi Brice, 

 

Thanks for your update. Please get back to us if you need further assistance on this. 

 

Regards, 

Sureshkumar P