<commit_before><?xml version="1.0" encoding="UTF-8"?>

<Lesson>
	<ValidatorsNamespace>DotvvmAcademy.Steps.Validation.Validators.Lesson3</ValidatorsNamespace>
	<Steps>

		<!--1-->
		<Step Type="Info">
			<!--Required element-->
			<Title>Form Controls</Title>
			<!--Required element-->
			<Description>
				<![CDATA[
In this lesson, you'll learn how to use the `TextBox`, `CheckBox`, `RadioButton` and `ComboBox` controls. We will build a simple form with customer details.
								]]>
			</Description>
		</Step>

		<!--2-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding FirstName and LastName Properties</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step2Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare the `FirstName` and `LastName` properties of type `string` in the following class.
]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		// declare properties here
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
	}
}
]]>
			</FinalCode>
		</Step>

		<!--3-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using TextBoxes</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step3Validator</ValidationKey>
			<Description>
				<![CDATA[
Add 2 `TextBox` controls in the page and bind their `Text` to the `FirstName` and `LastName` properties.
								]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<!-- place first textbox here -->
	<!-- place second textbox here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
								]]>
			</FinalCode>
		</Step>

		<!--4-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding Role Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step4Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare a `string` property called `Role` in the viewmodel.
]]>
			</Description>

			<StartupCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		// add Role property
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
	}
}
]]>
			</FinalCode>
		</Step>

		<!--5-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using RadioButtons</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step5Validator</ValidationKey>
			<Description>
				<![CDATA[
Add 2 `RadioButton` controls in the page. 

The `Text` property specifies the label text for the radio button. Set the `Text` of the first one to "Admin" and the `Text` of the second one to "User".

The `CheckedItem` specifies which viewmodel property be used. Set this to `Role` on both radio buttons.

And finally, the `CheckedValue` specifies the value that will be stored in the `Role` property. Set the first one to "A" and the second one to "U". 
								]]>
			</Description>

			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
	Role: 
	<!-- place first RadioButton here -->
	<!-- place second RadioButton here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
	Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
								]]>
			</FinalCode>

		</Step>

		<!--6-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding Interests Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step6Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare a property named `Interests` of type `List<string>`.
]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		// add Interests property and initialize
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[

using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public List<string> Interests { get; set; } = new List<string>();
	}
}
]]>
			</FinalCode>
			<!--Optional element-->
			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<string>
												]]>
				</AllowedType>
			</AllowedTypesConstructed>

		</Step>

		<!--7-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using CheckBoxes</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step7Validator</ValidationKey>
			<Description>
				<![CDATA[
Add 3 `CheckBox` controls to the page. 
Bind their `CheckedItems` property to `Interests` to specify where the checked items will be stored.

Then, set the `Text` to "Music", "Sports" and "News".

And finally, set `CheckedValue` to "M", "S" a "N". These values will be stored in the `Interests` collection when the corresponding checkbox is checked.

								]]>
			</Description>

			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
	Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<!-- place first CheckBox here -->
	<!-- place second CheckBox here -->
	<!-- place third CheckBox here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
 Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Music" CheckedValue="M"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Sports" CheckedValue="S"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="News" CheckedValue="N"/>
</p>
								]]>
			</FinalCode>
		</Step>

		<!--8-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Add CountryInfo Class</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step8Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Create a new class called `CountryInfo` with `Id` property of type `int` and `Name` property of type `string`.
]]>
			</Description>
			<!--Optional element-->

			<StartupCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	// create the CountryInfo here
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
]]>
			</FinalCode>
		</Step>

		<!--9-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Add the Countries Collection</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step9Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare the `Countries` property of type `List<CountryInfo>` and `SelectedCountryId` property of type `int`.
]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		// declare Countries collection
		// declare SelectedCountryId 
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
		public List<CountryInfo> Countries { get; set; } = new List<CountryInfo>();
	}
}
]]>
			</FinalCode>

			<!--Optional element-->
			<CodeDependencies>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
												]]>
				</CodeDependency>
			</CodeDependencies>


			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>
												]]>
				</AllowedType>
			</AllowedTypesConstructed>
		</Step>

		<!--10-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Initialize Countries Collection</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step10Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Create a default constructor and initialize the `Countries` collection with the following states:

