Visual Studio Data : Entity Framework

Accessing Master-Detail Data through ADO.NET Data Service in a Silverlight Application (Part 2)

XiangZeng — Sat, 07 Nov 2009 10:42:00 GMT

In Part 1 of this post, we developed our Silverlight application to access data through an ADO.NET Data Service. So far we are able to load the data at run time and navigate through the data records back and forth. Let’s now develop more functionality to update data, delete records, and add new records.

Updating Data Records

Our data is accessed through the Service Reference we added to our Silverlight application. However, the Service Reference does not keep track of the changes that we make in the application. This is actually due to a limitation of ADO.NET Data Service Client Library. We have to have a mechanism to notify the DataContext object about changes. In Part 1, we added the data we retrieved through the service into an ObservableCollection<T> so that we can get notifications when data get added, updated or removed. We can then notify the DataContext by implementing System.ComponentModel.INotifyPropertyChanged on the DataContract classes.

For example, in order to notify NorthwindEntities (the DataContext object) about changes of the CompanyName property of Customer (the DataContract object), we can do the following:

public partial class Customer : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

partial void OnCompanyNameChanged()

{

if (PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs("CompanyName"));

}

The OnCompanyNameChanged() partial method is defined (yet not implemented) in the generated Reference.cs file of the Service Reference. You can find this file in Solution Explorer under “Service References” – “NorthwindServiceReference” – “Reference.datasvcmap” – “Reference.cs”.

For this application, we are creating a class file “NorthwindEntitiesChangeManager.cs” in the Silverlight application. For every updatable property of Customer, Order, and Order_Details, we implement the On<PROPERTY>Changed partial method in the same manner as above.

We’ll also need to notify the DataContext object about DataContract object changes. Therefore, we are modifying the OnDataLoadComplete method to hook up the change events:

private void OnDataLoadComplete(IAsyncResult result)

{

List<Customer> custs = qry.EndExecute(result).ToList();

foreach (Customer cust in custs)

{

cust.PropertyChanged += new PropertyChangedEventHandler(cust_PropertyChanged);

foreach (Order ord in cust.Orders)

{

ord.PropertyChanged += new PropertyChangedEventHandler(ord_PropertyChanged);

foreach (Order_Details od in ord.Order_Details)

{

od.PropertyChanged += new PropertyChangedEventHandler(od_PropertyChanged);

}

data.Add(cust);

}

cvs.Source = data;

}

Handling the PropertyChanged events is to call UpdateObject() method on the DataContext object:

void cust_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

this.ctx.UpdateObject(sender as Customer);

}

void ord_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

this.ctx.UpdateObject(sender as Order);

}

void od_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

this.ctx.UpdateObject(sender as Order_Details);

}

Deleting Data Records

To delete records, we need to call the DeleteObject() method on the DataContext object.

The following code deletes the current Customer, and all the related Orders and Order_Details, similar to a CASCADE deletion on the database backend:

void DeleteItem_Click(object sender, RoutedEventArgs e)

