Update blazor docs to reflect directive attributes changes (dotnet#12756)

Author: ajaybhargavb

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/ChildComponent.razor

@@ -2,12 +2,12 @@
     <div class="panel-heading">@Title</div>
     <div class="panel-body">@ChildContent</div>
 
-    <button class="btn btn-primary" onclick="@OnClick">
+    <button class="btn btn-primary" @onclick="@OnClick">
         Trigger a Parent component method
     </button>
 </div>
 
-@functions {
+@code {
     [Parameter]
     private string Title { get; set; }
 

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/HeadingComponent.razor

@@ -21,7 +21,7 @@
             _italicsCheck field.
         *@
         <input type="checkbox" id="italicsCheck" 
-               bind="@_italicsCheck" />
+               @bind="@_italicsCheck" />
         <label class="form-check-label" 
             for="italicsCheck">Use italics</label>
     </div>
@@ -30,12 +30,12 @@
         When the form is submitted, the onclick event executes 
         the UpdateHeading method.
     *@
-    <button type="button" class="btn btn-primary" onclick="@UpdateHeading">
+    <button type="button" class="btn btn-primary" @onclick="@UpdateHeading">
         Update heading
     </button>
 </form>
 
-@functions {
+@code {
     private static TextInfo _tinfo = CultureInfo.CurrentCulture.TextInfo;
     private string _headingText = 
         _tinfo.ToTitleCase("welcome to blazor!");

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/ListViewTemplate.razor

@@ -7,7 +7,7 @@
     }
 </ul>
 
-@functions {
+@code {
     [Parameter]
     private RenderFragment<TItem> ItemTemplate { get; set; }
 

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/Tab.razor

@@ -3,12 +3,12 @@
 @implements ITab
 
 <li>
-    <a onclick="@Activate" class="nav-link @TitleCssClass" role="button">
+    <a @onclick="@Activate" class="nav-link @TitleCssClass" role="button">
         @Title
     </a>
 </li>
 
-@functions {
+@code {
     [CascadingParameter]
     private TabSet ContainerTabSet { get; set; }
 

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/TabSet.razor

@@ -12,7 +12,7 @@
     @ActiveTab?.ChildContent
 </div>
 
-@functions {
+@code {
     [Parameter]
     private RenderFragment ChildContent { get; set; }
 

aspnetcore/blazor/common/samples/3.x/BlazorSample/Components/TableTemplate.razor

@@ -15,7 +15,7 @@
     </tfoot>
 </table>
 
-@functions {
+@code {
     [Parameter]
     private RenderFragment TableHeader { get; set; }
 

aspnetcore/blazor/common/samples/3.x/BlazorSample/Pages/CascadingValuesParametersTabSet.razor

@@ -8,7 +8,7 @@
         <h4>Greetings from the first tab!</h4>
 
         <label>
-            <input type="checkbox" bind="@showThirdTab" />
+            <input type="checkbox" @bind="@showThirdTab" />
             Toggle third tab
         </label>
     </Tab>
@@ -49,7 +49,7 @@ namespace BlazorSample.UIInterfaces
         &lt;h4&gt;Greetings from the first tab!&lt;/h4&gt;
 
         &lt;label&gt;
-            &lt;input type="checkbox" bind="@@showThirdTab" /&gt;
+            &lt;input type="checkbox" @@bind="@@showThirdTab" /&gt;
             Toggle third tab
         &lt;/label&gt;
     &lt;/Tab&gt;
@@ -66,7 +66,7 @@ namespace BlazorSample.UIInterfaces
     }
 &lt;/TabSet&gt;
 
-@@functions
+@@code
 {
     private bool showThirdTab;
 }</code></pre>
@@ -89,7 +89,7 @@ namespace BlazorSample.UIInterfaces
     @@ActiveTab?.ChildContent
 &lt;/div&gt;
 
-@@functions {
+@@code {
     [Parameter]
     private RenderFragment ChildContent { get; set; }
 
@@ -130,12 +130,12 @@ namespace BlazorSample.UIInterfaces
 @@implements ITab
 
 &lt;li&gt;
-    &lt;a onclick="@@Activate" class="nav-link @@TitleCssClass" role="button"&gt;
+    &lt;a @@onclick="@@Activate" class="nav-link @@TitleCssClass" role="button"&gt;
         @@Title
     &lt;/a&gt;
 &lt;/li&gt;
 
-@@functions {
+@@code {
     [CascadingParameter] private TabSet ContainerTabSet { get; set; }
 
     [Parameter]
@@ -162,7 +162,7 @@ namespace BlazorSample.UIInterfaces
     }
 }</code></pre>
 
-@functions
+@code
 {
     private bool showThirdTab;
 }

aspnetcore/blazor/common/samples/3.x/BlazorSample/Pages/CascadingValuesParametersTheme.razor

@@ -6,11 +6,11 @@
 
 <p>Current count: @currentCount</p>
 
-<p><button class="btn btn-primary" onclick="@IncrementCount">Increment Counter (Unthemed)</button></p>
+<p><button class="btn btn-primary" @onclick="@IncrementCount">Increment Counter (Unthemed)</button></p>
 
-<p><button class="btn @ThemeInfo.ButtonClass" onclick="@IncrementCount">Increment Counter (Themed)</button></p>
+<p><button class="btn @ThemeInfo.ButtonClass" @onclick="@IncrementCount">Increment Counter (Themed)</button></p>
 
-@functions {
+@code {
     private int currentCount = 0;
 
     [CascadingParameter]
@@ -39,17 +39,17 @@
     &lt;/CascadingValue&gt;
 &lt;/div&gt;
 
-@@functions {
+@@code {
     private ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" };
 }</code></pre>
 
 <p>This component (<em>CascadingValuesParametersTheme.razor</em>) receives the <code>ThemeInfo</code> as a <code>CascadingParameter</code>. The parameter is used to style one of the buttons:</p>
 
-<pre><code>&lt;button class="btn" onclick="@@IncrementCount"&gt;Increment Counter (Unthemed)&lt;/button&gt;
+<pre><code>&lt;button class="btn" @@onclick="@@IncrementCount"&gt;Increment Counter (Unthemed)&lt;/button&gt;
 
-&lt;button class="btn @@ThemeInfo.ButtonClass" onclick="@@IncrementCount"&gt;Increment Counter (Themed)&lt;/button&gt;
+&lt;button class="btn @@ThemeInfo.ButtonClass" @@onclick="@@IncrementCount"&gt;Increment Counter (Themed)&lt;/button&gt;
 
-@@functions {
+@@code {
     private int currentCount = 0;
 
     [CascadingParameter]

aspnetcore/blazor/common/samples/3.x/BlazorSample/Pages/Index.razor

@@ -40,20 +40,20 @@
         @@*
             A check box sets the font style and is bound to the _italicsCheck field.
         *@@
-        <input type="checkbox" id="italicsCheck" bind="@@_italicsCheck" />
+        <input type="checkbox" id="italicsCheck" @@bind="@@_italicsCheck" />
         <label class="form-check-label" for="italicsCheck">Use italics</label>
     </div>
 
     @@*
         When the form is submitted, the onclick event executes
         the UpdateHeading method.
     *@@
-    <button type="button" class="btn btn-primary" onclick="@@UpdateHeading">
+    <button type="button" class="btn btn-primary" @@onclick="@@UpdateHeading">
         Update heading
     </button>
 </form>
 
-@@functions {
+@@code {
     private static TextInfo _tinfo = CultureInfo.CurrentCulture.TextInfo;
     private string _headingText = _tinfo.ToTitleCase("welcome to blazor!");
     private string _headingFontStyle = "normal";

aspnetcore/blazor/common/samples/3.x/BlazorSample/Pages/JSInterop.razor

@@ -7,13 +7,13 @@
 
 <h2>Invoke JavaScript functions from .NET methods</h2>
 
-<button type="button" class="btn btn-primary" onclick="@TriggerJsPrompt">
+<button type="button" class="btn btn-primary" @onclick="@TriggerJsPrompt">
     Trigger JavaScript Prompt
 </button>
 
 <h3 id="welcome" style="color:green;font-style:italic"></h3>
 
-@functions {
+@code {
     public async void TriggerJsPrompt()
     {
         // showPrompt is implemented in wwwroot/exampleJsInterop.js
@@ -48,11 +48,11 @@
 
 <!-- <snippet_JSInterop2> -->
 <button type="button" class="btn btn-primary"
-        onclick="exampleJsFunctions.returnArrayAsyncJs()">
+        @onclick="exampleJsFunctions.returnArrayAsyncJs()">
     Trigger .NET static method ReturnArrayAsync
 </button>
 
-@functions {
+@code {
     [JSInvokable]
     public static Task<int[]> ReturnArrayAsync()
     {
@@ -62,11 +62,11 @@
 <!-- </snippet_JSInterop2> -->
 
 <!-- <snippet_JSInterop3> -->
-<button type="button" class="btn btn-primary" onclick="@TriggerNetInstanceMethod">
+<button type="button" class="btn btn-primary" @onclick="@TriggerNetInstanceMethod">
     Trigger .NET instance method HelloHelper.SayHello
 </button>
 
-@functions {
+@code {
     public async void TriggerNetInstanceMethod()
     {
         var exampleJsInterop = new ExampleJsInterop(JSRuntime);