* "USA" with `Id` = 1
* "Canada" with `Id` = 2
]]>
			</Description>
			<!--Optional element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel() 
		{
			// initialize the countries
		}
  
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
		public List<CountryInfo> Countries { get; set; } = new List<CountryInfo>();
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel()
		{
			Countries.Add(new CountryInfo() { Id = 1, Name = "USA" });
			Countries.Add(new CountryInfo() { Id = 2, Name = "Canada" });
		}
  
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
		public List<CountryInfo> Countries { get; set; } = new List<CountryInfo>();
	}
}
]]>
			</FinalCode>

			<!--Optional element-->
			<CodeDependencies>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
												]]>
				</CodeDependency>
			</CodeDependencies>
			<!--Optional element-->
			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>
												]]>
				</AllowedType>
				<AllowedType>
					<![CDATA[
DotvvmAcademy.Tutorial.ViewModels.CountryInfo
												]]>
				</AllowedType>
			</AllowedTypesConstructed>
			<!--Optional element-->
			<AllowedMethodsCalled>
				<AllowedMethod>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>.Add
												]]>
				</AllowedMethod>
			</AllowedMethodsCalled>
		</Step>

		<!--11-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using ComboBox</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step11Validator</ValidationKey>
			<Description>
				<![CDATA[
Add the `ComboBox` control to the page and bind its `DataSource` to the `Countries` collection. It will fill the combo box with the countries we have initialized in the constructor.

Now we need to tell the combo box that the `Name` property from the `CountryInfo` class should be displayed. Set the `DisplayMember` to "Name". 

When the user selects some item, we want to use the `Id` from the selected `CountryInfo` object as selected value. So set the `ValueMember` to "Id".

And finally, we have to specify where the selected value will be stored. Bind the `SelectedValue` to the `SelectedCountryId` property in the viewmodel.
								]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
 Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Music" CheckedValue="M"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Sports" CheckedValue="S"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="News" CheckedValue="N"/>
</p>
<p>
 <!-- create ComboBox here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
 Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Music" CheckedValue="M"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Sports" CheckedValue="S"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="News" CheckedValue="N"/>
</p>
<p>
	<dot:ComboBox DataSource="{value: Countries}"
        SelectedValue="{value: SelectedCountryId}"
        ValueMember="Id"
        DisplayMember="Name" />
</p>
								]]>
			</FinalCode>
		</Step>

		<!--12-->
		<Step Type="Info">
			<!--Required element-->
			<Title>The CustomerInfo Class</Title>
			<!--Required element-->
			<Description>
				<![CDATA[
In the previous steps, we have placed all properties - `FirstName`, `LastName`, `Role` and `SelectedCountryId` in the same class with the `Countries` collection.

That's not the best practise, because we are mixing the information about specific customer with some other data, which is e.g. the list of countries.
It is a good idea to separate properties that represent state of some entity (customer, in this case), into a separate class. This class often contains only properties and no methods. 
It is called DTO - Data Transfer Object.

So, we have moved the properties in the `CustomerInfo` class:

```CSHARP
public class CustomerInfo
{
	public string FirstName { get; set; }
	public string LastName { get; set; }
	public string Role { get; set; }
	public int SelectedCountryId { get; set; }
}
```

The `Countries` collection stays in the viewmodel.
								]]>
			</Description>
		</Step>

		<!--13-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding CustomerInfo Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step13Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare a new property called `NewCustomer` of type `CustomerInfo`.
]]>
			</Description>

			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel()
		{
			Countries.Add(new CountryInfo() { Id = 1, Name = "USA" });
			Countries.Add(new CountryInfo() { Id = 2, Name = "Canada" });
		}
		
		// add the NewCustomer property
  
		public List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo> Countries { get; set; } = new List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>();
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel ()
		{
			Countries.Add(new CountryInfo() { Id = 1, Name = "USA" });
			Countries.Add(new CountryInfo() { Id = 2, Name = "Canada" });
		}
  
		public CustomerInfo NewCustomer { get; set; }
  
		public List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo> Countries { get; set; } = new List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>();
	}
}
]]>
			</FinalCode>

			<!--Optional element-->
			<CodeDependencies>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
												]]>
				</CodeDependency>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CustomerInfo
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
	}
}
												]]>
				</CodeDependency>
			</CodeDependencies>
			<!--Optional element-->
			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>
												]]>
				</AllowedType>
				<AllowedType>
					<![CDATA[
DotvvmAcademy.Tutorial.ViewModels.CountryInfo
												]]>
				</AllowedType>
				<AllowedType>
					<![CDATA[
DotvvmAcademy.Tutorial.ViewModels.CustomerInfo
										]]>
				</AllowedType>
			</AllowedTypesConstructed>
			<!--Optional element-->
			<AllowedMethodsCalled>
				<AllowedMethod>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>.Add
												]]>
				</AllowedMethod>
			</AllowedMethodsCalled>
		</Step>

		<!--14-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using DataContext Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step14Validator</ValidationKey>
			<Description>
				<![CDATA[
Now the bindings in the page are not correct, because the viewmodel doesn't contain the `FirstName` and the other properties.
They changed to `NewCustomer.FirstName`. 

In real apps, you want to avoid the complex bindings like `NewCustomer.FirstName`. Instead, you can use the `DataContext` property. 
You can set the property on any HTML element or DotVVM control. 

This property tells DotVVM that all bindings inside this element or control are evaluated on the expression you pass to the `DataContext`.

So, wrap the whole form in `<div DataContext="{value: NewCustomer}">`. You can keep the databindings inside as they are.
								]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
	<dot:ComboBox DataSource="{value: Countries}"
			SelectedValue="{value: SelectedCountryId}"
			ValueMember="Id"
			DisplayMember="Name">
	</dot:ComboBox>
</p>

								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<div DataContext="{value: NewCustomer}">
	<p>
		<dot:TextBox Text="{value: FirstName}"/>
		<dot:TextBox Text="{value: LastName}"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
		<dot:ComboBox DataSource="{value: Countries}"
				SelectedValue="{value: SelectedCountryId}"
				ValueMember="Id"
				DisplayMember="Name">
		</dot:ComboBox>
	</p>
</div>
								]]>
			</FinalCode>
		</Step>

		<!--15-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Fix the ComboBox Error</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step15Validator</ValidationKey>
			<Description>
				<![CDATA[
Now, we have an error in the code, because the `ComboBox` has the `DataSource` set to `Countries` which doesn't exists in the `NewCustomer` object
because a list of all countries is not a part of the customer information.

This collection is in the page viewmodel, so basically we need to access the parent binding context.

Change the binding of the `DataSource` control to `_parent.Countries` to fix the issue.
								]]>
			</Description>
			<!--Optional element-->
			<ShadowBoxDescription>
				<![CDATA[
In every binding expression, you can use `_parent`, `_this` and `_root` variables. 

* `_parent` represents the parent binding context
* `_this` is actual context
* `_root` is always the viewmodel of the whole page.
								]]>
			</ShadowBoxDescription>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<div DataContext="{value: NewCustomer}">
	<p>
		<dot:TextBox Text="{value: FirstName}"/>
		<dot:TextBox Text="{value: LastName}"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
				
		<!--Change the DataSource binding to use the parent binding context-->
		<dot:ComboBox DataSource="{value: Countries}"
				SelectedValue="{value: SelectedCountryId}"
				ValueMember="Id"
				DisplayMember="Name">
		</dot:ComboBox>
	</p>
