Next week I’m giving a 2-day seminar on HTML 5 in Stockholm, covering not only semantic extensions of HTML 5 but also:
This will be 2 fun days
Christian
The Windows 7 taskbar is one of the great improvements of Windows 7. Users can pin applications to the taskbar so the application is fast accessible. The application need not to run, the application is accessible with the click of a button and thus replaces the quick launch. With the task bar the application can also offer some tasks that can be accessed from the user directly, instead of starting the application first and accessing the specific feature of the application. The .NET 4 version of WPF got an improvement that integrating the application with the task bar becomes an easy task. Starting with IE9, this is also an easy task to do with Web applications as this article demonstrates.
First, I’m adding a custom icon to the Web application. This icon is shown with IE9 in the taskbar and with the address link as the following figure shows.
If the Web application is pinned to the taskbar, the icon is displayed on the left side as well, and the back and forward buttons are colored. There’s a way to specify the color of the back and forward buttons. If the color is not specified, the color is taken automatically from the icon.
The icon can be specified in the header section of the HTML page with a link to an icon as shown. The meta elements named application-name, msapplication-tooltip, msapplication-starturl, and msapplication-window are used to configure the settings for the taskbar.
<link href="/Content/Icons/favicon.ico" rel="Shortcut Icon" type="image/x-icon"/> <meta content="CN innovation" name="application-name" /> <meta content="Information about CN innovation" name="msapplication-tooltip" /> <meta content="http://www.cninnovation.com" name="msapplication-starturl" /> <meta content="width=1024;height=768" name="msapplication-window" />
Selecting the context menu of the application pinned to the taskbar you can see information about the application as well as some links for fast access as the figure below demonstrates. This is the jump list.
The icon of the application is shown in the lowest section above the unpin and close options. These options as well as the menu to start in private browsing cannot be changed with IE9. The name of the application that was set with the application-name meta tag is shown beside the icon. With the application here I’ve also added two tasks for fast access which are Training and Books, and a custom section that lists the latest blog entries. How this is done is shown next.
Adding tasks to the task list is just a matter of adding meta tags msapplication-task. The content of this tag lists the name that is shown in the jump list, the link that should be opened on activating the item, and the icon.
<meta content="name=Training;action-uri=http://www.cninnovation.com/Home/Training;icon-uri=/Content/Icons/training.ico" name="msapplication-task" /> <meta content="name=Books;action-uri=http://www.cninnovation.com/Home/Books;icon-uri=/Content/Icons/books.ico" name="msapplication-task" />
The items that should appear above the task list can have custom section names. I’ve created a Blog section and display titles of the last five blog entries that link to these. Adding such items to the jump list is done with JavaScript. First it is verified if the Window is pinned. This can be done with the function window.external.msIsSiteMode. If it is not, and if the site is opened from a different browser, the script doesn’t need to run. A new section is created with the function msSiteModeCreateJumpList. Items to the jump list are added with msSiteModeAddJumpListItem. The parameters of this method are the name that should be displayed with the jump list, the URL that should be opened, and the link to the icon that should be displayed.
<script type="text/javascript"> try { if (window.external.msIsSiteMode()) { ext = window.external; ext.msSiteModeClearJumpList(); ext.msSiteModeCreateJumpList("Blog"); ext.msSiteModeAddJumpListItem("Sharing Assemblies between Silverlight and .NET", "http://weblogs.thinktecture.com/cnagel/2011/07/sharing-assemblies-between-silverlight-and-net.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Real World .NET 4 and C#", "http://weblogs.thinktecture.com/cnagel/2011/08/real-world-net-4-and-c.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("BASTA! 2011 in Mainz", "http://weblogs.thinktecture.com/cnagel/2011/08/basta-2011-in-mainz.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("WPF ListBox Postioning using a Canvas", "http://weblogs.thinktecture.com/cnagel/2011/08/wpf-listbox-postioning-using-a-canvas.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Reserve the date! Developer Day 2011", "http://weblogs.thinktecture.com/cnagel/2011/09/reserve-the-date-developer-day-2011.html", "/Content/Icons/blog.ico"); ext.msSiteModeShowJumpList(); } } catch (exception) { } </script>
It will be interesting to see what features Web applications will get from Windows 8. This taskbar feature from Windows 7 is limited in the way that there is not enough place for all my important applications. Let’s see how Windows 8 changes this using Metro, and what other features Web applications can use from Windows 8.
Christian
How to use WPF 4 to integrate in the Windows 7 taskbar is shown in my book Professional C# 4 and .NET 4.
Information on programming Web applications in my Web programming workshop.
Recently I’ve been asked how a list of graphical elements can be positioned, and the elements should be selectable. What panel could be used for this – a list of elements, and an element should be selectable – usually that’s the job of a ListBox. However, how can the elements in the ListBox be positioned using X/Y coordinates? For this job a Canvas can be used. Using a Canvas element for the ListBox turned out to be really simple as this article describes.
First I’m creating an Item type that should be displayed and contains coordinate information:
public class Item { public double X { get; set; } public double Y { get; set; } public string Name { get; set; } public string Color { get; set; } }
The collection of sample items is created within the ItemsFactory class:
public class ItemsFactory { private List<Item> items; public IEnumerable<Item> Items { get { return items ?? (items = new List<Item>() { new Item { Name = "One", X = 33, Y = 25, Color="Red" }, new Item { Name = "Two", X = 88, Y = 11, Color="Green" }, new Item { Name = "Three", X = 44, Y = 99, Color="Blue" } }); } } }
To display the elements within the view, the ItemsFactory is defined within resources and this resource is accessed applying a DataContext. The ListBox is bound to the Items property of the ItemsFactory and thus displays the items. The default view of the ListBox is just a list of strings, in this case the Item class didn’t override the ToString method and thus only the name of the classes is displayed.
<Window x:Class="ObjectListSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:ObjectListSample" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <local:ItemsFactory x:Key="sampleItems" /> </Window.Resources> <Grid DataContext="{StaticResource sampleItems}"> <ListBox ItemsSource="{Binding Items}" /> </Grid> </Window>
The display can be changed by defining an ItemTemplate for the items of the ListBox. The items are displayed as an ellipse within a Canvas element. As it’s contained within a Canvas the Ellipse can be positioned with Canvas.Left and Canvas.Top. The position information is taken from the X and Y properties of the Item. Beside the position also the Color and Name properties of the Item are used for the display.
<Style x:Key="objectList" TargetType="ListBox"> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <Canvas> <Grid Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"> <Ellipse Fill="{Binding Color}" Width="50" Height="40" /> <ContentPresenter Content="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </Canvas> </DataTemplate> </Setter.Value> </Setter> </Style>
Applying the style for the ListBox the new display is ready.
<ListBox Style="{StaticResource objectList}" ItemsSource="{Binding Items}" />
As the screenshot shows, the items are shown according the values of the Item objects within a Canvas. Does this look lie a ListBox? It’s a ListBox! The items can also be selected. The screenshot shows element Two as selected element.
Christian
More information in my WPF workshops
Writing WPF, Silverlight, and WP7 applications it could be useful to share assemblies between these technologies. Since Silverlight 3 and .NET 4 it is indeed possible to not only share source code but share the same binary assemblies. While this wasn’t very intuitive to do with Visual Studio 2010 and Silverlight 3 and 4, now there are separate Portable Library Tools that make this process easier. This article describes how to share assemblies with these different technologies, and the limitations.
With Silverlight 3 and .NET 4 the format of assemblies is the same with these two technologies. However, of course there’s a difference between the Silverlight and the .NET assemblies. To limit the download sizes that are an important aspect of Silverlight, Silverlight assemblies are reduced in functionality compared to the .NET Framework. The .NET assemblies of Silverlight not only have fewer types included, but the types also have fewer members. For example, a simple core type such as the Enum class offers GetNames and GetValues methods to access all the names and values of an enumeration. These methods are not available with the Silverlight assemblies. A .NET programmer knowing the full-blown .NET environment switching to writing applications with Silverlight soon finds out some limitations. Writing assemblies that should be used with both Silverlight and WPF are restricted to the functionality available with both technologies.
To create shared assemblies between Silverlight and WPF it is possible to create a Silverlight class library.
Using this assembly from WPF is simply a matter of referencing the assembly. However, a project reference doesn’t work. A reference to the file is needed. Sharing entities or some algorithms can now be easily done with this library.
However, there’s an important limitation. Using assemblies within this shared assembly is limited to this list (for Silverlight 4 and .NET 4):
Information on this list is found here: http://blogs.msdn.com/b/clrteam/archive/2009/12/01/sharing-silverlight-assemblies-with-net-apps.aspx
By default a Silverlight class library has some more assemblies referenced. If, for example the type XmlWriter from the assembly System.Xml is used within the Silverlight class library, the code runs fine from a Silverlight application. With a .NET application compilation is successful as well; however running the application a FileNotFoundException is thrown as the System.Xml assembly cannot be found.
So using this feature to share assemblies between Silverlight and WPF with Visual Studio 2010 out of the box a lot of care needs to be taken for not using types or members that are not available across the different platforms.
With the Portable Library Tools a solution to these issues is available. With these tools project settings are available to define what technologies the assemblies should be shared with, and warnings are given if types or members are used that are not available with all options.
The Portable Library Tools can be downloaded from the Visual Studio Gallery
http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/
and requires Visual Studio SP1 as prerequisite.
Creating a shared assembly, after the Portable Library Tools are installed, the project template to create a Portable Class Library is available.
With the project properties the library can be configured to define the target frameworks that should be used.
Depending on the selected target frameworks only a subset of assemblies is available that can be referenced.
The list of assemblies that is available with this tool is bigger than the list shown earlier.
However, the add reference doesn’t allow adding references to all these assemblies. This depends on the selection of the target frameworks. Changing the target frameworks to include just .NET Framework 4 and Silverlight 4, which can be done from the project properties,…
…the System.ComponentModel.Composition assembly is available as well for reference.
With the support of the Portable Library Tools sharing assemblies between different frameworks becomes easy. Just select the target frameworks, and the assemblies that can be used by the shared library is dealt with by the tool. This way it is easy to create entity assemblies and assemblies implementing algorithms that could be used across different frameworks.
Christian
More information in my Silverlight workshops
A ListBox displays a list of items, and one (or more) item(s) can be selected. With WPF it’s possible to define a complete different look for ListBox elements. With templates items can be customized with a complete different look, and the ListBox itself can be customized with a control template. This way a ListBox can look like a bar chart. This article demonstrates changing the look of a ListBox to a bar chart.
First data are needed. I’ve created a simple class that returns a list of numbers with the type IEnumerable<int>:
public class DataFactory { public IEnumerable<int> GetData() { return new int[] { 3, 5, 8, 6, 11, 7 }; } }
The class is instantiated by the ObjectDataProvider which invokes the method GetData to return the list of numbers.
<ObjectDataProvider x:Key="someData" ObjectType="{x:Type local:DataFactory}" MethodName="GetData" />
A ListBox is bound to the data by setting the ItemsSource property, and defining the DataContext of a parent element from the ListBox.
<Grid DataContext="{Binding Source={StaticResource someData}}"> <ListBox ItemsSource="{Binding}" /> </Grid>
Running the application a default representation of the ListBox and its items is shown.
To display the values as bars, a DataTemplate can be created. The template contains a red rectangle where the Width property is bound to the value returned from the collection item.
<DataTemplate x:Key="BarChartItemTemplate"> <Border Width="200" Height="50"> <Grid> <Rectangle Fill="Red" StrokeThickness="0" Height="40" Width="{Binding}" Margin="3" HorizontalAlignment="Right" VerticalAlignment="Bottom" /> </Grid> </Border> </DataTemplate>
With the ListBox, the ItemTemplate references the data template defined earlier.
<ListBox ItemsSource="{Binding}" ItemTemplate="{DynamicResource BarChartItemTemplate}" />
Running the application with its current state the rectangles are already visible as shown in the following figure. However, as the values returned from the collection are small, the rectangle has a small width.
To change the width of the rectangle based on the existing values returned from the collection it would be possible to use a converter. A converter class implements the interface IValueConverter and is configured with the binding. Another option – this one is used here – is to create a transformation. The rectangle is scaled by using a ScaleTransform setting ScaleX to 20 to scale the rectangle in x direction by 20.
<Rectangle Fill="Red" StrokeThickness="0" Height="40" Width="{Binding}" Margin="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"> <Rectangle.LayoutTransform> <ScaleTransform ScaleX="20" /> </Rectangle.LayoutTransform> </Rectangle>
With this transformation the rectangles look better. With the configuration as it is now, the first values are on top of the ListBox, and the last items on bottom. A behavior that is usually expected with ListBox controls. However, using a bar chart display usually it looks better to arrange the values in a horizontal way, starting with the first value on the left. This is done next.
To display the values horizontally within a bar chart the complete panel from the ListBox can be rotated. An ItemsPanelTemplate defines the panel for the items, and this is rotated by 90 degrees and scaled by –1 in the x direction to have the first items on the left side.
<ItemsPanelTemplate x:Key="BarChartItemsPanel"> <VirtualizingStackPanel IsItemsHost="True"> <VirtualizingStackPanel.LayoutTransform> <TransformGroup> <RotateTransform Angle="90" /> <ScaleTransform ScaleX="-1" ScaleY="1" /> </TransformGroup> </VirtualizingStackPanel.LayoutTransform> </VirtualizingStackPanel> </ItemsPanelTemplate>
With the ListBox control the ItemsPanelTemplate is assigned to the ItemsPanel property.
<ListBox ItemsSource="{Binding}" ItemTemplate="{DynamicResource BarChartItemTemplate}" ItemsPanel="{DynamicResource BarChartItemsPanel}" />
Running the application now, the items are displayed horizontally and the first items in the list are shown left.
If text values should be displayed in the ListBox as well beside the red rectangles, the ItemTemplate can be changed. Here, a TextBlock is added to the DataTemplate that binds the Text property to the same value as the Width property of the rectangle. As the TextBlock is in the same position of the grid as the rectangle it is just shown on top of it.
<DataTemplate x:Key="BarChartItemTemplate"> <Border Width="200" Height="50"> <Grid> <Rectangle Fill="Red" StrokeThickness="0" Height="40" Width="{Binding}" Margin="3" HorizontalAlignment="Right" VerticalAlignment="Bottom"> <Rectangle.LayoutTransform> <ScaleTransform ScaleX="20" /> </Rectangle.LayoutTransform> </Rectangle> <TextBlock Margin="20" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding}"> <TextBlock.LayoutTransform> <ScaleTransform ScaleX="-1" ScaleY="1" /> </TextBlock.LayoutTransform> </TextBlock> </Grid> </Border> </DataTemplate>
Now both the rectangles and the values are shown when running the application.
Does this look like a ListBox? It has the same functionality as a list box, just different look. Using XAML it’s easy to change the look in any way.
More information on WPF and XAML in my workshops and in the book Professional C# 4 and .NET 4.
Christian
In the previous blog post the sample to filter and display data with Formula 1 racers filtered by the country was started with ASP.NET MVC3. The first part created the model using the ADO.NET Entity Framework to map the Racers table to the Racer type, a controller to return filtered racers, and a view to display the racers. This article extends the example by adding a country selection and using JQuery to get the racers based on the selection.
First let’s start adding a controller method to display the countries of all racers. In the previous sample data was sent from the controller to the view by passing a model to the View method. This is one way of passing data to the view. Another way that is used here, is using ViewData or ViewBag properties of the ViewPage class. ViewData is of type ViewDataDictionary and allows assigning any object by using a dictionary key. ViewBag is new with MVC 3 and uses dynamic extensions to allow writing code without using the indexer syntax. For example, instead of writing ViewData[“Countries”], ViewBag.Countries can be used.
In the sample, a SelectList is assigned to ViewBag.Countries. SelectList is used to fill HTML select elements. SelectList is a collection of SelectListItem objects and has DataTextField and DataValueField properties to define what should be displayed in the select element, and what should be used as a value of the select element. In the sample, the SelectList is filled with a string list of unique countries.
public ViewResult Index() { var countries = new SelectList( db.Racers.Select(r => r.Country).Distinct().ToList()); ViewBag.Countries = countries; return View(); }
Within the view the HTML Helper method DropDownList can be used to create a select HTML element. The method DropDownList is defined with the class SelectExtensions. SelectExtensions defines extension methods to the HtmlHelper type for ListBox and DropDownList. The first paramter used with DropDownList defines a name and id for the HTML select element and also uses ViewData with the key of the first parameter (Countries) to display these data with option elements. The second parameter defines the option that is selected by default – in case it doesn’t exist this option is added.
<legend>Racers by Country</legend> <div> @Html.DropDownList("Countries", "select a country") </div>
Running the application the select element lists countries from all racers as shown in the following figure.
After the country is selected, the racers of the country should be displayed.
With the previous blog post racers have been filtered based on a country by using an URL parameter route. Instead of building the same functionality within the page that contains the DropDownList it would make sense to make that functionality reusable. With ASP.NET MVC something like user controls can be created. With ASP.NET MVC the technology to render a part of a Web page is a partial view. According to that the action method within the controller returns a PartialViewResult that is created from the PartialView method:
public PartialViewResult RacersByCountryPartial(string id) { return PartialView( db.Racers.Where(r => r.Country == id).OrderByDescending(r => r.Wins) .ThenBy(r => r.Lastname).ToList()); }
The partial view that makes use of the model is defined in the view file RacersByCountryPartial.cshml. The implementation is the same as in the previous blog post just with the difference that here’s just the HTML part defined that goes into another HTML page.
@model IEnumerable<MvcDataQuery.Content.Racer> <table> <tr> <th> Firstname </th> <th> Lastname </th> <th> Country </th> <th> Starts </th> <th> Wins </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Firstname) </td> <td> @Html.DisplayFor(modelItem => item.Lastname) </td> <td> @Html.DisplayFor(modelItem => item.Country) </td> <td> @Html.DisplayFor(modelItem => item.Starts) </td> <td> @Html.DisplayFor(modelItem => item.Wins) </td> </tr> } </table>
A partial view can be rendered within a page by using the method RenderPartial. This method requires the action and model with the parameters. If the page itself has a model directive, the model can be passed to the partial action using ViewData.Model.
@{ Html.RenderPartial("RacersByCountryPartial", ViewData.Model); }
With the sample the action to request the partial page should be done from the client side using JavaScript when the selection of the select element changes. This is done in the next step.
JQuery scripts are included with ASP.NET MVC by default. So now we’re making use of JQuery to request the partial view from the server.
First, empty div elements are defined that will be updated by JQuery calls.
<fieldset> <legend>Racers by Country</legend> <div> @Html.DropDownList("Countries", "select a country") </div> <br /> <div id="target"> </div> <div id="log"> </div> </fieldset>
Now let’s get into scripting. On the change event of the select element that lists the countries, the racers should be requested. The event handler can only be added after the DOM of the page is loaded.
$ is a shorthand alias for the jquery function. The first selector that is used is the document itself. The ready function binds a function that is invoked as soon as DOM of the page is ready to be used. The function that is invoked as soon as DOM is loaded searches for the element with the name Countries (using #Countries in the selector) and binds a function to the change event of that element.
<script type="text/javascript"> $(document).ready(function () { $("#Countries").change(function () { }); }); </script>
The function that is bound to the change event of the select element is invoked as soon as the selection is changed. Let’s implement this function. First we need to find the selected country. The variable countrySelected gets the current selection from the select element. $(“select option:selected”) finds the option elements inside the select element that have the selected attribute set to true. Because with a multi-selection select more than one items can be selected (which is not the case here), we need to get just one. The first() function just returns one element. text() gets the text value from this element, which is the selected country. $.get() makes an HTTP GET request. The first parameter of the requires the URL to be passed. The URL is generated from the server-side method Url.Action. This method returns the relative path to the controller where the parameter of the method is appended. With this sample it’s the Home controller and thus the relative path /Home/RacersByCountryPartial. The second parameter of the get function specifies key/value pairs that are sent to the server. Here the selected country retrieved from the select element is passed. The next parameter defines a function that is invoked as soon as the result from the HTTP GET request is returned. The selector looks for the div element with the target id, then the content of the div element is updated with the data returned from the GET request.
<script type="text/javascript"> $(document).ready(function () { $("#Countries").change(function () { var countrySelected = $("select option:selected").first().text(); $.get('@Url.Action("RacersByCountryPartial")', { id: countrySelected }, function (data) { $("#target").html(data); }); }); }); </script>
Of course the HTTP GET request to the server can fail. That’s why a function is attached in case an Ajax call fails. Within this function just a message box is shown to display the error.
<script type="text/javascript"> $(document).ready(function () { $("#Countries").change(function () { $("#log").ajaxError(function (event, jqxhr, settings, exception) { alert(exception); }); var countrySelected = $("select option:selected").first().text(); $.get('@Url.Action("RacersByCountryPartial")', { id: countrySelected }, function (data) { $("#target").html(data); }); }); }); </script>
Now the sample is ready to filter and display racers.
This concludes the filter and query sample with ASP.NET MVC.
With ASP.NET MVC the server-side functionality is separated into controller, view, and model. This separation makes it easy to create unit tests. This is in contrast to the technology ASP.NET Web Pages that was shown earlier. ASP.NET Web Pages makes a mix of server-side code within client-side pages. ASP.NET Web Pages an serve as a starter, then it is easy to change into ASP.NET MVC by adding models and controllers, and changing the views accordingly.
ASP.NET MVC also full control over the client writing HTML code with JavaScript and JavaScript libraries such as JQuery. HTML Helper methods make it easy to generate HTML code.
ASP.NET MVC has a big difference compared to writing Web applications with ASP.NET Web Forms. Using ASP.NET Web Forms, Web applications can be written nearly without any HTML and JavaScript code. This makes it easy if a developer is coming from writing Windows Forms applications, but looses control over data sent across the network and performance both on the client- and the server side.
ASP.NET MVC gives full control over HTML and JavaScript. JQuery makes writing scripting code easier especially if you are used to writing Lambda expressions. Functionality behind the scene is written with well known .NET technologies. The MVC pattern makes unit testing a lot easier.
Christian
Displaying a list of distinct countries of F1 racers within an HTML select element, and displaying a list of racers from one specific country has been the topic for the previous blog posts of this series. Previously this was done with ASP.NET Web Forms and ASP.NET Web Pages. The last article of this series demonstrates the same with ASP.NET MVC.
ASP.NET MVC is one of the newer ASP.NET technologies to create Web applications. Here I’m using version 3 which is an update to the version that is delivered with Visual Studio 2010. ASP.NET MVC is based on the model-view-controller pattern to make a separation between the view and the functionality. This separation helps with unit tests.
For a start I’m creating a new ASP.NET MVC Project using the Empty template. With the MVC3 templates it’s already possible to select HTML5 semantic markup with the template, and of course the Razor engine. Razor was already used with the previous blog post on Filter and display data with ASP.NET Web Pages as can be seen in the following figure.
The Empty project template already creates the main structure of the application with Models, Views, and Controllers directories, and JQuery scripts are also available with the project. MVC 3 contains version 1.5.1 of JQuery. A newer version is already available that can be loaded with the Visual Studio 2010 Extension Manager. However, for the simple scenario of this blog article an update is not required.
With the Empty template the global.asax file is already filled with some code. An important aspect of ASP.MVC is that the client doesn’t directly request the ASPX pages from the server, instead routing is done. The route is defined within global.asax in the method RegisterRoutes. With the generated code you can see an invocation to the MapRoute method that defines the Default route. The route is defined by {controller}/{action}/{id} with the default Home/Index/optional. The default means that if controller and action is not specified, the request to the Web application is directed to the Home controller with the Index action.
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); }
The controller and action will be specified later. Before implementing the controller some data is needed.
The entity types and data context classes to access the database is created with the help of the ADO.NET Entity Framework within the Models directory. Adding an ADO.NET Entity Data Model to the Models directory, generating the model contents from the database, and selecting the Racers table from the Formula1 database opens the designer showing the Racer type as in the following figure.
A method of a controller is invoked on a client request. Controller classes are defined within the Controllers directory. The Controller class i postfixed with the name Controller, such as the Home controller has the name HomeController. With definition of the routes you’ve seen that the default controller is the HomeController.
With the ASP.NET MVC 3 templates it’s easy to create controllers by using the Add Controller template. This template can create some implementation of the controller depending on the scaffolding options selected. First I’m showing the option to create read/write actions using the Entity Framework. With this option a model class can be selected (an entity type with the Entity Framework), and the data context class.
The generated controller class includes methods to retrieve a list of all racers, a single racer by passing the identifier, and also methods to create, edit, and delete racers.
public class HomeController : Controller { private Formula1Entities db = new Formula1Entities(); // // GET: /Home/ public ViewResult Index() { return View(db.Racers.ToList()); } // // GET: /Home/Details/5 public ViewResult Details(int id) { Racer racer = db.Racers.Single(r => r.Id == id); return View(racer); }
Another option of the template is to create a controller that contains read/write actions, but without implementation. For the sample I’m starting here with the third option to create an empty controller. This creates the HomeController class with an Index method as shown.
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } }
For accessing the database with the Entity Framework datacontext an instance of the Formula1Entitiies class is created and disposed.
private Formula1Entities db = new Formula1Entities(); protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); }
The first action demonstrated should return a list of racers depending on the country passed with the link, e.g. the query http://<server>/RacersByCountry/USA should return the racers from the USA. The action has the name RacersByCountry. The parameter has the name id as is defined by the parameter with the routing definition within global.asax. Returned from the action method is a ViewResult. Action methods from a controller can return a type that derives from ActionResult. Examples are JavaScriptResult to return JavaScript code, JSonResult to return a JSON object, RedirectResult to do a HTTP Redirect. To return a view, the return type is ViewResult. Partial views can be returned with the type PartialViewResult. The action RacersByCountry should return a complete view, thus the return type is defined as ViewResult. Returning a ViewResult, the View method of the Controller type is used. The View method accepts the name of the view that should be returned. If the name of the view is not passed, a view with the name of the action is selected. Another parameter of the View method is of type object where a model can be passed. This model can then be used by the view for displaying data. The sample passes a model where racers from the data context are filtered by the country.
public ViewResult RacersByCountry(string id) { return View( db.Racers.Where(r => r.Country == id).ToList()); }
After defining the controller it’s possible to define a view. Visual Studio templates take some work over creating the view. Selecting the Home directory inside the View (Home is the name of the controller), clicking the context menu Add | View… a new view can be created as shown in the following figure.
The first line of the generated view lists the model directive. This directive is new with ASP.NET MVC 3 to have a shorter notation of deriving from the base class passing the generic type for using strongly-typed model classes within the view. The longer term would be @inherits System.Web.Mvc.WebViewPage<IEnumerable<MvcDataQuery>>. In case a different base class should be used, the model directive is still possible. In such a case the base class can be configured in the configuration file. The Title of the ViewBag is set to be used within the shared layout page to set the HTML title element.
@model IEnumerable<MvcDataQuery.Content.Racer> @{ ViewBag.Title = "Racers by Country"; }
Following in the page is a HTML table with heading information. The Visual Studio template takes the properties of the model type to define the headings.
<table> <tr> <th> Firstname </th> <th> Lastname </th> <th> Country </th> <th> Starts </th> <th> Wins </th> </tr>
Every item in the model is iterated with a foreach statement. The value of every property of the item is displayed with the DisplayFor method of the HTML helper class. This method returns a string for primitive types, for Boolean values a HTML checkbox is returned.
@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Firstname) </td> <td> @Html.DisplayFor(modelItem => item.Lastname) </td> <td> @Html.DisplayFor(modelItem => item.Country) </td> <td> @Html.DisplayFor(modelItem => item.Starts) </td> <td> @Html.DisplayFor(modelItem => item.Wins) </td> </tr> }
Running the application passing a country followed on the action returns the filtered racers.
Christian
The next article in this series continues with ASP.NET MVC and adds a selection element to select available countries before displaying racers.
More information on ASP.NET MVC is available with my workshops.
In the previous three blog posts I’ve shown how to filter and display data with ASP.NET Web Forms. Now I’m doing the same with ASP.NET Web Pages. You will see how to filter and display data by using Microsoft Web Matrix, ASP.NET Web Pages, and Razor.
During the early days of ASP.NET there was a free tool named ASP.NET WebMatrix to create Web applications. This was at a time before there was a free edition of Visual Studio. Nowadays there’s an Express edition of Visual Studio that gives much more options than the old ASP.NET WebMatrix. Nowadays the name WebMatrix was reused for a new tool. The new tool, Microsoft WebMatrix ,makes it easy to start writing Web applications. A ton of predefined sites are available from the Web Gallery that can be taken as they are or adapted to specific needs. The predefined sites range from Blogs to CMS systems, eCommerce, Forums, Galleries, Tools, and Wiki. Often it’s not necessary to change the predefined sites, with many scenarios configuration is all what’s needed for adaption. The following figure shows a small part of the available sites.
For the small sample for this blog that does nothing than listing countries of F1 racers and displaying a list of racers for a selected country (the same sample as was done with ASP.NET Web Forms in the previous three blog entries) I’m starting with a simple site from a template: an empty site.
After creating the site the tool gives a view to the categories Site, Files, Databases, and Reports. Selecting the Site tab gives an entry point to the three other categories and also allows for publishing and looking for a hosting provider.
To create the sample, first a connection to the database is required. In the ribbon control of the tool Microsoft WebMatrix, in the section Database, a new connection to a database can be created. Clicking on the button New Connection opens the dialog as shown in the following figure. I’m creating the connection to the existing Formula1 database.
After the connection is created, the connection string is added to the file web.config:
<?xml version="1.0" encoding="UTF-8"?> <configuration> <connectionStrings> <add connectionString="Trusted_Connection=True;Server=(local);Database=Formula1" name="Formula1" providerName="System.Data.SqlClient" /> </connectionStrings> </configuration>
Next a page can be created. WebMatrix supports HTML, CSS, JavaScript files, and even PHP files can be created. I’m using the CSHTML file extension.
CSHTML files allow mixing server-side with the Razor syntax and client-side code within one file. The Razor syntax allows writing fewer characters for server-side code in contrast to ASPX. Scott Guthrie has a great blog post to introduce the Razor syntax.
On top of the page I’m declaring a few variables and open the database with the help of the Helper class Database. This class is defined within the namespace WebMatrix.Data The Database class is an adapter to ADO.NET to offer simple database requests. The Open method opens a connection to a database. Other methods are Query, QuerySingle, and QueryValue that are used on the instance of the Database class.
@{ var db = Database.Open("Formula1"); var selectedCountry = ""; var queryRacers = "SELECT Id, Firstname, Lastname, Country, Starts, Wins " + "FROM Racers WHERE Country = @0"; var queryCountries = "SELECT DISTINCT Country FROM Racers"; }
Helper classes make it easy to offer features from many different categories from Web applications. From the ASP.NET Web Pages Administration it is possible to install a lot of different helper classes as shown in the following figure. Helper classes are available to shorten URLs, to display Twitter widgets, connect to Windows Azure storage, search and buy within Amazon, add IE9 features to the Web application, do a Bing search, offer PayPal, and a lot more!
Then it’s easy to create a HTML select element with option children. Other than the first option, children are filled by invoking the foreach statement to iterate every item that is returned from the database query. The variable queryCountries is defined on the top of the page to make a distinct selection of all countries. With each item in the loop the Country property is used to display the country.
<select id="countrySelection" name="countrySelection"> <option>Select a country</option> @foreach (var item in db.Query(queryCountries)) { <option>@item.Country</option> } </select>
Running the application now, the list of countries is displayed as shown.
One might ask, how can there be a Country property with the result from the Query method. Contrary to the ASP.NET Web Forms sample from the last blog posts, here no Entity Framework mapping was done to create the entity and context classes. To tell the truth, there isn’t a Country property available. The Query method is defined to return IEnumerable<object>. In reality a list of DynamicRecord is returned. The type DynamicRecord is defined within the namespace WebMatrix.Data as well and derives from the base class System.Dynamic.DynamicObject. This makes use of dynamic features from .NET 4 and C# 4 to program with simple property style while in turn indexers are used.
To do a postback to the server on selection of an item, some JavaScript code and a form tag is needed. I’m adding this form element to the cshtml page around the select element. Submitting this form, a HTTP POST request is done to the file QueryF1Racers.cshtml.
<form action="QueryF1Racers.cshtml" method="post">
The request is started with the onchange event of the select element. The onchange event invokes the submit method of the first form element in the page.
<select id="countrySelection" name="countrySelection" onchange="document.forms(0).submit()">
Submitting a form to the server, values of the elements within the form can be retrieved with the Request object. In this code I’m setting the variable selectedCountry to the value that is returned from Request.Form[“countrySelection”]. countrySelection is the name of the select element.
@{ if (IsPost) { selectedCountry = Request.Form["countrySelection"]; } }
Now the selection within the select element should be corrected. After a postback the select element should have the same selection as was before the request. The option element that is a choice within the select element defines the selected attribute. If the value for this attribute is true, the choice is the selected one.
@foreach (var item in db.Query(queryCountries)) { if (item.Country == selectedCountry) { <option selected="true">@item.Country</option> } else { <option>@item.Country</option> } }
To display the list of racers for a specified country, I’m using the WebGrid class that comes with WebMatrix. The WebGrid class is defined within the namespace System.Web.Helpers. This class requires the source in form of IEnumerable<Object> as the argument. This is created by invoking the Query method of the Database instance db. The Query method receives the SELECT statement to query for all racers from a specific country. The country parameter is passed with the second argument of the Query method. Finally, the GetHtml method of the WebGrid class returns HTML code.
@{ var grid1 = new WebGrid(db.Query(queryRacers, selectedCountry)); } @grid1.GetHtml()
Running the application now a country can be selected and a list of racers from that country is displayed.
The WebGrid returns an HTML table as shown from the output of the IE9 Developer Tools:
Using Microsoft WebMatrix and ASP.NET Web Pages is really easy. It’s not anymore the drag&drop style of programming as we’ve seen with ASP.NET Web Forms. With ASP.NET Web Pages you have to write a little code. However, using helper classes such as the Database and WebGrid classes this is not that hard. One big advantage of starting the development of Web applications with Microsoft WebMatrix and ASP.NET Web Pages is that all the doors are open to move to ASP.NET MVC.
Christian
The same functionality as shown here will be demonstrated with ASP.NET MVC in the next article of this series.
Here you can find the links to all articles from this series.
This is already part 3 of this series to filter and display data with ASP.NET Web Forms. In part 1 a distinct list of countries was retrieved from a Formula 1 Racers table, part 2 extended this to display racers from a single country within a GridView control. Changing the selection of the DropDownList control to a different country so far always makes a full postback to the server to request the new list. Part 3 now demonstrates how ASP.NET Web Forms can take advantage of Ajax to only request a part of the page.
For having Ajax functionality on a WebForms page, a ScriptManager control must be added to the page.
There can be only one instance of the ScriptManager with a page. In case master pages or user controls are used, and functionality of the ScriptManager should be used within the inner parts, the ScriptManager must be instantiated in the outer page parts, and the inner page parts can make use of the ScriptManagerProxy. The sample just defines a simple ASPX page, and thus just a singe ScriptManager is fine.
For updating only parts of the page the property EnablePartialRendering must be set to True. That’s the default setting. With this setting client-side JavaScript code is offered for partial rendering.
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
To define the part of the page that should be updated asynchronously, the UpdatePanel does the job. With the sample page the DropDownList could stay the same with every page request, but the GridView should change with every selection change in the DropDownList control. Thus the GridView control should be moved within the UpdatePanel.
The DropDownList shouldn’t update. However, on selection change of the DropDownList control the Ajax postback should fire. This must be set with the Triggers collection of the UpdatePanel. Clicking on the ellipsis button of the Triggers collection in the property editor allows adding this behavior with a simple designer as the following figure shows.
Checking the ASPX code that’s generated reveals these settings of the UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" DataSourceID="EntityDataSource2"> </asp:GridView> <br /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel>
Running the application now just updates parts of the page instead of reloading the complete page with every selection change in the DropDownList control. The IE9 Developer Tools show the request of every page, and only the content of the UpdatePanel gets transferred. IE9 Developer Tools can be started from IE by clicking the F12 button and are really very helpful on developing Web applications Clicking the Network tab, network requests are captured and the complete HTTP request and response can be seen.
With an Ajax postback just the part of the update panel is replaced by new HTML code with the help from some JavaScript. There’s no need to write custom JavaScript code for doing this.
To summarize, ASP.NET Web Forms fulfills its promise with Ajax as well. With simple Web applications, partial page updates can be done easily just by using server-side controls and not deal with HTML and JavaScript at all. Of course, there are still the issues mentioned in the previous article on the ViewState, the necessity to do some tuning where still code is required, and ASP.NET Web Forms also lacks of a good way for unit testing.
Christian
The next article in this series makes use of a newer technology – ASP.NET Web Pages. Here Microsoft WebMatrix will be used as a tool instead of Visual Studio 2010. More on that next week.
