Skip to content

Commit a2bc95b

Browse files
Vinitha-BalasubramanianVinitha-Balasubramanian
committed
935302: Updated display validation message in dialog template topic
1 parent 76ed380 commit a2bc95b

File tree

1 file changed

+65
-56
lines changed

1 file changed

+65
-56
lines changed

‎DisplayValidationMessage.Client/Pages/Counter.razor‎

Lines changed: 65 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -19,48 +19,43 @@
1919
<ValidationMessage For="() => Order.OrderID" />
2020
<ValidationMessage For="() => Order.OrderDate" />
2121
<ValidationMessage For="() => Order.CustomerID" />
22+
<ValidationMessage For="() => Order.Freight" />
2223
<ValidationMessage For="() => Order.ShipCountry" />
24+
<ValidationMessage For="() => Order.ShipCity" />
2325
<ValidationMessage For="() => Order.ShipAddress" />
2426
<div class="form-row">
2527
<div class="form-group col-md-6">
26-
<label class="e-float-text e-label-top">Order ID</label>
27-
<SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox>
28+
<SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@((Order.OrderID == 0) ? true : false)" FloatLabelType="FloatLabelType.Always" Placeholder="Order ID"></SfNumericTextBox>
2829
</div>
2930
<div class="form-group col-md-6">
30-
<label class="e-float-text e-label-top">Customer Name</label>
31-
<SfAutoComplete ID="customerID" TItem="OrdersDetails" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData">
31+
<SfAutoComplete ID="CustomerID" TItem="OrdersDetails" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Customer Name">
3232
<AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
3333
</SfAutoComplete>
3434
</div>
3535
</div>
3636
<div class="form-row">
3737
<div class="form-group col-md-6">
38-
<label class="e-float-text e-label-top">Freight</label>
39-
<SfNumericTextBox ID="Freight" @bind-Value="@(Order.Freight)" TValue="double?"></SfNumericTextBox>
38+
<SfNumericTextBox ID="Freight" @bind-Value="@(Order.Freight)" TValue="double?" FloatLabelType="FloatLabelType.Always" Placeholder="Freight"></SfNumericTextBox>
4039
</div>
4140
<div class="form-group col-md-6">
42-
<label class="e-float-text e-label-top">Order Date</label>
43-
<SfDatePicker ID="OrderDate" @bind-Value="@(Order.OrderDate)"></SfDatePicker>
41+
<SfDatePicker ID="OrderDate" @bind-Value="@(Order.OrderDate)" FloatLabelType="FloatLabelType.Always" Placeholder="Order Date"></SfDatePicker>
4442
</div>
4543
</div>
4644
<div class="form-row">
4745
<div class="form-group col-md-6">
48-
<label class="e-float-text e-label-top">Ship Country</label>
49-
<SfDropDownList ID="ShipCountry" @bind-Value="@(Order.ShipCountry)" TItem="OrdersDetails" TValue="string" DataSource="@GridData">
46+
<SfDropDownList ID="ShipCountry" @bind-Value="@(Order.ShipCountry)" TItem="Country" TValue="string" DataSource="@CountryName" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Country">
5047
<DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>
5148
</SfDropDownList>
5249
</div>
5350
<div class="form-group col-md-6">
54-
<label class="e-float-text e-label-top">Ship City</label>
55-
<SfDropDownList ID="ShipCity" @bind-Value="@(Order.ShipCity)" TItem="OrdersDetails" TValue="string" DataSource="@GridData">
51+
<SfDropDownList ID="ShipCity" @bind-Value="@(Order.ShipCity)" TItem="City" TValue="string" DataSource="@CityName" FloatLabelType="FloatLabelType.Always" Placeholder="Ship City">
5652
<DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings>
5753
</SfDropDownList>
5854
</div>
5955
</div>
6056
<div class="form-row">
6157
<div class="form-group col-md-12">
62-
<label class="e-float-text e-label-top">Ship Address</label>
63-
<SfTextBox ID="ShipAddress" @bind-Value="@(Order.ShipAddress)"></SfTextBox>
58+
<SfTextBox ID="ShipAddress" Multiline="true" @bind-Value="@(Order.ShipAddress)" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Address"></SfTextBox>
6459
</div>
6560
</div>
6661
</div>
@@ -76,56 +71,34 @@
7671
</GridColumns>
7772
</SfGrid>
7873

