[{"data":1,"prerenderedAt":342},["ShallowReactive",2],{"blog-post-/blog/input-handling-in-blazor-apps/":3},{"id":4,"title":5,"body":6,"description":318,"extension":319,"meta":320,"navigation":105,"path":337,"seo":338,"sitemap":339,"stem":340,"__hash__":341},"content/blog/input-handling-in-blazor-apps.md","Input Handling in Blazor Apps: @bind vs @oninput vs @onchange",{"type":7,"value":8,"toc":311},"minimark",[9,13,30,35,41,48,71,75,80,85,154,158,163,168,222,226,229,283,287,307],[10,11,5],"h1",{"id":12},"input-handling-in-blazor-apps-bind-vs-oninput-vs-onchange",[14,15,16,17,21,22,25,26,29],"p",{},"Blazor provides various ways to handle input fields, making it a powerful framework for building interactive web applications. Understanding when and how to use ",[18,19,20],"code",{},"@bind",", ",[18,23,24],{},"@oninput",", and ",[18,27,28],{},"@onchange"," can significantly enhance your Blazor apps.",[31,32,34],"h2",{"id":33},"bind-two-way-data-binding","@bind — Two-Way Data Binding",[14,36,37,38,40],{},"The ",[18,39,20],{}," directive provides two-way data binding between an input field and a property.",[14,42,43,47],{},[44,45,46],"strong",{},"Best for:"," Complex forms, real-time synchronization with your data model.",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-razor shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cinput type=\"text\" @bind=\"userName\" />\n\u003Cp>Your username is: @userName\u003C/p>\n","razor","",[18,56,57,65],{"__ignoreMap":54},[58,59,62],"span",{"class":60,"line":61},"line",1,[58,63,64],{},"\u003Cinput type=\"text\" @bind=\"userName\" />\n",[58,66,68],{"class":60,"line":67},2,[58,69,70],{},"\u003Cp>Your username is: @userName\u003C/p>\n",[31,72,74],{"id":73},"oninput-instant-feedback-on-every-keystroke","@oninput — Instant Feedback on Every Keystroke",[14,76,77,79],{},[18,78,24],{}," triggers on every keystroke or value change.",[14,81,82,84],{},[44,83,46],{}," Real-time validation, live search.",[49,86,88],{"className":51,"code":87,"language":53,"meta":54,"style":54},"\u003Cinput type=\"text\" @oninput=\"HandleInput\" />\n\u003Cp>Current input: @currentInput\u003C/p>\n\n@code {\n    private string currentInput;\n\n    private void HandleInput(ChangeEventArgs e)\n    {\n        currentInput = e.Value.ToString();\n    }\n}\n",[18,89,90,95,100,107,113,119,124,130,136,142,148],{"__ignoreMap":54},[58,91,92],{"class":60,"line":61},[58,93,94],{},"\u003Cinput type=\"text\" @oninput=\"HandleInput\" />\n",[58,96,97],{"class":60,"line":67},[58,98,99],{},"\u003Cp>Current input: @currentInput\u003C/p>\n",[58,101,103],{"class":60,"line":102},3,[58,104,106],{"emptyLinePlaceholder":105},true,"\n",[58,108,110],{"class":60,"line":109},4,[58,111,112],{},"@code {\n",[58,114,116],{"class":60,"line":115},5,[58,117,118],{},"    private string currentInput;\n",[58,120,122],{"class":60,"line":121},6,[58,123,106],{"emptyLinePlaceholder":105},[58,125,127],{"class":60,"line":126},7,[58,128,129],{},"    private void HandleInput(ChangeEventArgs e)\n",[58,131,133],{"class":60,"line":132},8,[58,134,135],{},"    {\n",[58,137,139],{"class":60,"line":138},9,[58,140,141],{},"        currentInput = e.Value.ToString();\n",[58,143,145],{"class":60,"line":144},10,[58,146,147],{},"    }\n",[58,149,151],{"class":60,"line":150},11,[58,152,153],{},"}\n",[31,155,157],{"id":156},"onchange-action-on-final-value","@onchange — Action on Final Value",[14,159,160,162],{},[18,161,28],{}," triggers only when the input loses focus and the value has changed.",[14,164,165,167],{},[44,166,46],{}," Form submission, batch updates.",[49,169,171],{"className":51,"code":170,"language":53,"meta":54,"style":54},"\u003Cinput type=\"text\" @onchange=\"HandleChange\" />\n\u003Cp>Final input: @finalInput\u003C/p>\n\n@code {\n    private string finalInput;\n\n    private void HandleChange(ChangeEventArgs e)\n    {\n        finalInput = e.Value.ToString();\n    }\n}\n",[18,172,173,178,183,187,191,196,200,205,209,214,218],{"__ignoreMap":54},[58,174,175],{"class":60,"line":61},[58,176,177],{},"\u003Cinput type=\"text\" @onchange=\"HandleChange\" />\n",[58,179,180],{"class":60,"line":67},[58,181,182],{},"\u003Cp>Final input: @finalInput\u003C/p>\n",[58,184,185],{"class":60,"line":102},[58,186,106],{"emptyLinePlaceholder":105},[58,188,189],{"class":60,"line":109},[58,190,112],{},[58,192,193],{"class":60,"line":115},[58,194,195],{},"    private string finalInput;\n",[58,197,198],{"class":60,"line":121},[58,199,106],{"emptyLinePlaceholder":105},[58,201,202],{"class":60,"line":126},[58,203,204],{},"    private void HandleChange(ChangeEventArgs e)\n",[58,206,207],{"class":60,"line":132},[58,208,135],{},[58,210,211],{"class":60,"line":138},[58,212,213],{},"        finalInput = e.Value.ToString();\n",[58,215,216],{"class":60,"line":144},[58,217,147],{},[58,219,220],{"class":60,"line":150},[58,221,153],{},[31,223,225],{"id":224},"combining-bind-and-oninput","Combining @bind and @oninput",[14,227,228],{},"For live search with data model sync:",[49,230,232],{"className":51,"code":231,"language":53,"meta":54,"style":54},"\u003Cinput type=\"text\" @bind=\"searchQuery\" @oninput=\"PerformSearch\" />\n\n@code {\n    private string searchQuery;\n\n    private void PerformSearch(ChangeEventArgs e)\n    {\n        searchQuery = e.Value.ToString();\n        // Perform search logic here\n    }\n}\n",[18,233,234,239,243,247,252,256,261,265,270,275,279],{"__ignoreMap":54},[58,235,236],{"class":60,"line":61},[58,237,238],{},"\u003Cinput type=\"text\" @bind=\"searchQuery\" @oninput=\"PerformSearch\" />\n",[58,240,241],{"class":60,"line":67},[58,242,106],{"emptyLinePlaceholder":105},[58,244,245],{"class":60,"line":102},[58,246,112],{},[58,248,249],{"class":60,"line":109},[58,250,251],{},"    private string searchQuery;\n",[58,253,254],{"class":60,"line":115},[58,255,106],{"emptyLinePlaceholder":105},[58,257,258],{"class":60,"line":121},[58,259,260],{},"    private void PerformSearch(ChangeEventArgs e)\n",[58,262,263],{"class":60,"line":126},[58,264,135],{},[58,266,267],{"class":60,"line":132},[58,268,269],{},"        searchQuery = e.Value.ToString();\n",[58,271,272],{"class":60,"line":138},[58,273,274],{},"        // Perform search logic here\n",[58,276,277],{"class":60,"line":144},[58,278,147],{},[58,280,281],{"class":60,"line":150},[58,282,153],{},[31,284,286],{"id":285},"conclusion","Conclusion",[288,289,290,297,302],"ul",{},[291,292,293,294,296],"li",{},"Use ",[18,295,20],{}," for real-time synchronization between UI and data model.",[291,298,293,299,301],{},[18,300,24],{}," for immediate per-keystroke feedback.",[291,303,293,304,306],{},[18,305,28],{}," for actions that should happen after the user finishes input.",[308,309,310],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":54,"searchDepth":67,"depth":67,"links":312},[313,314,315,316,317],{"id":33,"depth":67,"text":34},{"id":73,"depth":67,"text":74},{"id":156,"depth":67,"text":157},{"id":224,"depth":67,"text":225},{"id":285,"depth":67,"text":286},"Learn the difference between @bind, @oninput, and @onchange in Blazor. Practical examples showing when to use each directive for real-time validation, live search, and form submission.","md",{"author":321,"date":322,"image":323,"category":324,"tags":325,"featured":336,"draft":336},"Aysegul Karadan","2024-07-11T10:00:00.000Z","/img/blazor-input/1.png","Programming",[326,327,328,329,330,331,332,333,334,335],"blazor","dotnet","csharp","frontend","blazor-input-handling","bind-vs-oninput-blazor","blazor-data-binding","blazor-forms","blazor-tutorial","how-to-handle-input-blazor",false,"/blog/input-handling-in-blazor-apps",{"title":5,"description":318},{"loc":337},"blog/input-handling-in-blazor-apps","Ic1-EqclR92PAgE70guBdwabHspX8ahLmCPzA1C8C0Q",1782986781101]