“I am having a difficult time finding information to help me adapt to LINQ in my webforms. I am hoping that someone from the team can offer a direction. “<\/strong><\/em><\/p>\n
You bet! We have a lot of attention to LINQ and Forms-over-data in VB in our learning content<\/a>, but we’re lacking content with attention to LINQ and Web-based Forms-over-data. <\/p>\n There are a number of great innovations in the Web space that make it easy to leverage LINQ’s querying capabilities and mesh that with the richness and flexibility of Web-based UI. It’s easy.<\/em> <\/p>\n There are a few concepts you should learn or know about to get started:<\/p>\n The first post will cover the simplest Web form that will demonstrate this end to end span of concepts. I’ll then take input from you to add features and expand on this sample in future posts. <\/p>\n Here’s a sample of the initial desired Web form output – a very simple Employee list report for an HR application – admittedly it’s bare bones and in need of UI design love:<\/p>\n If you are pretty familiar with Visual Studio I expect this will take about 10-15 minutes to walk through on your own machine. <\/p>\n – make sure you have Visual Studio 2008 or Visual Web Developer 2008 Express installed. Express Editions are available for download here<\/a>. First we’re going to add the database to our project and create necessary classes to use the database in LINQ (using Linq to SQL). Note, you could choose to skip this step and create your own custom LINQ query to any other data source.<\/em> <\/p>\n Now that we’ve added the database to the Web site and created necessary LINQ to SQL classes, it’s time to create some UI and wire up the data to the UI. I won’t do anything too fancy – just repeat data bound labels in a DataList (you could replace this with GridView, FormView or choose your favorite control). <\/p>\n The LinqDataSource needs to be wired up to the underlying LINQ data. In this case data is provided by any DataContext object or query over an object of the NorthwindDataClasses type (a LINQ to SQL file). The DataList then simply needs to use the LinqDataSource as the data source, and display data from bound fields using traditional Eval(“”) statements. The designer will generate a set of defaults for you if you use the Smart Tags. Let’s give it a shot with defaults, and then we can fine tune it from there. <\/p>\n Here is the resulting mark up for the LinqDataSource as seen in “Source” view. Note how the ContextTypeName=”NorthwindDataClassesDataContext” — this matches the name of the type we created in the designer (the code gen appends “DataContext” to the end — whew that’s long!). The TableName is set to the Table or Property we want to display — Employees in this case. You could use this pattern to bind to any DataContext type and class property within. <\/p>\n <\/a><\/p><\/blockquote>\n Now let’s wire up the DataList to the LinqDataSource. The nice thing here is the DataList only cares about the field names returned from the LINQ query via the LinqDataSource — this shields you as you continue to refine the fields and row results of your dynamic LINQ queries. <\/p>\n The wizard will create a series of bound labels by default. You can use the designer in edit mode to get the specific fields, look and feel you want. TIP:<\/strong> This is typically where I drop in the html mark up “Source” view<\/em>. In my example, I’ll simply show the full name, notes, and have a place holder to show an employee photo image. I also format the data in a two column table. <\/p>\n If you look at the DataList mark up, you see the ItemTemplate contains a number of bound labels. Binding to data from the query is simply a matter of typing in <%# Eval(“YOURFIELDNAME”) %> in your server control fields using classic ASP-style & VB data binding eval statements. This gives you a lot of flexibility to display just the data you want, formatted how you want. Here’s my customization: <\/p>\n <\/a><\/p>\n <\/p><\/blockquote>\n The technique above provides a zero-code method for binding Web forms to LINQ data. However, you might be asking yourself, where is the LINQ and VB here? It’s true the LinqDataSource hides all the querying code and constrains what you can do via the designer. This is fine for some simple cases, but the real power of LINQ is being able to use your own free form queries and VB logic. The good news is LinqDataSource supports using your own LINQ queries using the LinqDataSource.Selecting event. This is your hook to tell the control exactly what query should be used. It’s easy. Here’s how:<\/p>\n In my example I will query over Northwind employees, define a custom expression column called FullName (=First + Last), filter by full name starting with A or N, and sort by last name. Note I’m creating aliases for each property and hence the query is now an anonymous type — and the schema is now custom vs. my default NorthwindDataContext with all (*) columns. TIP:<\/strong> if you’re getting runtime errors when you try this make sure all the fields expected by your Web form are there — e.g. if the form is expecting “EmployeeID” make sure your query Selects it. <\/em><\/p>\n\n
Creating a Simple Web Form with LINQ To SQL<\/h3>\n
\n
EmployeeID: 2
Andrew Fuller
Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.<\/font><\/em><\/p>\n
EmployeeID: 1
Nancy Davolio
Education includes a BA in psychology from Colorado State University in 1970. She also completed “The Art of the Cold Call.” Nancy is a member of Toastmasters International.<\/font><\/em><\/p>\n<\/blockquote>\nPreparation<\/h5>\n
– make sure you have SQL Server 2005 Express installed and running. It typically gets installed by default with VS or VS Express, however, you can also install it from here<\/a>.
-if you don’t have Northwind.mdf on your machine, download it from the attached files on this post. <\/p>\nAdding Data to the Web Site<\/h5>\n
\n
\n
![\"1AddLocalDatabase\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/1AddLocalDatabase_thumb_1.jpg\")
<\/a> <\/li>\n<\/ol>\n<\/li>\n\n
![\"2AddLinqToSqlClasses\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/2AddLinqToSqlClasses_thumb.jpg\")
<\/a> <\/li>\n![\"2B-AddLinqToSqlClasses\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/2B-AddLinqToSqlClasses_thumb.jpg\")
<\/a> <\/li>\n\n
![\"3AddingClassesToORDesigner\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/3AddingClassesToORDesigner_thumb.jpg\")
<\/a> <\/p>\nLaying Out Form UI & DataSource Controls<\/h5>\n
\n
Wiring up the LinqDataSource to Underlying Data (LINQ to SQL – DataContext)<\/h5>\n
\n
![\"4LinqDataSource\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/4LinqDataSource_thumb.jpg\")
<\/a> <\/li>\n![\"4bLinqDataSourceWizardDataSource\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/4bLinqDataSourceWizardDataSource_thumb_1.jpg\")
<\/a> <\/li>\n![\"4cLinqDataSourceWizardChooseFields\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/4cLinqDataSourceWizardChooseFields_thumb_1.jpg\")
<\/a> <\/li>\n![\"4dLinqDataSourceConfigureCRUD\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/4dLinqDataSourceConfigureCRUD_thumb.jpg\")
<\/a> <\/p>\n\n
<<\/span>asp<\/span>:<\/span>LinqDataSource <\/span>ID<\/span>=\"LinqDataSource1\" <\/span>runat<\/span>=\"server\" <\/span>ContextTypeName<\/span>=\"NorthwindDataClassesDataContext<\/strong>\"\n <\/span>TableName<\/span>=\"Employees<\/strong>\">\n<\/<\/span>asp<\/span>:<\/span>LinqDataSource<\/span>><\/span><\/pre>\nBinding UI Controls to LinqDataSource<\/h5>\n
\n
<<\/span>div<\/span>>\n <<\/span>asp<\/span>:<\/span>DataList <\/span>ID<\/span>=\"DataList1\" <\/span>runat<\/span>=\"server\" <\/span>DataKeyField<\/span>=\"EmployeeID\" <\/span>DataSourceID<\/span>=\"LinqDataSource1\">\n <<\/span>HeaderTemplate<\/span>>\n <<\/span>table<\/span>>\n <\/<\/span>HeaderTemplate<\/span>>\n <<\/span>ItemTemplate<\/span>>\n <<\/span>tr<\/span>>\n <<\/span>td<\/span>>\n <<\/span>img <\/span>src<\/span>=\"PLACEHOLDER.jpg\" <\/span>class<\/span>=\"\" <\/span>style<\/span>=\"<\/span>border<\/span>: 4px solid white\"
<\/span>alt<\/span>='Photo Number XXX' \/>\n <<\/span>br <\/span>\/><<\/span>br <\/span>\/>\n <\/<\/span>td<\/span>>\n <<\/span>td<\/span>>\n <\/span>EmployeeID:\n <<\/span>asp<\/span>:<\/span>Label <\/span>ID<\/span>=\"EmployeeIDLabel\" <\/span>runat<\/span>=\"server\" <\/span>Text<\/span>='<\/span><%<\/span># Eval(\"EmployeeID\") %><\/span>' \/>\n <<\/span>br <\/span>\/>\n <<\/span>asp<\/span>:<\/span>Label <\/span>ID<\/span>=\"LastNameLabel\" <\/span>runat<\/span>=\"server\"
<\/span>Text<\/span>='<\/span><%<\/span># Eval(\"FirstName\") & \" \" & Eval(\"LastName\") %><\/span>' \/>\n <<\/span>br <\/span>\/>\n <<\/span>asp<\/span>:<\/span>Label <\/span>ID<\/span>=\"NotesLabel\" <\/span>runat<\/span>=\"server\" <\/span>Text<\/span>='<\/span><%<\/span># Eval(\"Notes\") %><\/span>' \/>\n <\/<\/span>td<\/span>>\n <\/<\/span>tr<\/span>>\n <\/<\/span>ItemTemplate<\/span>>\n <<\/span>FooterTemplate<\/span>>\n <\/<\/span>table<\/span>>\n <\/<\/span>FooterTemplate<\/span>>\n <\/<\/span>asp<\/span>:<\/span>DataList<\/span>>\n<\/<\/span>div<\/span>><\/span><\/pre>\nUsing Custom LINQ Queries<\/h5>\n
\n
![\"5VBDropdownsSelectingEvent\"](\"https:\/\/devblogs.microsoft.com\/vbteam\/wp-content\/uploads\/sites\/7\/2007\/12\/5VBDropdownsSelectingEvent_thumb.jpg\")
<\/a> <\/li>\nProtected Sub <\/span>LinqDataSource1_Selecting(ByVal <\/span>sender As Object<\/span>, ByVal <\/span>e _\n As <\/span>System.Web.UI.WebControls.LinqDataSourceSelectEventArgs) _\n Handles <\/span>LinqDataSource1.Selecting<\/strong>\n Dim <\/span>northwind As New <\/span>NorthwindDataClassesDataContext\n 'custom anonymous LINQ query\n <\/span>Dim <\/span>query = From <\/span>emp In <\/span>northwind.Employees _\n Select <\/span>emp.EmployeeID, emp.FirstName, emp.LastName, emp.Notes, _\n FullName = emp.FirstName & \" \" <\/span>& emp.LastName<\/strong> _\n Where <\/span>FirstName.ToUpper.StartsWith(\"A\"<\/span>) Or <\/span>FirstName.ToUpper.StartsWith(\"N\"<\/span>) _\n Order By <\/span>FullName\n 'sets LinqDataSource query equal to custom query.\n 'use data binding expressions to look up aliased fields above.\n <\/span>e.Result = query<\/strong>\nEnd Sub<\/span><\/pre>\n