79-
@* <style>
80-
.form-group {
81-
margin-bottom: 1rem;
82-
}
83-
84-
.form-inline .form-control {
85-
display: inline-block;
86-
width: auto;
87-
vertical-align: middle;
88-
}
89-
90-
.form-row {
91-
display: flex;
92-
flex-wrap: wrap;
93-
margin-right: -5px;
94-
margin-left: -5px;
95-
}
96-
97-
.form-row > .col {
98-
padding-left: 5px;
99-
padding-right: 5px;
100-
}
101-
102-
label {
103-
margin-bottom: 0.5rem;
104-
}
105-
</style> *@
106-
10774
@code {
75+
10876
public List<OrdersDetails> GridData = new List<OrdersDetails>
10977
{
110-
new OrdersDetails() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, ShipCity = "Berlin", OrderDate = DateTime.Now.AddDays(-2), ShipName = "Vins et alcools Chevalier", ShipCountry = "Denmark", ShipAddress = "Kirchgasse 6" },
111-
new OrdersDetails() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-5), ShipName = "Toms Spezialitäten", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
112-
new OrdersDetails() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, ShipCity = "Cholchester", OrderDate = DateTime.Now.AddDays(-12), ShipName = "Hanari Carnes", ShipCountry = "Germany", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" },
113-
new OrdersDetails() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34, ShipCity = "Marseille", OrderDate = DateTime.Now.AddDays(-18), ShipName = "Victuailles en stock", ShipCountry = "Austria", ShipAddress = "Magazinweg 7" },
114-
new OrdersDetails() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3, ShipCity = "Tsawassen", OrderDate = DateTime.Now.AddDays(-22), ShipName = "Suprêmes délices", ShipCountry = "Switzerland", ShipAddress = "1029 - 12th Ave. S." },
115-
new OrdersDetails() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, ShipCity = "Tsawassen", OrderDate = DateTime.Now.AddDays(-26), ShipName = "Hanari Carnes", ShipCountry = "Switzerland", ShipAddress = "1029 - 12th Ave. S." },
116-
new OrdersDetails() { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98, ShipCity = "Berlin", OrderDate = DateTime.Now.AddDays(-34), ShipName = "Chop-suey Chinese", ShipCountry = "Denmark", ShipAddress = "Kirchgasse 6" },
117-
new OrdersDetails() { OrderID = 10255, CustomerID = "RICSU", Freight = 148.33, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-39), ShipName = "Richter Supermarket", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
118-
new OrdersDetails() { OrderID = 10256, CustomerID = "WELLI", Freight = 13.97, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-43), ShipName = "Wellington Importadora", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
119-
new OrdersDetails() { OrderID = 10257, CustomerID = "HILAA", Freight = 81.91, ShipCity = "Cholchester", OrderDate = DateTime.Now.AddDays(-48), ShipName = "HILARION-Abastos", ShipCountry = "Germany", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" }
78+
new OrdersDetails() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, ShipCity = "Reims", OrderDate = new DateTime(1996, 7, 4), ShipName = "Vins et alcools Chevalier", ShipCountry = "France", ShipAddress = "59 rue de l Abbaye" },
79+
new OrdersDetails() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, ShipCity = "Münster", OrderDate = new DateTime(1996, 7, 5), ShipName = "Toms Spezialitäten", ShipCountry = "Germany", ShipAddress = "Luisenstr. 48" },
80+
new OrdersDetails() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, ShipCity = "Rio de Janeiro", OrderDate = new DateTime(1996, 7, 8), ShipName = "Hanari Carnes", ShipCountry = "Brazil", ShipAddress = "Rua do Paço, 67" },
81+
new OrdersDetails() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34, ShipCity = "Lyon", OrderDate = new DateTime(1996, 7, 8), ShipName = "Victuailles en stock", ShipCountry = "France", ShipAddress = "2, rue du Commerce" },
82+
new OrdersDetails() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3, ShipCity = "Charleroi", OrderDate = new DateTime(1996, 7, 9), ShipName = "Suprêmes délices", ShipCountry = "Belgium", ShipAddress = "Boulevard Tirou, 255" },
83+
new OrdersDetails() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, ShipCity = "Rio de Janeiro", OrderDate = new DateTime(1996, 7, 10), ShipName = "Hanari Carnes", ShipCountry = "Brazil", ShipAddress = "Rua do Paço, 67" },
84+
new OrdersDetails() { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98, ShipCity = "Bern", OrderDate = new DateTime(1996, 7, 11), ShipName = "Chop-suey Chinese", ShipCountry = "Switzerland", ShipAddress = "Hauptstr. 31" },
85+
new OrdersDetails() { OrderID = 10255, CustomerID = "RICSU", Freight = 148.33, ShipCity = "Genève", OrderDate = new DateTime(1996, 7, 12), ShipName = "Richter Supermarkt", ShipCountry = "Switzerland", ShipAddress = "Starenweg 5" },
86+
new OrdersDetails() { OrderID = 10256, CustomerID = "WELLI", Freight = 13.97, ShipCity = "Resende", OrderDate = new DateTime(1996, 7, 15), ShipName = "Wellington Importadora", ShipCountry = "Brazil", ShipAddress = "Rua do Mercado, 12" },
87+
new OrdersDetails() { OrderID = 10257, CustomerID = "HILAA", Freight = 81.91, ShipCity = "San Cristóbal", OrderDate = new DateTime(1996, 7, 16), ShipName = "HILARION-Abastos", ShipCountry = "Venezuela", ShipAddress = "Carrera 22 con Ave. Carlos Soublette #8-35" },
88+
new OrdersDetails() { OrderID = 10258, CustomerID = "ERNSH", Freight = 140.51, ShipCity = "Graz", OrderDate = new DateTime(1996, 7, 17), ShipName = "Ernst Handel", ShipCountry = "Austria", ShipAddress = "Kirchgasse 6" },
89+
new OrdersDetails() { OrderID = 10259, CustomerID = "CENTC", Freight = 3.25, ShipCity = "México D.F.", OrderDate = new DateTime(1996, 7, 18), ShipName = "Centro comercial Moctezuma", ShipCountry = "Mexico", ShipAddress = "Sierras de Granada 9993" },
90+
new OrdersDetails() { OrderID = 10260, CustomerID = "OTTIK", Freight = 55.09, ShipCity = "Köln", OrderDate = new DateTime(1996, 7, 19), ShipName = "Ottilies Käseladen", ShipCountry = "Germany", ShipAddress = "Mehrheimerstr. 369" },
91+
new OrdersDetails() { OrderID = 10261, CustomerID = "QUEDE", Freight = 3.05, ShipCity = "Rio de Janeiro", OrderDate = new DateTime(1996, 7, 19), ShipName = "Que Delícia", ShipCountry = "Brazil", ShipAddress = "Rua da Panificadora, 12" },
92+
new OrdersDetails() { OrderID = 10262, CustomerID = "RATTC", Freight = 48.29, ShipCity = "Albuquerque", OrderDate = new DateTime(1996, 7, 22), ShipName = "Rattlesnake Canyon Grocery", ShipCountry = "USA", ShipAddress = "2817 Milton Dr." }
12093
};
12194