</div>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<div DataContext="{value: NewCustomer}">
	<p>
		<dot:TextBox Text="{value: FirstName}"/>
		<dot:TextBox Text="{value: LastName}"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
    
		<dot:ComboBox DataSource="{value: _parent.Countries}"
				SelectedValue="{value: SelectedCountryId}"
				ValueMember="Id"
				DisplayMember="Name">
		</dot:ComboBox>
	</p>
</div>
								]]>
			</FinalCode>
			<!--16-->
		</Step>

		<Step Type="Info">
			<Title>Congratulations</Title>
			<Description>
				<![CDATA[
**You have finished the third lesson!**

You have learned how to use the `ComboBox` control and work with binding contexts!
								]]>
			</Description>
			<ShadowBoxDescription />
		</Step>

	</Steps>


</Lesson><commit_msg>Improved sample in lesson 3, step 14.<commit_after><?xml version="1.0" encoding="UTF-8"?>

<Lesson>
	<ValidatorsNamespace>DotvvmAcademy.Steps.Validation.Validators.Lesson3</ValidatorsNamespace>
	<Steps>

		<!--1-->
		<Step Type="Info">
			<!--Required element-->
			<Title>Form Controls</Title>
			<!--Required element-->
			<Description>
				<![CDATA[
In this lesson, you'll learn how to use the `TextBox`, `CheckBox`, `RadioButton` and `ComboBox` controls. We will build a simple form with customer details.
								]]>
			</Description>
		</Step>

		<!--2-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding FirstName and LastName Properties</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step2Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare the `FirstName` and `LastName` properties of type `string` in the following class.
]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		// declare properties here
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
	}
}
]]>
			</FinalCode>
		</Step>

		<!--3-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using TextBoxes</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step3Validator</ValidationKey>
			<Description>
				<![CDATA[
Add 2 `TextBox` controls in the page and bind their `Text` to the `FirstName` and `LastName` properties.
								]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<!-- place first textbox here -->
	<!-- place second textbox here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
								]]>
			</FinalCode>
		</Step>

		<!--4-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding Role Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step4Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare a `string` property called `Role` in the viewmodel.
]]>
			</Description>

			<StartupCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		// add Role property
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
	}
}
]]>
			</FinalCode>
		</Step>

		<!--5-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using RadioButtons</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step5Validator</ValidationKey>
			<Description>
				<![CDATA[
Add 2 `RadioButton` controls in the page. 

The `Text` property specifies the label text for the radio button. Set the `Text` of the first one to "Admin" and the `Text` of the second one to "User".

The `CheckedItem` specifies which viewmodel property will be used. Set this to `Role` on both radio buttons.

And finally, the `CheckedValue` specifies the value that will be stored in the `Role` property. Set the first one to "A" and the second one to "U". 
								]]>
			</Description>

			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
	Role: 
	<!-- place first RadioButton here -->
	<!-- place second RadioButton here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
	Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
								]]>
			</FinalCode>

		</Step>

		<!--6-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding Interests Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step6Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare a property named `Interests` of type `List<string>`.
]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		// add Interests property and initialize
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[

using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public List<string> Interests { get; set; } = new List<string>();
	}
}
]]>
			</FinalCode>
			<!--Optional element-->
			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<string>
												]]>
				</AllowedType>
			</AllowedTypesConstructed>

		</Step>

		<!--7-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using CheckBoxes</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step7Validator</ValidationKey>
			<Description>
				<![CDATA[
Add 3 `CheckBox` controls to the page. 
Bind their `CheckedItems` property to `Interests` to specify where the checked items will be stored.

Then, set the `Text` to "Music", "Sports" and "News".

And finally, set `CheckedValue` to "M", "S" a "N". These values will be stored in the `Interests` collection when the corresponding checkbox is checked.

								]]>
			</Description>

			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
	Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<!-- place first CheckBox here -->
	<!-- place second CheckBox here -->
	<!-- place third CheckBox here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
 Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Music" CheckedValue="M"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Sports" CheckedValue="S"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="News" CheckedValue="N"/>