{

string msg = "Are you sure you want to delete the current customer and all the related order information?";

if (HtmlPage.Window.Confirm(msg))

{

Customer cust = cvs.View.CurrentItem as Customer;

foreach (Order ord in cust.Orders)

{

foreach (Order_Details od in ord.Order_Details)

{

this.ctx.DeleteObject(od);

}

this.ctx.DeleteObject(ord);

}

this.ctx.DeleteObject(cust);

this.data.Remove(cust);

this.bindingNavigator1.RecordCount--;

this.bindingNavigator1.RefreshControls();

}

Similarly, we can delete the current selected Order and its Order_Details using the following code:

private void btnDeleteOrder_Click(object sender, RoutedEventArgs e)

{

string msg = "Are you sure you want to delete the current order and all the order details?";

if (HtmlPage.Window.Confirm(msg))

{

Order ord = this.ordersDataGrid.SelectedItem as Order;

int curOrderID = ord.OrderID;

foreach (Customer cust in this.data)

{

if (cust.CustomerID == ord.CustomerID)

{

foreach (Order o in cust.Orders)

{

if (o.OrderID == curOrderID)

{

List<Order_Details> order_DetailsToRemove = new List<Order_Details>();

foreach (Order_Details od in o.Order_Details)

{

ctx.DeleteObject(od);

order_DetailsToRemove.Add(od);

}

foreach (Order_Details odToRemove in order_DetailsToRemove)

{

o.Order_Details.Remove(odToRemove);

}

ctx.DeleteObject(o);

cust.Orders.Remove(o);

break;

}

break;

}

And here’s the code to delete the currently selected Order_Details:

private void btnDeleteOrder_Detail_Click(object sender, RoutedEventArgs e)

{

string msg = "Are you sure you want to delete the current order detail?";

if (HtmlPage.Window.Confirm(msg))

{

Order_Details curOrder_Detail = this.order_DetailsDataGrid.SelectedItem as Order_Details;

ctx.DeleteObject(curOrder_Detail);

Order curOrder = this.ordersDataGrid.SelectedItem as Order;

int curOrderID = curOrder.OrderID;

foreach (Customer cust in this.data)

{

if (cust.CustomerID == curOrder.CustomerID)

{

foreach (Order o in cust.Orders)

{

if (o.OrderID == curOrderID)

{

o.Order_Details.Remove(curOrder_Detail);

break;

}

break;

}

Adding New Data Records

To add new records, we can call the Create<OBJECT> method on the DataContract object, and then call the AddTo<OBJECTS> method of the DataContext object. For example, to add a new Customer, we can use the following:

Customer cust = Customer.CreateCustomer("ABCDE", "ABCDE Corp");

this.ctx.AddToCustomers(cust);

By drag-dropping data sources from the Data Sources window, we can easily create new data entry UI as Silverlight controls. This is the new data entry UI I created by stripping data binding XAML from the generated UI:

The Orders table in the database has OrderID as an IDENTITY field (auto-increment), so we can create a new Order object by setting -1 as OrderID:

Order ord = Order.CreateOrder(-1);

Customer cust = this.cvs.View.CurrentItem as Customer;

ord.CustomerID = cust.CustomerID;

// Set other properties …

cust.Orders.Add(ord);

this.ctx.AddToOrders(ord);

Here’s the code to create a new Order_Details:

Order ord = this.ordersDataGrid.SelectedItem as Order;

int productID = Int32.Parse(this.order_DetailsDataEntry.productIDTextBox.Text); //32

decimal unitPrice = Decimal.Parse(this.order_DetailsDataEntry.unitPriceTextBox.Text);

short quantity = short.Parse(this.order_DetailsDataEntry.quantityTextBox.Text); //5

float discount = float.Parse(this.order_DetailsDataEntry.discountTextBox.Text); //0.25f

Order_Details od = Order_Details.CreateOrder_Details(ord.OrderID, productID, unitPrice, quantity, discount);

ord.Order_Details.Add(od);

this.ctx.AddToOrder_Details(od);

Saving Changes

To save changes, we can simply call the SaveChanges() method on the DataContext object. The code is similar to the following (note you may want add code to handle data update exceptions not done here):

void SaveItem_Click(object sender, RoutedEventArgs e)

{

ctx.BeginSaveChanges(System.Data.Services.Client.SaveChangesOptions.Batch, new AsyncCallback(OnSaveChangesComplete), null);

}

void OnSaveChangesComplete(IAsyncResult result)

{

ctx.EndSaveChanges(result);

}

Summary

Up to this point, we have developed a Silverlight application capable of loading data through an ADO.NET Data Service, navigating through the data records, performing updating/deleting/inserting operations, and finally committing changes to the database backend. Data validation and error handling during save is not handled here but users can easily hook up their own business logic.

Hope you will enjoy developing data applications with Silverlight.

Accessing Master-Detail Data through ADO.NET Data Service in a Silverlight Application (Part 1)

XiangZeng — Thu, 22 Oct 2009 18:26:00 GMT

With Visual Studio 2010 Beta2, users can add data sources to a Silverlight application using the Data Source Configuration Wizard. The added data source is shown in the Data Sources tool window, and can be drag-dropped to Silverlight designer, with data-bound controls automatically generated.

In this post, I’ll walk you through the steps of creating an ADO.NET Data Service to access data using Entity Data Model, and creating a Silverlight application to consume the data service. We’ll build a classic Northwind order management application where users can do CRUD operations on customer and order information through the service. The completed application will look like this:

Note: Although the following walkthrough uses Visual C# as the programming language, you can complete it in VB as well to achieve the same functionalities.

Creating an ADO.NET Data Service

To create an ADO.NET Data Service, we will need to first create a new ASP.NET Web Application to host the service. Here are the steps to create the project, define an ADO.NET Entity Data Model, and add ADO.NET Data Service:

1. Select Visual Studio File->New Project menu, and choose ASP.NET Web Application.

2. From Solution Explorer, right click the Web Application project node, and choose Add New Item. In the Add New Item dialog, choose ADO.NET Entity Data Model under the Data category. This will invoke the Entity Data Model Wizard.

3. Follow the Entity Data Model Wizard to connect to a Northwind SQL Server database, and choose tables: Customers, Orders, and Order_Details.

4. From Solution Explorer, right click the Web Application project node, and choose Add New Item. In the Add New Item dialog, choose ADO.NET Data Service under the Web category.

5. The WebDataService1.svc.cs (or WebDataService1.svc.vb) file will be opened in VS code editor. We’ll need to modify the code as follows to expose the data model and set appropriate access rules. Note we have changed the default EntitySetRights from AllRead to All so that we are able to update the entities later.

public class NorthwindWebDataService : DataService< NorthwindEntities >

{

public static void InitializeService(DataServiceConfiguration config)

{

config.SetEntitySetAccessRule("*", EntitySetRights.All);

config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

}

6. Build the project.

At this point, our Data Service is ready to be consumed by client applications.

Creating a Silverlight Application to Consume the ADO.NET Data Service

Now let’s create a Silverlight Application to consume the data service. The following steps create a Silverlight application, and add a new data source to consume the above ADO.NET Data Service:

1. From Visual Studio File->Add New Project menu, choose Silverlight Application.

2. On the New Silverlight Application dialog, accept the default to host the Silverlight Application in the above ASP.NET Web Application.

3. From Visual Studio Data menu, choose Add New Data Source.

4. On the Data Source Configuration Wizard, choose Service as the data source type, and click Next.

5. This will bring up the Add Service Reference dialog. Since our data service is in the same solution, we can click the Discover button to find the above ADO.NET Data Service, or type in the service address (like http://localhost:<PORT NUMBER>/WebDataService1.svc), and click OK.

6. Finish the Data Source Configuration Wizard. A new Service Reference will be added in Solution Explorer, with a code file containing data classes used to access and interact with data service resources as objects.

Drag-dropping Data Sources onto Silverlight Designer

In the above steps, we have added a Service data source to the Silverlight application. If you open the Data Sources tool window, the data objects accessible through the ADO.NET Data Service should be shown and available for drag-dropping to the Silverlight designer. However, due to a bug not yet fixed, you may need to close VS and then reopen it (this bug applies only to data services created within the same solution. If you have an existing data service, the Data Sources window will show the data objects immediately).

1. From Visual Studio Data menu, choose Show Data Sources. The Data Sources tool window will show up with data objects from the ADO.NET Data Service: Customers, Orders, and Order_Details.

2. In the Northwind Order Manager application, we want to show the customer information as details rather than the default DataGrid. To do this, in the Data Sources window, drop-down the Customers ComboBox, and choose Details.

3. Now drag Customers node to MainPage.xaml designer. The customer information is generated on the designer as data-bound controls. The XAML code also contains data binding information similar to the following:
<CollectionViewSource x:Key="customersViewSource" d:DesignSource="{d:DesignInstance my:Customer, CreateList=True}" />

4. To show the related Orders and Order_Details information, drag Customers.Orders (IMPORTANT: this is the child node Orders, under Customers node) and Customers.Orders.Order_Details from Data Sources Window to MainPage.xaml designer. The generated CollectionViewSource nodes in the XAML file will be similar to the following:
<CollectionViewSource x:Key="customersOrdersViewSource" Source="{Binding Path=Orders, Source={StaticResource customersViewSource}}" />

Writing Code to Load Data at Run Time

We’ll need to write some code to load the data at run time. Let’s declare some private members in the MainPage class in MainPage.xaml.cs:

private NorthwindEntities ctx; // The data context

private CollectionViewSource cvs; // The CollectionViewSource to bind data

private DataServiceQuery<Customer> qry; // The query to load data

private System.Collections.ObjectModel.ObservableCollection<Customer> data = new System.Collections.ObjectModel.ObservableCollection<Customer>();

In the MainPage.xaml.cs LayoutRoot_Loaded event handler, add the following code to instantiate the data service, define a DataServiceQuery and execute it to retrieve data. The retrieval of data is done through an asynchronous call.

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

{

ctx = new NorthwindEntities(new Uri("http://localhost:<PORT NUMBER>/NorthwindWebDataService.svc"));

cvs = this.Resources["customersViewSource"] as CollectionViewSource;

qry = ctx.Customers.Expand("Orders").Expand("Orders/Order_Details");

qry.BeginExecute(new AsyncCallback(OnDataLoadComplete), null);

}

private void OnDataLoadComplete(IAsyncResult result)

{

List<Customer> custs = qry.EndExecute(result).ToList();

foreach (Customer cust in custs)

{

data.Add(cust);

}

cvs.Source = data;
}

Note we are using an ObservableCollection<T> to be the Source of the CollectionViewSource, rather than just a List<T> or DataServiceQuery<T> . This is so that we can get notifications when data get added, updated or removed since we are going to update and save data later. If you do not need to update data, you may just need to set the CollectionViewSource.Source to the DataServiceQuery like :

cvs.Source = ctx.Customers.Expand("Orders").Expand("Orders/Order_Details");

Navigating through Data

To add the functionality of navigating through data at run time, we can create a Silverlight User Control similar to the following:

The XAML for one of the buttons is similar to this:

<Image.OpacityMask>

<ImageBrush.ImageSource>

</ImageBrush.ImageSource>

</ImageBrush>

</Image.OpacityMask>

</Image>

</Button>

To move to the beginning of the data collection, we can handle the MoveFirstItem button Click event with the following code:

private void moveFirstItem_Click(object sender, RoutedEventArgs e)

{

cvs.View.MoveCurrentToFirst();

RefreshControls();

}

The RefreshControls() method handles the logic to update the current position display and enable or disable buttons based on the current record position:

private void RefreshControls()

{

int pos = cvs.View.CurrentPosition;

this.positionItem.Text = (pos + 1).ToString(System.Globalization.CultureInfo.CurrentCulture);

this.countItem.Text = String.Format(this.countItemTemplate, this.recordCount);

this.moveFirstItem.IsEnabled = (pos > 0);

this.movePreviousItem.IsEnabled = (pos > 0);

this.moveNextItem.IsEnabled = (pos < this.RecordCount - 1);

this.moveLastItem.IsEnabled = (pos < this.RecordCount - 1);

this.deleteItem.IsEnabled = (this.RecordCount > 0);

}

Similarly, we can use the following code to navigate through the records by moving back and forth:

private void movePreviousItem_Click(object sender, RoutedEventArgs e)

{

cvs.View.MoveCurrentToPrevious();

RefreshControls();

}

private void moveNextItem_Click(object sender, RoutedEventArgs e)
{
cvs.View.MoveCurrentToNext();
RefreshControls();
}

private void moveLastItem_Click(object sender, RoutedEventArgs e)
{
cvs.View.MoveCurrentToLast();
RefreshControls();
}

We also provide the functionality to navigate to a specific position using the TextBox to accept user input, and navigate when the user presses the ENTER key with a valid position entered. If the number entered is not valid, it will just be ignored and the record stays at the current position. If the number is smaller than 1, we navigate to the first record instead. If the number entered is greater than the record count, we navigate to the last record.

private void positionItem_KeyDown(object sender, KeyEventArgs e)

{

if (e.Key == Key.Enter)

{

TextBox txt = sender as TextBox;

int curPos = this.cvs.View.CurrentPosition + 1;

int pos;

bool isValid = int.TryParse(txt.Text, out pos);

if (!isValid)

{

txt.Text = curPos.ToString();

}

else

{

if (pos <= 1)

{

pos = 1;

}

else if (pos > this.recordCount)

{

pos = this.recordCount;

}

if (curPos != pos)

{

this.cvs.View.MoveCurrentToPosition(pos - 1);

}

txt.Text = pos.ToString();

RefreshControls();

}

Next Steps

The next part of this post will add functionalities to update and save Customers, Orders and Order_Details. We will also develop the application to be able to delete data and add new records.

Entity Data Model: working with foreign key when you don’t have it

Yang Cao — Thu, 15 Oct 2009 23:05:00 GMT

It’s been debatable whether to include FK (foreign key) columns in the conceptual model. That’s why in Visual Studio 2010, a checkbox is added to Entity Data Model Wizard, so that the decision is left to the developers. While I was playing with it yesterday, I found FK particularly useful in the following scenario.

The application I was trying to build is really simple: change an order’s related customer from A to B.

If FK (CustomerID) is in my Order entity, I could just do a lookup binding to this FK column, and call dataContext.SaveChanges().The drag-n-drop way of doing lookup binding to a ComboBox is to first drag the FK property (in this example, CustomerID in Order entity) with a ComboBox control, and drop it onto the form. Then drag the related lookup table (Customer entity) and drop it onto the previously created ComboBox control. The SelectedValue, SelectedValuePath, ItemsSource, and DisplayMemeberPath properties will be set for you.

Things become a little bit tricky if I don’t have the FK in the entity.

Data bind Orders to a DataGrid

This step is fairly easy. Just drag Orders node onto the WPF Designer.

Create lookup binding to a ComboBox

Because I don’t have the FK column in the model, there’s no CustomerID property in Order entity. To create the lookup binding, I need to expand the navigation property Customer in Orders, and bind the CustomerID to a combobox.

After I drag-n-drop this node onto WPF Designer, I will have created a complex binding. To make it a lookup binding, I will link the newly created combobox to the lookup table. The way to do it is to drag the Customers node (marked with 2 on the picture above), and drop it onto the combobox. Please notice that while doing this, your cursor will change from a little + to an arrow, to indicate that we will not generate a new control. Instead, an existing control will be updated with the dragged data source.

Create button to save changes
Then I will add a button to “Update Customer”. In the click event handler, I need to find current selected order, get the new CustomerID that replace the old FK value, and save the changes:

Order currentOrder = (Order)ordersViewSource.View.CurrentItem;

string customerID = customerIDComboBox.SelectedValue.ToString();

currentOrder.CustomerReference.EntityKey.EntityKeyValues[0].Value = customerID;

northwindEntities.SaveChanges();

I made the data context (northwindEntities) and colletion view source (ordersViewSource) to be the property in MainWindow class, to make the code simple. I need to drill down into the order, find the CustomerReference, and set the EntityKeyValue.

F5
Debug the application now. Everything looks good at first, but when I change the customer from one to another in the drop-down combobox, Bang! I get an InvalidOperationException: The property 'CustomerID' is part of the object's key information and cannot be modified. Although I successfully created the lookup binding, I cannot modify the value because the SelectedValue is not the FK in Order, but the PK in Customer!

This tells me that the combobox should be bound OneWay. I locate the combobox in XAML, and updated the SelectedValue binding mode:

SelectedValue="{Binding Path=Customer.CustomerID,Mode=OneWay}"

F5 again
Now change selection in the combobox will not trigger the exception anymore. I click on the “Update Customer” button to continue testing, bang (again)! This time, it says EntityKey values cannot be changed once they are set. I don’t believe there’s no way to do it, so I searched around the web and found that although the value cannot be reset, the entity key can be. Now let’s assign the FK value in this way:

currentOrder.CustomerReference.EntityKey = new System.Data.EntityKey(

currentOrder.CustomerReference.EntityKey.EntityContainerName+"."+currentOrder.CustomerReference.EntityKey.EntitySetName,

"CustomerID", customerID);

You could also use KeyValuePair if you have a complex key composed of more than one property. For more information, please see here.

After all the steps above, my application finally works as I expected. You might ask, why don’t you just include the key to save all these coding and bang (runtime exception)? Some developers, as I said, vote for not including FK in the conceptual model because FK is a relational database concept and it will pollute the object world. Another reason is, the feature of include FK is only available in Visual Studio 2010, targeting .NET framework 4.0, for newly added tables. If you have an existing entity data model, you would still need to get yourself used to the life without FK.

Please let me know if you have any other idea or question about this!

Cheers!

[Update 10/20]: Alex has a post talking about this too. He suggested a way of wrapping the entity key so that a FK property is added into the partial class. Please check it out here: http://msdn.microsoft.com/en-us/vbasic/bb735936.aspx

Build Your Own Navigation Bar in WPF with Insert / Save / Delete Action

XiaoyingGuo — Sat, 08 Aug 2009 19:05:00 GMT

Some time ago, we built a navigation bar for our WPF application to navigate data. We can make it even more powerful, and add CRUD support into it. Because we are using Entity Data Framework, it’s pretty easy to achieve this. Don’t believe it? Let’s first add the following buttons into our navigation bar we built late time:

</StackPanel>

It’s something like below:

Now let’s add the following event handler methods for each button:

1. Insert button. Insert button adds a new empty entry for users to fill in data.

What we do here is pretty simple. We leverage the method IEditableCollectionViewSource.AddNew() to create a new entry into the current CollectionView. More info can be found here. Because the EmployeeID is assigned in the table automatically when a new row is inserted, we don’t need users to fill in this item.

The code looks like below:

C#:

private void insertButton_Click(object sender, RoutedEventArgs e)

{

((BindingListCollectionView)(employeesViewSource__NorthwindEntities.View)).AddNew();

employeeIDTextBox.Text = "{Auto-assigned}";

}

VB:

    Private Sub insertButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        CType(EmployeesViewSource__NorthwindEntities.View, BindingListCollectionView).AddNew()

        employeeIDTextBox.Text = "{Auto-assigned}"
    End Sub

2. Save button. Save button saves the current data into database.

Let’s use ObjectContext.SaveChanges() to persist all updates to the database. SaveChanges method has an overload version SaveChanges(Boolean). If Boolean is set to false, then you have to call AccetpAllChanges() after calling SaveChanges(Boolean). For more information about this method, please check here.

Here we also need to consider about concurrency errors. For more information about how to handle this, please see here.

The code looks like below:

C#:

private void saveButton_Click(object sender, RoutedEventArgs e)

{

try

{

northwindEntities.SaveChanges();

// Update the number of rows in the table in case it's updated by data insertion.

UpdateNavigatorUI();

}

catch (DBConcurrencyException ex)

{

// Add business logic code to resolve the concurrency violation...

}

VB:

    Private Sub saveButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Try
            NorthwindEntities.SaveChanges()
           ' Update the number of rows in the table in case it's updated by data insertion.
            UpdateNavigatorUI()
        Catch ex As System.Data.DBConcurrencyException
            ' Add business logic code to resolve the concurrency violation...
        End Try
    End Sub

3. Delete button. Delete button tends to delete the current entry.

Here we instantiate an Employee object with the current item in the form and then use DeleteObject(TEntity) to do the deletion. However, the job isn’t submitted until users click Save button.

C#:

private void deleteButton_Click(object sender, RoutedEventArgs e)

{

Employee employee = employeesViewSource__NorthwindEntities.View.CurrentItem as Employee;

if (employee != null)

{

northwindEntities.DeleteObject(employee);

}

// Update the row count number and the current row number in the navigation bar.

UpdateNavigatorUI();

}

VB:

Private Sub deleteButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

Dim employee As Employee = CType(EmployeesViewSource__NorthwindEntities.View.CurrentItem, Employee)

If Not (employee Is Nothing) Then

NorthwindEntities.DeleteObject(employee)

End If

' Update the row count number and the current row number in the navigation bar

UpdateNavigatorUI()

End Sub

Done! Now we can hit F5 and play with it. Have fun!

WPF Data Binding: Lookup tables

MilindLele — Thu, 18 Jun 2009 06:15:00 GMT

A few weeks ago I wrote about creating a master-details form, where we looked at an example of a database used for tracking orders, as part of an order management system. We had used the Customers and Orders tables and built a master-details form that showed a list of customers and for each selected customer, their orders. Another common scenario for binding related tables on a form involves look up tables.

Beth Massi wrote about how to data bind WPF lookup comboboxes to entities using VS2008. She uses describes the XAML and the code behind one needs to write to accomplish this. In VS2010, it’s considerably easier. Here’s how:

We will use the same Customers and Orders tables and entities that Beth uses (and we’ve used in my previous master-details post). Once we create a WPF application and add an entity model to to it as described in earlier posts, we should be able to browse the entity model in the data sources window. In the data sources window:

Expand the Orders node and under it set the FK_Orders_Customer to a combobox
Select the Orders node and set the control to Details view
Drag and drop the Orders entity to the WPF form
Now drag and drop the LastName property under FK_Orders_Customer to the combobox on the form.

Just these four simple steps will get the look up binding setup. The application, when run, would look something like this:

The XAML for the combobox is something like this:

WPF Sample on CodeGallery

MilindLele — Thu, 11 Jun 2009 23:51:00 GMT

The MSDN CodeGallery now has VB and C# sample for WPF data binding

http://code.msdn.microsoft.com/WPFDatabinding

This is a sample of a WPF application and includes data binding, data validation, lookup binding. The solution is VS2010 Beta1 based, but the application uses .NET Framework 3.5.

See also: Beth Massi’s WPF Forms over data videos using VS2008

Visual Studio 2010 Data Resources to Chew On

Beth Massi — Fri, 22 May 2009 18:29:25 GMT

Sine we released Visual Studio 2010 Beta 1 to the public on Wednesday (as Yang mentioned here) I thought it would be helpful to highlight some of the resources we have published to help you get started building business apps in your shiny copy of VS2010 Beta 1. Teams are really thirsty for feedback, so visit the Beta 1 forums and tell them what you think.

First, if you haven’t already, you’re going to need to download the Beta. ;-)

How to Download and Install the Beta

Then check out these resources:

WPF Data Binding: Creating a Master-Details form in Visual Studio 2010

Accessing Data in Visual Studio

Visual Studio 2010 and .NET Framework 4.0 Training Kit

Visual Studio 2010 Samples

Also, we just posted a Channel 9 interview with Matt Gertz, the guy in charge or coordinating the Visual Studio build. He explains how the build and test processes work here in DevDiv and I have to say it’s very impressive. He also talks about some of his favorite Visual Studio 2010 features.

In the coming weeks, the team here will be posting more about Visual Studio tools so make sure to subscribe to the feed.

Enjoy,
-Beth Massi, Visual Studio Community

WPF Data Binding: Creating a Master-Details form in Visual Studio 2010

MilindLele — Wed, 20 May 2009 20:00:00 GMT

Visual Studio 2010 Beta is released. Late last year we had released a Community Technology Preview (CTP) of VS2010. At that time I had written about some improvements to the data binding improvements for WPF. The Beta has many more and we will discuss them on this blog in a series of posts.

In my blog post last November I wrote about the newly added support for drag-drop data binding for WPF and that, like DataSets, EDM is one of the data sources supported by the data sources window. This post is about building a master-details form in WPF against an Entity Data Model. We will talk about the user experience, but more importantly about what code/XAML gets generated – at least the aspects that are relevant to master-details data binding.

The experience is very similar to WinForms over DataSets. Let us take the example of two tables: Customers and their Orders and create a form that lists the names of customers and for each customer, their orders.

As described in my earlier post, we can add an EDM to our WPF project and have it contain the two corresponding entities.

Here’s what you would see in the data sources window:

Here is how we can create the master details form:

From the tool box drag-drop a ListBox onto the form.
From the data sources window drag-drop the LastName column of Customer entity onto the ListBox
Drag-drop the Order Entity from under the Customer node beside the ListBox on the form.

That’s it, really. You can press F5 to run the application and you will see your basic master-details form working. The customers list box will show a list of customer names and for the selected name the orders DataGrid will show their orders.

First, if you look at the XAML that gets generated, under Windows.Resources you will find two CollectionViewSource entries: One for Customers and one for Orders. These serve as the binding components (like the BindingSource objects in WinForms).

<CollectionViewSource x:Key="CustomersViewSource__OMSEntities" d:DesignSource="{d:DesignInstance my:Customer, CreateList=True}" />

<CollectionViewSource x:Key="CustomersOrdersViewSource" Source="{Binding Path=Orders, Source={StaticResource CustomersViewSource__OMSEntities}}" />

But note that the source for the CustomersViewSource__OMSEntities is the Customer entity, where as the source for CustomersOrdersViewSource is the CustomersViewSource__OMSEntities. Thus there is a master-details relationship between the two CollectionViewSouce objects. Now customer list is bound to CustomersViewSource__OMSEntities and the orders DataGrid is bound to CollectionViewSouce.

One more thing: We set the IsSynchronizedWithCurrentItem property of the customers list box to True. That way every time you change the selection in the listbox the current item in the CollectionViewSource is updated.

Second, if you look at the code behind the form, you will find that code to load the data for the entities is generated in the form’s Loaded event handler. In this code we build the object query for Customers and their orders, execute the query and assign the results to the source property of the CollectionViewSource of the Customers entity.

We construct the query in the GetCustomersQuery method. The basic query that loads customers and their objects is:

Dim CustomersQuery As ObjectQuery(Of Customer) = OMSEntities.Customer.Include("Orders")

However normally you would want to filter the query, and return only the subset of the results that are relevant. Modify the query in the GetCustomersQuery method to include your Where condition.

Building WPF Business Applications using Entity Framework

Beth Massi — Sat, 16 May 2009 05:06:57 GMT

I’ve been writing a lot about building WPF business applications with Entity Framework using Visual Studio 2008. If you’re just starting this type of development you may want to read the following:

I also highly recommend Julie Lerman's Programming Entity Framework book.

I’ll be adding more articles and How Do I videos so you may want to keep tabs on me and the EF team blog. :-)

Enjoy,
-Beth Massi, Visual Studio Community

Channel 9 Interview: WPF Improvements in VS2010 for Business Apps

Beth Massi — Wed, 25 Mar 2009 04:35:00 GMT

Today I posted a new interview on Channel 9 on WPF Improvements in Visual Studio 2010 for Building Business Apps.

At the MVP Summit a few weeks ago, Italian MVP Alessandro del Sole was so excited about the new WPF features in Visual Studio 2010 that he asked me if he could interview Milind Lele himself to get the low-down -- I said sure!

Milind is a Program Manager on the Visual Studio Pro Tools team. In this interview he chats with Alessandro about the new WPF improvements in Visual Studio 2010 for building business applications. This time Milind shows off the new Visual Studio UI and the new WPF data grid as he quickly builds a master-details form against an Entity Data Model using the new RAD drag-drop data binding features for WPF.

Also check out Milind's blog post on this topic for more information.

Enjoy,
-Beth Massi, Visual Studio Community

Drag-Drop Data Binding For WPF (by Milind Lele)

MilindLele — Sat, 08 Nov 2008 04:02:51 GMT

One of the improvements in VS2010 (CTP available for download here) is drag and drop data binding for WPF applications. Drag-drop data binding has been available for WinForms since Visual Studio 2005. So those of you that are familiar with that will find the WPF experience quite similar and readily usable. This post briefly outlines the improvements in the VS2010 CTP.

At one end of the binding is, of course the control that you are binding, the target. At the other end is data source. In VS2010 you can add either a DataSet or an Entity Data Model to your WPF application and bind the tables or entities to WPF controls by simply dragging the table or the entity and dropping onto the form.

Entity Data Model designer support was added to Visual Studio 2008 SP1. To add an entity data model to your application click Add New Item on the project menu, then select ADO.NET Entity Data Model.

The EDM wizard is displayed allowing you to specify a connection to your database and select tables that you wish to add to your model.

In VS2010, once an EDM is added to a project it will show up in the data sources window.

This acts as the drag source for your binding. From here there are different ways you can go about establishing bindings to your UI. One is to create the UI control, say a ListBox, from the toolbox, then drag-drop an entity from the data sources window to the listbox. Alternately you could generate the control from the data sources window itself. Select an entity and drop it onto the form. The data sources window allows you to select what control you wish to generate. That control gets generated and bound to the entity.