12295
public class OrdersDetails
12396
{
124-
[Required]
125-
public int? OrderID { get; set; }
126-
[Required]
97+
[Range(1, int.MaxValue, ErrorMessage = "Order ID must be greater than 0")]
98+
public int OrderID { get; set; }
99+
[StringLength(5, MinimumLength = 3, ErrorMessage = "CustomerID must be between 3 and 5 characters long.")]
127100
public string CustomerID { get; set; }
128-
[Required]
101+
[Range(0, double.MaxValue, ErrorMessage = "Freight must be a positive value")]
129102
public double? Freight { get; set; }
130103
[Required]
131104
public string ShipCity { get; set; }
@@ -137,4 +110,40 @@
137110
[Required]
138111
public string ShipAddress { get; set; }
139112
}
113+
114+
public class City
115+
{
116+
public string ShipCity { get; set; }
117+
}
118+
List<City> CityName = new List<City>
119+
{
120+
new City() { ShipCity= "Reims" },
121+
new City() { ShipCity= "Münster" },
122+
new City() { ShipCity = "Rio de Janeiro" },
123+
new City() { ShipCity = "Lyon" },
124+
new City() { ShipCity = "Charleroi" },
125+
new City() { ShipCity = "Genève" },
126+
new City() { ShipCity = "Resende" },
127+
new City() { ShipCity = "San Cristóbal" },
128+
new City() { ShipCity = "Graz" },
129+
new City() { ShipCity = "México D.F." },
130+
new City() { ShipCity = "Köln" },
131+
new City() { ShipCity = "Albuquerque" },
132+
};
133+
public class Country
134+
{
135+
public string ShipCountry { get; set; }
136+
}
137+
List<Country> CountryName = new List<Country>
138+
{
139+
new Country() { ShipCountry= "France"},
140+
new Country() { ShipCountry= "Brazil"},
141+
new Country() { ShipCountry= "Germany"},
142+
new Country() { ShipCountry= "Belgium"},
143+
new Country() { ShipCountry= "Austria"},
144+
new Country() { ShipCountry= "Switzerland"},
145+
new Country() { ShipCountry= "Venezuela"},
146+
new Country() { ShipCountry= "Mexico"},
147+
new Country() { ShipCountry= "USA"},
148+
};
140149
}

0 commit comments

Comments
 (0)