Add basic support for onchange

src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts

@@ -178,6 +178,13 @@ export class BrowserRenderer {
         toDomElement.addEventListener('click', listener);
         break;
       }
+      case 'onchange': {
+        toDomElement.removeEventListener('change', toDomElement['_blazorChangeListener']);
+        const listener = evt => raiseEvent(browserRendererId, componentId, eventHandlerId, 'change', { Type: 'change', Value: evt.target.value });
+        toDomElement['_blazorChangeListener'] = listener;
+        toDomElement.addEventListener('change', listener);
+        break;
+      }
       case 'onkeypress': {
         toDomElement.removeEventListener('keypress', toDomElement['_blazorKeypressListener']);
         const listener = evt => {
@@ -256,4 +263,4 @@ function raiseEvent(browserRendererId: number, componentId: number, eventHandler
   ]);
 }
 
-type EventInfoType = 'mouse' | 'keyboard';
+type EventInfoType = 'mouse' | 'keyboard' | 'change';

src/Microsoft.AspNetCore.Blazor.Browser/Interop/Json.cs

@@ -27,6 +27,8 @@ namespace Microsoft.AspNetCore.Blazor.Browser.Interop
 
         private static object CoerceShallow(object deserializedValue, Type typeOfT)
         {
+            if (typeOfT == typeof(object)) { return deserializedValue; }
+
             if (deserializedValue == null)
             {
                 // Return default value for type

src/Microsoft.AspNetCore.Blazor.Browser/Rendering/BrowserRendererEventDispatcher.cs

@@ -36,6 +36,8 @@ namespace Microsoft.AspNetCore.Blazor.Browser.Rendering
                     return Json.Deserialize<UIMouseEventArgs>(eventArgsJson);
                 case "keyboard":
                     return Json.Deserialize<UIKeyboardEventArgs>(eventArgsJson);
+                case "change":
+                    return Json.Deserialize<UIChangeEventArgs>(eventArgsJson);
                 default:
                     throw new ArgumentException($"Unsupported value '{eventArgsType}'.", nameof(eventArgsType));
             }

src/Microsoft.AspNetCore.Blazor/Components/BlazorComponent.cs

@@ -186,5 +186,14 @@ namespace Microsoft.AspNetCore.Blazor.Components
         protected RenderTreeFrame onclick(Action handler)
             // Note that the 'sequence' value is updated later when inserted into the tree
             => RenderTreeFrame.Attribute(0, "onclick", _ => handler());
+
+        /// <summary>
+        /// Handles change events by invoking <paramref name="handler"/>.
+        /// </summary>
+        /// <param name="handler">The handler to be invoked when the event occurs. The handler will receive the new value as a parameter.</param>
+        /// <returns>A <see cref="RenderTreeFrame"/> that represents the event handler.</returns>
+        protected RenderTreeFrame onchange(Action<object> handler)
+            // Note that the 'sequence' value is updated later when inserted into the tree
+            => RenderTreeFrame.Attribute(0, "onchange", args => handler(((UIChangeEventArgs)args).Value));
     }
 }

src/Microsoft.AspNetCore.Blazor/RenderTree/UIEventArgs.cs

@@ -31,4 +31,16 @@ namespace Microsoft.AspNetCore.Blazor.RenderTree
         /// </summary>
         public string Key { get; set; }
     }
+
+    /// <summary>
+    /// Supplies information about an input change event that is being raised.
+    /// </summary>
+    public class UIChangeEventArgs : UIEventArgs
+    {
+        /// <summary>
+        /// Gets or sets the new value of the input. This may be a <see cref="string"/>
+        /// or a <see cref="bool"/>.
+        /// </summary>
+        public object Value { get; set; }
+    }
 }