</p>
								]]>
			</FinalCode>
		</Step>

		<!--8-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Add CountryInfo Class</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step8Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Create a new class called `CountryInfo` with `Id` property of type `int` and `Name` property of type `string`.
]]>
			</Description>
			<!--Optional element-->

			<StartupCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	// create the CountryInfo here
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
]]>
			</FinalCode>
		</Step>

		<!--9-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Add the Countries Collection</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step9Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare the `Countries` property of type `List<CountryInfo>` and `SelectedCountryId` property of type `int`.
]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		// declare Countries collection
		// declare SelectedCountryId 
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
		public List<CountryInfo> Countries { get; set; } = new List<CountryInfo>();
	}
}
]]>
			</FinalCode>

			<!--Optional element-->
			<CodeDependencies>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
												]]>
				</CodeDependency>
			</CodeDependencies>


			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>
												]]>
				</AllowedType>
			</AllowedTypesConstructed>
		</Step>

		<!--10-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Initialize Countries Collection</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step10Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Create a default constructor and initialize the `Countries` collection with the following states:

* "USA" with `Id` = 1
* "Canada" with `Id` = 2
]]>
			</Description>
			<!--Optional element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel() 
		{
			// initialize the countries
		}
  
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
		public List<CountryInfo> Countries { get; set; } = new List<CountryInfo>();
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel()
		{
			Countries.Add(new CountryInfo() { Id = 1, Name = "USA" });
			Countries.Add(new CountryInfo() { Id = 2, Name = "Canada" });
		}
  
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
		public List<CountryInfo> Countries { get; set; } = new List<CountryInfo>();
	}
}
]]>
			</FinalCode>

			<!--Optional element-->
			<CodeDependencies>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
												]]>
				</CodeDependency>
			</CodeDependencies>
			<!--Optional element-->
			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>
												]]>
				</AllowedType>
				<AllowedType>
					<![CDATA[
DotvvmAcademy.Tutorial.ViewModels.CountryInfo
												]]>
				</AllowedType>
			</AllowedTypesConstructed>
			<!--Optional element-->
			<AllowedMethodsCalled>
				<AllowedMethod>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>.Add
												]]>
				</AllowedMethod>
			</AllowedMethodsCalled>
		</Step>

		<!--11-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using ComboBox</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step11Validator</ValidationKey>
			<Description>
				<![CDATA[
Add the `ComboBox` control to the page and bind its `DataSource` to the `Countries` collection. It will fill the combo box with the countries we have initialized in the constructor.

Now we need to tell the combo box that the `Name` property from the `CountryInfo` class should be displayed. Set the `DisplayMember` to "Name". 

When the user selects some item, we want to use the `Id` from the selected `CountryInfo` object as selected value. So set the `ValueMember` to "Id".

And finally, we have to specify where the selected value will be stored. Bind the `SelectedValue` to the `SelectedCountryId` property in the viewmodel.
								]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
 Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Music" CheckedValue="M"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Sports" CheckedValue="S"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="News" CheckedValue="N"/>
</p>
<p>
 <!-- create ComboBox here -->
</p>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
</p>
<p>
 Role: 
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
</p>
<p>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Music" CheckedValue="M"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="Sports" CheckedValue="S"/>
	<dot:CheckBox CheckedItems="{value: Interests}" Text="News" CheckedValue="N"/>
</p>
<p>
	<dot:ComboBox DataSource="{value: Countries}"
        SelectedValue="{value: SelectedCountryId}"
        ValueMember="Id"
        DisplayMember="Name" />
</p>
								]]>
			</FinalCode>
		</Step>

		<!--12-->
		<Step Type="Info">
			<!--Required element-->
			<Title>The CustomerInfo Class</Title>
			<!--Required element-->
			<Description>
				<![CDATA[
In the previous steps, we have placed all properties - `FirstName`, `LastName`, `Role` and `SelectedCountryId` in the same class with the `Countries` collection.

That's not the best practise, because we are mixing the information about specific customer with some other data, which is e.g. the list of countries.
It is a good idea to separate properties that represent state of some entity (customer, in this case), into a separate class. This class often contains only properties and no methods. 
It is called DTO - Data Transfer Object.

So, we have moved the properties in the `CustomerInfo` class:

```CSHARP
public class CustomerInfo
{
	public string FirstName { get; set; }
	public string LastName { get; set; }
	public string Role { get; set; }
	public int SelectedCountryId { get; set; }
}
```

The `Countries` collection stays in the viewmodel.
								]]>
			</Description>
		</Step>

		<!--13-->
		<Step Type="CsharpCode">
			<!--Required element-->
			<Title>Adding CustomerInfo Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step13Validator</ValidationKey>
			<!--Required element-->
			<Description>
				<![CDATA[
Declare a new property called `NewCustomer` of type `CustomerInfo`.
]]>
			</Description>

			<!--Required element-->
			<StartupCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel()
		{
			Countries.Add(new CountryInfo() { Id = 1, Name = "USA" });
			Countries.Add(new CountryInfo() { Id = 2, Name = "Canada" });
		}
		
		// add the NewCustomer property
  
		public List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo> Countries { get; set; } = new List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>();
	}
}
]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
using System.Collections.Generic;

namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class Lesson3ViewModel 
	{
		public Lesson3ViewModel ()
		{
			Countries.Add(new CountryInfo() { Id = 1, Name = "USA" });
			Countries.Add(new CountryInfo() { Id = 2, Name = "Canada" });
		}
  
		public CustomerInfo NewCustomer { get; set; }
  
		public List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo> Countries { get; set; } = new List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>();
	}
}
]]>
			</FinalCode>

			<!--Optional element-->
			<CodeDependencies>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CountryInfo 
	{
		public int Id { get; set; }
		public string Name { get; set; }
	}
}
												]]>
				</CodeDependency>
				<CodeDependency>
					<![CDATA[
namespace DotvvmAcademy.Tutorial.ViewModels 
{
	public class CustomerInfo
	{
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string Role { get; set; }
		public int SelectedCountryId { get; set; }
	}
}
												]]>
				</CodeDependency>
			</CodeDependencies>
			<!--Optional element-->
			<AllowedTypesConstructed>
				<AllowedType>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>
												]]>
				</AllowedType>
				<AllowedType>
					<![CDATA[
DotvvmAcademy.Tutorial.ViewModels.CountryInfo
												]]>
				</AllowedType>
				<AllowedType>
					<![CDATA[
DotvvmAcademy.Tutorial.ViewModels.CustomerInfo
										]]>
				</AllowedType>
			</AllowedTypesConstructed>
			<!--Optional element-->
			<AllowedMethodsCalled>
				<AllowedMethod>
					<![CDATA[
System.Collections.Generic.List<DotvvmAcademy.Tutorial.ViewModels.CountryInfo>.Add
												]]>
				</AllowedMethod>
			</AllowedMethodsCalled>
		</Step>

		<!--14-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Using DataContext Property</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step14Validator</ValidationKey>
			<Description>
				<![CDATA[
Now the bindings in the page are not correct, because the viewmodel doesn't contain the `FirstName` and the other properties.
They changed to `NewCustomer.FirstName`. 

In real apps, you want to avoid complex bindings like `NewCustomer.FirstName`. Instead, you can use the `DataContext` property. 
You can set the property on any HTML element or DotVVM control. 

This property tells DotVVM that all bindings inside this element or control are evaluated on the expression you pass to the `DataContext`.

So, set the DataContext on the `p` start tag like this: `<p DataContext="{value: NewCustomer}">`. You can keep the databindings inside as they are.
								]]>
			</Description>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<p>
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
	<dot:ComboBox DataSource="{value: Countries}"
			SelectedValue="{value: SelectedCountryId}"
			ValueMember="Id"
			DisplayMember="Name">
	</dot:ComboBox>
