Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

357 lines (343 sloc) 22.2 KB
@page "/templateform"
@using NorthwindBlazor.Data
@using NorthwindBlazor.Models.Northwind
@using Microsoft.EntityFrameworkCore
@inject NorthwindContext dbContext
<h1 style="display:inline">TemplateForm</h1><a style="margin-left: 10px" href="https://github.com/akorchev/blazor.radzen.com/blob/master/Pages/TemplateFormPage.razor" target="_blank">[source code]</a><a style="margin-left: 10px" href="https://www.radzen.com/documentation/blazor/template-form/" target="_blank">[documentation]</a>
<p>This page demonstrates TemplateForm features.</p>
@if (order == null)
{
<p><em>Loading...</em></p>
}
else
{
<div class="row">
<div class="col-md-12">
<RadzenTemplateForm Data="@order" Submit="@((Order args) => { Submit(args); })">
<ChildContent>
<RadzenCard>
<ChildContent>
<div class="row">
<div class="col-md-6">
<RadzenFieldset Text="Purchase Info">
<ChildContent>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Credit Card">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenDropDown @bind-Value="order.CardId" AllowClear="true" Placeholder="Select something" Data="@cards" style="width: 100%;" TextProperty="CardNr" ValueProperty="CardId" Name="CardId">
</RadzenDropDown>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Card #">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="CardNr">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Expiry Date">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenDatePicker style="width: 100%;" Name="ExpiryDate" @bind-Value="order.ExpiryDate" >
</RadzenDatePicker>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Cardholder">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="CardHolder">
</RadzenTextBox>
</div>
</div>
</ChildContent>
</RadzenFieldset>
<RadzenFieldset Text="Contact Info">
<ChildContent>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Name">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="Name">
</RadzenTextBox>
</div>
</div>
<RadzenTabs SelectedIndex="0">
<Tabs>
<RadzenTabsItem Text="Billing Address">
<ChildContent>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Country">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenDropDown @bind-Value="order.Country" Placeholder="USA" Data="@countries" style="width: 100%;" TextProperty="Name" ValueProperty="Id" Name="Country">
</RadzenDropDown>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="City">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="City">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Address Line 1">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="Address1">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Address Line 2">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="Address2">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="State/Province/Region">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="State">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="col-md-4 align-items-center d-flex">
<RadzenLabel Text="Zip/Postal Code">
</RadzenLabel>
</div>
<div class="col-md-8">
<RadzenTextBox style="width: 100%;" Name="Zip">
</RadzenTextBox>
</div>
</div>
</ChildContent>
</RadzenTabsItem>
<RadzenTabsItem Selected="false" Text="Shipping Address">
</RadzenTabsItem>
</Tabs>
</RadzenTabs>
</ChildContent>
</RadzenFieldset>
</div>
<div class="col-md-6">
<RadzenFieldset Text="Store Info">
<ChildContent>
<div class="row">
<div class="align-items-center d-flex col-md-2">
<RadzenLabel Text="Store #">
</RadzenLabel>
</div>
<div class="col-md-10">
<RadzenTextBox Placeholder="123" style="width: 45.3125px;" Name="StoreId">
</RadzenTextBox>
<RadzenButton ButtonStyle="ButtonStyle.Info" Icon="add_location" style="margin-left: 11px; width: 166.046875px;" Text="Locate store">
</RadzenButton>
</div>
</div>
<div class="row">
<div class="align-items-center d-flex col-md-2">
<RadzenLabel Text="Name">
</RadzenLabel>
</div>
<div class="col-md-10">
<RadzenTextBox Disabled="true" Placeholder="The warehouse" style="width: 100%;" Name="Warehouse">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="align-items-center d-flex col-md-2">
<RadzenLabel Text="Region">
</RadzenLabel>
</div>
<div class="col-md-3">
<RadzenTextBox Disabled="true" Placeholder="West" style="width: 100%;" Name="Region">
</RadzenTextBox>
</div>
<div class="align-items-center d-flex col-md-2">
<RadzenLabel Text="System">
</RadzenLabel>
</div>
<div class="col-md-5">
<RadzenTextBox Disabled="true" Placeholder="US" style="width: 100%;" Name="System">
</RadzenTextBox>
</div>
</div>
</ChildContent>
</RadzenFieldset>
<RadzenFieldset Text="POS Info">
<ChildContent>
<div class="row">
<div class="align-items-center d-flex col-md-3">
<RadzenLabel Text="Trans #">
</RadzenLabel>
</div>
<div class="col-md-9">
<RadzenTextBox Disabled="true" Placeholder="S4485" style="width: 100%;" Name="TransId">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="align-items-center d-flex col-md-3">
<RadzenLabel Text="Register">
</RadzenLabel>
</div>
<div class="col-md-9">
<RadzenTextBox Disabled="true" Placeholder="Register #4" style="width: 100%;" Name="Register">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="align-items-center d-flex col-md-3">
<RadzenLabel Text="Clerk">
</RadzenLabel>
</div>
<div class="col-md-9">
<RadzenTextBox Disabled="true" Placeholder="Jane Doe" style="width: 100%;" Name="Clerk">
</RadzenTextBox>
</div>
</div>
<div class="row">
<div class="align-items-center d-flex col-md-3">
<RadzenLabel Text="Amount">
</RadzenLabel>
</div>
<div class="col-md-3">
<RadzenNumeric Placeholder="300" style="width: 100%;" Name="Amount" @bind-Value="order.Amount">
</RadzenNumeric>
</div>
<div class="align-items-center d-flex col-md-2">
<RadzenLabel Text="Tax">
</RadzenLabel>
</div>
<div class="col-md-4">
<RadzenNumeric Placeholder="123" style="width: 100%;" Name="Tax" @bind-Value="order.Tax">
</RadzenNumeric>
</div>
</div>
<div class="row">
<div class="align-items-center d-flex col-md-3">
<RadzenLabel Text="Order Date">
</RadzenLabel>
</div>
<div class="col-md-3">
<RadzenDatePicker style="width: 100%;" Name="OrderDate" @bind-Value="order.OrderDate">
</RadzenDatePicker>
</div>
<div class="align-items-center d-flex col-md-2">
<RadzenLabel Text="Ship Date">
</RadzenLabel>
</div>
<div class="col-md-4">
<RadzenDatePicker style="width: 100%;" Name="ShipDate" @bind-Value="order.ShipDate">
</RadzenDatePicker>
</div>
</div>
</ChildContent>
</RadzenFieldset>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 d-flex align-items-end justify-content-center" style="margin-top: 16px;">
<RadzenButton ButtonType="ButtonType.Submit" Icon="save" Text="Save">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Light" Icon="cancel" style="display: inline-block; margin-left: 10px;" Text="Cancel" Click="@Cancel">
</RadzenButton>
</div>
</div>
</ChildContent>
</RadzenCard>
</ChildContent>
</RadzenTemplateForm>
</div>
</div>
}
@code {
public class Order
{
public int CardId { get; set; }
public string CardNr { get; set; }
public DateTime ExpiryDate { get; set; }
public string CardHolder { get; set; }
public string Name { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zip { get; set; }
public string Country { get; set; }
public int StoreId { get; set; }
public string Warehouse { get; set; }
public string Region { get; set; }
public string System { get; set; }
public int TransId { get; set; }
public string Register { get; set; }
public string Clerk { get; set; }
public decimal Amount { get; set; }
public decimal Tax { get; set; }
public DateTime OrderDate { get; set; }
public DateTime ShipDate { get; set; }
}
public class CreditCard
{
public int CardId { get; set; }
public string CardNr { get; set; }
}
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
}
Order order = new Order()
{
ExpiryDate = DateTime.Parse("10/10/2022"),
OrderDate = DateTime.Now,
ShipDate = DateTime.Now
};
List<CreditCard> cards = new List<CreditCard>()
{
new CreditCard() { CardId = 1, CardNr = "5555555555554444" },
new CreditCard() { CardId = 2, CardNr = "4012888888881881" }
};
List<Country> countries = new List<Country>()
{
new Country() { Id = 1, Name = "USA" },
new Country() { Id = 2, Name = "Germany" }
};
void Submit(Order arg)
{
//
}
void Cancel()
{
//
}
}
You can’t perform that action at this time.