Form input (WIP, unstable)

sjefvanleeuwen · sjefvanleeuwen · commit 30b9837bcdc8 · 2020-09-03T18:58:31.000+02:00
diff --git a/src/Blazor.AdminLte.Site.Shared/Pages/Forms/General.razor b/src/Blazor.AdminLte.Site.Shared/Pages/Forms/General.razor
@@ -1,17 +1,46 @@
 ﻿@page "/forms/general"
 <ContentHeader>
     <Header>
-        <PageTitle Title="General Forms" />
+        <PageTitle Title="General Form" />
     </Header>
 </ContentHeader>
 <ContentMain>
+    <Row>
+        <Column Classes="col.md._6">
+            <Card HeaderBackgroundColor="Color.Primary" ToolOptions="new CardToolOptions { Collapsable = true, Maximizable=true}">
+                <Title><CardTitle>Quick Example</CardTitle></Title>
+                <Header><CardTools /></Header>
+                <Body>
+                    <FormGroup>
+                        @code{
+                            List<InputState> Inputs = new List<InputState>()
+                                                                                                            {
+                              new InputState(){Identifier="exampleInputEmail1", Placeholder="Enter email", Label="Email Address", Type="email"},
+                              new InputState(){Identifier="exampleInputPassword1", Placeholder="Password", Label="Password", Type="password"},
+                              new InputState(){Identifier="exampleInputFile1", Placeholder="Choose file", Label="Email Address", Type="file"}
+                        };
+                        }
+                        @for (int i = 0; i < Inputs.Count; i++)
+                        {
+                            <Input @bind-Value="Inputs[i]" /> <text>Value: @Inputs[i].Value;</text>
+                            @System.Text.Json.JsonSerializer.Serialize(Inputs[i]);
+                        }
+                    </FormGroup>
+                </Body>
+                <Footer>
+                    <Button>Submit</Button>
+                </Footer>
+            </Card>
+        </Column>
+    </Row>
+
     <Card>
         <Title><CardTitle>Some simple link content</CardTitle></Title>
         <Body>
             <FormGroup>
                 @code{
                     List<CustomCheckboxState> Checkboxes = new List<CustomCheckboxState>()
-                                                        {
+                                                {
                         new CustomCheckboxState(){ Identifier = "customCheckbox1", Value="option1", Label="Custom Checkbox"},
                         new CustomCheckboxState(){ Identifier = "customCheckbox2", Value="option2", IsChecked=true, Label= "Custom Checkbox checked"},
                         new CustomCheckboxState(){ Identifier = "customCheckbox3", Value="option3", IsDisabled=true, Label= "Custom Checkbox disabled"}
diff --git a/src/Blazor.AdminLte/Forms/Input.razor b/src/Blazor.AdminLte/Forms/Input.razor
@@ -0,0 +1,3 @@
+﻿@namespace Blazor.AdminLte
+<label for="@Value.Identifier">@((MarkupString)Value.Label)</label>
+<input class="form-control" id="@Value.Identifier" placeholder="@Value.Placeholder"  value="@Value.Value" @onchange="DoChange" type="@Value.Type">
diff --git a/src/Blazor.AdminLte/Forms/Input.razor.cs b/src/Blazor.AdminLte/Forms/Input.razor.cs
@@ -0,0 +1,24 @@
+﻿using Microsoft.AspNetCore.Components;
+
+namespace Blazor.AdminLte
+{
+    public partial class Input
+    {
+        [Parameter]
+        public InputState Value { get; set; }
+
+        [Parameter]
+        public EventCallback<InputState> ValueChanged { get; set; }
+
+        [Parameter]
+        public EventCallback<InputState> OnChange { get; set; }
+
+        private void DoChange(ChangeEventArgs e)
+        {
+            Value.Value = (string)e.Value;
+            ValueChanged.InvokeAsync(Value);
+            if (OnChange.HasDelegate)
+                OnChange.InvokeAsync(Value);
+        }
+    }
+}
diff --git a/src/Blazor.AdminLte/Forms/InputState.cs b/src/Blazor.AdminLte/Forms/InputState.cs
@@ -0,0 +1,12 @@
+﻿namespace Blazor.AdminLte
+{
+    public class InputState
+    {
+        public string Value { get; set; }
+        public string Identifier { get; set; }
+        public string Label { get; set; }
+        public string Placeholder { get; set; }
+        public string Type { get; set; }
+        
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@namespace Blazor.AdminLte`
	`2`	`+<label for="@Value.Identifier">@((MarkupString)Value.Label)</label>`
	`3`	`+<input class="form-control" id="@Value.Identifier" placeholder="@Value.Placeholder" value="@Value.Value" @onchange="DoChange" type="@Value.Type">`