</p>

								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<p DataContext="{value: NewCustomer}">
	<dot:TextBox Text="{value: FirstName}"/>
	<dot:TextBox Text="{value: LastName}"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
	<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
	<dot:ComboBox DataSource="{value: Countries}"
			SelectedValue="{value: SelectedCountryId}"
			ValueMember="Id"
			DisplayMember="Name">
	</dot:ComboBox>
</p>
								]]>
			</FinalCode>
		</Step>

		<!--15-->
		<Step Type="DothtmlCode">
			<!--Required element-->
			<Title>Fix the ComboBox Error</Title>
			<!--Required element-->
			<ValidationKey>Lesson3Step15Validator</ValidationKey>
			<Description>
				<![CDATA[
Now, we have an error in the code, because the `ComboBox` has the `DataSource` set to `Countries` which doesn't exists in the `NewCustomer` object
because a list of all countries is not a part of the customer information.

This collection is in the page viewmodel, so basically we need to access the parent binding context.

Change the binding of the `DataSource` control to `_parent.Countries` to fix the issue.
								]]>
			</Description>
			<!--Optional element-->
			<ShadowBoxDescription>
				<![CDATA[
In every binding expression, you can use `_parent`, `_this` and `_root` variables. 

* `_parent` represents the parent binding context
* `_this` is actual context
* `_root` is always the viewmodel of the whole page.
								]]>
			</ShadowBoxDescription>
			<!--Required element-->
			<StartupCode>
				<![CDATA[
<div DataContext="{value: NewCustomer}">
	<p>
		<dot:TextBox Text="{value: FirstName}"/>
		<dot:TextBox Text="{value: LastName}"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
				
		<!--Change the DataSource binding to use the parent binding context-->
		<dot:ComboBox DataSource="{value: Countries}"
				SelectedValue="{value: SelectedCountryId}"
				ValueMember="Id"
				DisplayMember="Name">
		</dot:ComboBox>
	</p>
</div>
								]]>
			</StartupCode>
			<!--Required element-->
			<FinalCode>
				<![CDATA[
<div DataContext="{value: NewCustomer}">
	<p>
		<dot:TextBox Text="{value: FirstName}"/>
		<dot:TextBox Text="{value: LastName}"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="A" Text="Admin"/>
		<dot:RadioButton CheckedItem="{value: Role}" CheckedValue="U" Text="User"/>
    
		<dot:ComboBox DataSource="{value: _parent.Countries}"
				SelectedValue="{value: SelectedCountryId}"
				ValueMember="Id"
				DisplayMember="Name">
		</dot:ComboBox>
	</p>
</div>
								]]>
			</FinalCode>
			<!--16-->
		</Step>

		<Step Type="Info">
			<Title>Congratulations</Title>
			<Description>
				<![CDATA[
**You have finished the third lesson!**

You have learned how to use the `ComboBox` control and work with binding contexts!
								]]>
			</Description>
			<ShadowBoxDescription />
		</Step>

	</Steps>


</Lesson>
{'fraction_non_alphanumeric': 0.1541885162825541, 'fraction_numerical': 0.003811748116159168, 'mean_word_length': 3.614844941535333, 'pattern_counts': {'":': 0, '<': 1025, '<?xml version=': 2, '>': 1025, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6194132', 'n_tokens_mistral': 17118, 'n_tokens_neox': 14066, 'n_words': 3902}