Note: this question was asked about a pre-release of Blazor (0.2.1).
So I have been stuck trying to get a simple onchange to fire when a select dropdown value changes. Like so:
<select class="form-control d-flex" onchange="(dostuff())"> @foreach (var template in templatestate.templates) { <option [email protected]>@template.Name</option> } </select>
with the method being called:
void dostuff() { Console.WriteLine("first spot is firing"); _template = templatestate.templates.FirstOrDefault(x => x.Name == _template.Name); Console.WriteLine("second spot is firing"); }
The result I get it no matter how I try to reorient it is this error in the browser.
Uncaught Error: System.ArgumentException: There is no event handler with ID 0
Is there something obvious and key that I am missing? Because I have a button onclick
event that works just fine on the same page.
To retrieve a selected value from the select control, you can use either the @bind or @onchange event.
Bind to a Model To bind the DropDownList to a model: Populate its Data parameter with the collection of items you want in the dropdown. Set the TextField and ValueField parameters to point to the corresponding property names of the model. Set the Value property to the intial value of the component (optional).
Blazor is a feature of ASP.NET, the popular web development framework that extends the . NET developer platform with tools and libraries for building web apps.
As an alternative to setting an onchange event, you could just bind the dropdown to a property and handle changes in the property set. This way you get the value being selected all in the same process and without having to convert an object value. Plus if you're already using @bind on the select, you are prevented from using onchange on it as well.
<select @bind="BoundID"> ... </select> @code { private int? _boundID = null; private int? BoundID { get { return _boundID; } set { _boundID = value; //run your process here to handle dropdown changes } } }
Your answer should be in the cshtml:
<select @onchange="DoStuff"> //pre-3.0 versions: onchange=@DoStuff @foreach (var template in templates) { <option value=@template>@template</option> } </select>
Then your @functions (in razor components @code instead. See: Razor Syntax: Functions) should look like:
@functions { //use @code in razor components. List<string> templates = new List<string>() { "Maui", "Hawaii", "Niihau", "Kauai", "Kahoolawe" }; string SelectedString = "Maui"; void DoStuff(ChangeEventArgs e) { SelectedString = e.Value.ToString(); Console.WriteLine("It is definitely: " + SelectedString); } }
You could also just use a bind...
<select @bind="SelectedString"> //pre 3.0 bind="@SelectedString"
but @onchange="DoStuff" allows you to perform logic on selection.
Here's a link to some changes: Blazor WebAssembly 3.2.0 Preview 5 release now available
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With