Two Way Binding Not Working

[Thomas Woods II]

Two Way Binding does not seem to be working.  Not sure if this is related to the latest update for Blazor or not.  I was able to reproduce it just by using the Two Way binding example for TextBox.  Error message I see from the browser console is below.  This seems to be occurring on other controls as well (tested on the calendar control)

Sample Code:

@page "/SyncInput"

<h3>SyncInput</h3>

@using Syncfusion.EJ2.Blazor.Inputs;

<EjsTextBox @bind-Value="@Name"></EjsTextBox>

<p>Value: @Name</p>

@code {

    public string Name { get; set; } = "Testing";

}

Error Message:

blazor.server.js:1 [2019-08-23T19:46:17.728Z] Information: Normalizing '_blazor' to 'https://localhost:44385/_blazor'.

blazor.server.js:1 [2019-08-23T19:46:17.804Z] Information: WebSocket connected to wss://localhost:44385/_blazor?id=WqdiBgrTsbFc1Tzl3qN4_Q.

ejs.interop.min.js:1 There was an exception invoking 'UpdateModel' on assembly ''. For more details turn on detailed exceptions in 'CircuitOptions.DetailedErrors'

Error: There was an exception invoking 'UpdateModel' on assembly ''. For more details turn on detailed exceptions in 'CircuitOptions.DetailedErrors'

    at Object.endInvokeDotNetFromJS (https://localhost:44385/_framework/blazor.server.js:8:28586)

    at e.<anonymous> (https://localhost:44385/_framework/blazor.server.js:8:103179)

    at https://localhost:44385/_framework/blazor.server.js:1:19148

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44385/_framework/blazor.server.js:1:19119)

    at e.processIncomingData (https://localhost:44385/_framework/blazor.server.js:1:17165)

    at e.connection.onreceive (https://localhost:44385/_framework/blazor.server.js:1:10276)

    at WebSocket.i.onmessage (https://localhost:44385/_framework/blazor.server.js:1:38027)

throwError @ ejs.interop.min.js:1

ejs.interop.min.js:1 There was an exception invoking 'UpdateModel' on assembly ''. For more details turn on detailed exceptions in 'CircuitOptions.DetailedErrors'

Error: There was an exception invoking 'UpdateModel' on assembly ''. For more details turn on detailed exceptions in 'CircuitOptions.DetailedErrors'

    at Object.endInvokeDotNetFromJS (https://localhost:44385/_framework/blazor.server.js:8:28586)

    at e.<anonymous> (https://localhost:44385/_framework/blazor.server.js:8:103179)

    at https://localhost:44385/_framework/blazor.server.js:1:19148

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (https://localhost:44385/_framework/blazor.server.js:1:19119)

    at e.processIncomingData (https://localhost:44385/_framework/blazor.server.js:1:17165)

    at e.connection.onreceive (https://localhost:44385/_framework/blazor.server.js:1:10276)

    at WebSocket.i.onmessage (https://localhost:44385/_framework/blazor.server.js:1:38027)

throwError @ ejs.interop.min.js:1

[Gopi Govindasamy]

Hi Thomas,  

We validated your reported issue and able to reproduce it with updated NuGet and previous versions of the files ejs.interop.min.js and ej2.min.js file. Could you upgrade these files also while upgrade NuGet version to latest release? The two-way binding happens on focus out in the Blazor Textbox component.  

Please find the details for your reference.  

NuGet: https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.46-beta  

Script: https://cdn.syncfusion.com/ej2/17.2.46/dist/ej2.min.js  

            https://cdn.syncfusion.com/ej2/17.2.46/dist/ejs.interop.min.js  

@using Syncfusion.EJ2.Blazor.Inputs 

 

<h3>SyncInput</h3> 

 

 

<EjsTextBox @bind-Value="@Name"></EjsTextBox> 

 

<p>Value: @Name</p> 

 

@code { 

    public string Name { get; set; } = "Testing"; 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/146892/ze/BlazorApp1512910396  

Regards, 

Gopi G. 

[Thomas Woods II]

Thanks, that fixed it.

[Gopi Govindasamy]

Hi Thomas, 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 

Regards,
Gopi G. 

[Thomas Woods II]

I'm receiving this same reported error with the drop-down list control.  Just wanted to make sure that if I am using 17.2.0.50 I should be using the following scripts

    <script src="https://cdn.syncfusion.com/ej2/17.2.50/dist/ej2.min.js"></script>

    <script src="https://cdn.syncfusion.com/ej2/17.2.50/dist/ejs.interop.min.js"></script>

In my case, the drop-down will load but as soon as you change the value it triggers the error.  Once the error occurs it pretty much causes the site to not function properly and every click generates a new (different) error.  I've tried with controls that use the DropDownListEvents and without and same effect.

Example Control Usage:

            <EjsDropDownList ID="programSelect" CssClass="form-control" Placeholder="Type" TValue="int?" Index="0" DataSource="@PhoneTypeList" @bind-Value="@PhoneTypeID">

                <DropDownListEvents TValue="int?" ValueChange="@UpdatePhoneType"></DropDownListEvents>

                <DropDownListFieldSettings Value="Key" Text="Value"></DropDownListFieldSettings>

            </EjsDropDownList>

[Thomas Woods II]

Adding some additional information...just realized my two-way binding is not working with text boxes again.  This was fixed when I upgraded to 17.2.46.  But now I am running 17.2.50 and I'm getting the same behavior I was getting from the original post on this thread.

[Gopi Govindasamy]

Hi Thomas,  

Thanks for your update. 

We validated your reported issue and not able to reproduce the issue in 17.2.50-beta version. We suspect you have not updated the dotnet SDK preview 9, because we included preview 9 support in 17.2.50-beta version. If you have using old SDK version means, please update the dotnet SDK preview 9. 

https://dotnet.microsoft.com/download/dotnet-core/3.0  

We are glad to announce that our latest release in the version 17.2.0.52-beta has been rolled out successfully. Kindly ensure whether you are using latest NuGet and the ejs.interop.min.js and ej2.min.js file.  

NuGet: https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.52-beta   

Script: https://cdn.syncfusion.com/ej2/17.2.52/dist/ej2.min.js    

            https://cdn.syncfusion.com/ej2/17.2.52/dist/ejs.interop.min.js  

We have checked shared dropdownlist component code snippet and you have bind both Value and Index property and set nullable int datatype.  For your requirement dropdownlist two-way binding to update the value, we suggest to use @bind-Value property to update the value. We have prepared sample for TextBox and DropDownList component two-way binding. Please find the code snippet for your reference.  

@using Syncfusion.EJ2.Blazor.Inputs; 

@using Syncfusion.EJ2.Blazor.DropDowns; 

 

<h5>TextBox</h5> 

 

<EjsTextBox @bind-Value="@Name"></EjsTextBox> 

 

<p>Value: @Name</p> 

 

<h5>DropDownList</h5> 

 

<EjsDropDownList ID="programSelect" CssClass="form-control" Placeholder="Type" DataSource="@PhoneTypeList" @bind-Value="@PhoneTypeID"> 

    <DropDownListEvents TValue="int" ValueChange="@UpdatePhoneType"></DropDownListEvents> 

    <DropDownListFieldSettings Value="Key" Text="Value"></DropDownListFieldSettings> 

</EjsDropDownList> 

 

 

<p>Two-Bind Value: @PhoneTypeID</p> 

 

<p>Selected Value: @selectedValue</p> 

 

@code { 

    public string Name { get; set; } = "Testing"; 

 

    public int PhoneTypeID { get; set; } = 987; 

 

    public int? selectedValue { get; set; } 

 

    public void UpdatePhoneType(ChangeEventArgs<int> args) 

    { 

        selectedValue = args.Value; 

    } 

 

    public class PhoneType 

    { 

        public string Value { get; set; } 

        public int Key { get; set; } 

    } 

 

    List<PhoneType> PhoneTypeList = new List<PhoneType>() 

    { 

        new PhoneType() {Value="Iphone", Key = 456}, 

        new PhoneType() {Value="Samsung", Key = 987} 

    }; 

 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/146892/ze/BlazorApp12079481259  

Can you please check and revert if you need any further assistance on this? If your query is not resolved yet, please share below information that will help us to validate and provide the solution earliest.  

1.Share full code snippet for render the component place. 

2.Share your script and NuGet Details  

3.Share your installed SDK version 

3.If possible to reproduce your issue in above sample. 

Regards,
Gopi G. 

[Thomas Woods II]

Thanks for the quick response.  However, in my haste, I failed to mention that I was trying to do two-way binding between a parent and child component with the child component containing the textbox and drop-down.  For the textbox, there was an issue with my onchange method and it was causing that error to trigger as focus left the control.  Once I fixed it, the error went away.  As for the drop-down, after turning on detailed error logging for the Circuit Breaker, I ended up discovering that the DropDown control does not work with a list of key value pairs (e.g List<KeyValuePair<string,string>>) objects.  I failed to give you a complete example so thus you could have probably pointed me to your documentation which basically tells me what type of objects are supported. 

But anyway thanks so much for your time.  I have one remaining issue in that, I can't get the parent component to update the UI when a field updates in the child, but I don't think that is related to SyncFusion controls.

[Gopi Govindasamy]

Hi Thomas,  

Thanks for your update,  

Query: which basically tells me what type of objects are supported 

 

We would like to inform you that, DropDownList component List<object> type is supported and we have documented too. In previous update, we have provided list of object data to bind dropdownlist and validate the component based on @bind-Value property.  

UG: https://ej2.syncfusion.com/blazor/documentation/dropdownlist/data-source/  

Sample Link: https://www.syncfusion.com/downloads/support/forum/146892/ze/BlazorApp12079481259  

If you want to get the updated value from UI, then use Value property to get the update value from component. Please refer to the document for get the selected value. 

UG: https://ej2.syncfusion.com/blazor/documentation/dropdownlist/data-binding/#dynamic-value-binding  

Please feel free to contact us if you need any further assistance on Syncfusion components. 

Regards, 

Gopi G.