Paul Sheriff's Blog

Over the years I have written a multitude of blog posts. I write mostly on C#, .NET, MVC, WPF, Angular, JavaScript, jQuery, HTML, CSS, SQL Server, and many other technologies.

How to Find Samples

The sample code for each blog post can be found on my Github page. The file name on the github site is the 'title' of the blog post with underscores replacing spaces. If you have problems finding a sample, feel free to email me.


All Blog Posts - Descending Date Order
# Posts: 111

In this sixth part of my multi-part series on the WPF list box, you explore searching and filtering. If you wish to provide your user with the ability to search for data within your list box, there are a few ways to do so. Three different methods are going to be explored in this blog post; simple text searching using built-in list box functionality, build your own search method, and use the filtering on the CollectionViewSource object. The first method is easy to implement and simple for the user. The second method is ideal if you wish to allow your user to input one or many values to search upon. The third method is good if only one search field is being used.
In this fifth part of a series of blog posts on the WPF list box, you are going to learn to use the CollectionViewSource class in .NET to group Product data on one of the columns. The CollectionViewSource class can be created in XAML and passed parameters in order to group the product data coming from your data source. In addition, you may instantiate a CollectionViewSource class in code and change the grouping of the data based on a user selection.
In this fourth part of a series of blog posts on the WPF list box, you are going to learn to use the CollectionViewSource class in .NET to sort data. The CollectionViewSource class can be created in XAML and passed parameters in order to sort the data coming from your data source. In addition, you may instantiate a CollectionViewSource class in code and sort the data based on a user selection.
This is part three of a series of blog posts on using the WPF list box. In this post you learn to use data triggers allow you to change how each row is presented based on data in your data source. You can use a single trigger or multiple triggers depending on your needs. You are also going to build a converter class to accept two or more pieces of data and the return value is used as a data trigger.
When developers think of how to access data, many use the Entity Framework (EF), Dapper, NHibernate, or some other object-relational mapper (ORM). Each of these ORMs use ADO.NET to submit their SQL queries to the back-end database. So, why do we use ORMs instead of just using ADO.NET directly? Simply put, ORMs allow you to write less code. If each of these ORMs are simply wrappers around ADO.NET, can't you write your own wrapper to cut down the amount of code you need to write? Absolutely! This article describes a set of wrapper classes to make it simpler to work with ADO.NET. This article does not go into every line of code in the wrapper; it is intended as an overview of the functionality.
A common task we face as developers is to take data from a database table and create a collection of entity objects. We have several methods to accomplish this task. You can build a DataTable or DataReader, loop through the rows, build a new object for each row, and write lines of code to transfer column data to each corresponding property. Another method is to use an object relational mapper (ORM) such as the Entity Framework, Dapper or NHibernate which performs these operations for you. Have you ever wondered how these ORMs build the collection? Well, wonder no more. This blog post will show you how it is done.
This is part two of a series of blog posts on using the WPF list box. In this post you change a list box to display rows horizontally instead of vertically. You learn to change list box templates dynamically at runtime. Finally, you learn to pass multiple pieces of data from your data source to a converter class and have that class return a single piece of data to be displayed.
We often have a one-to-many relationship in tables in a database. When you need to ask the user to select a parent value, then select a child value in a web application, you don't want to post-back just to refresh the child list. Doing so causes a flash on the page and can place the user back at the top of the web page. This is not the best UI experience for the user but can be remedied easily. In this blog post, you are going to learn to populate a drop-down list based on the selection in another drop-down list. The technologies used in this post are MVC, Entity Framework, Web API, jQuery, and Ajax. To try out the samples in this blog post, create an MVC application using Visual Studio.
The WPF ListBox is a very versatile control. In this multi-part series of blog posts, you will be shown a myriad of ways to coerce the ListBox to work the way you want. You will learn how to create multi-row and column items with images, how to change the information displayed in each row dynamically, and how to present the list box horizontally. You will also learn to use data triggers, sorting, grouping, and filtering. In this post, you learn to add multiple rows and columns to each row of your list box.
In this blog post, you are going to code a web page that allows a user to select one or many files, and display a title and description input area for each file. Once the user adds a title and a description, they click on an Upload button to upload the file selected (see Figure 1), along with the title and the description entered about that file. Each file is uploaded asynchronously through a Web API call and the progress is reported in a progress bar that appears on the web page.
In this blog post, you are going to learn how to use jQuery, JavaScript, Ajax, and a Web API method to upload multiple files asynchronously. As each file is uploaded, a progress bar is displayed to indicate the progress for each file, as shown in Figure 1. In order to accomplish this, you learn to clone an HTML template for each file selected to upload. Yes, you can find free, open-source libraries to help you do this, but it is always good to know how these things work under the hood.
In the last blog post you learned how to populate data into a Combo Box, a List Box and a Data Grid. In each of the previous samples, you just used the default display for those controls. In this blog post you learn to control how the data is displayed using templates. In addition, you learn to use a List View control to display tabular data.
WPF has several controls that allow you to display a list of data to the user. In this blog post you are going to learn the basics of displaying product data in a Combo Box, a List Box and a Data Grid. In the next post you are going to learn to customize the look of the basic controls using templates. To use these list controls, you are going to create an Entity Framework entity class and a DbContext class to retrieve data from the AdventureWorksLT sample database that comes with SQL Server. You are going to create a view model class to interface with the WPF list controls.
In most business applications, users wish to filter data that has been displayed to them. This blog post is not about how you filter, per se, but how to display the filtering options to the user. In the first scenario, an expander control where the user selects values to filter is used. In the second scenario, the filters are displayed within the column header on the data grid control. The third scenario ensures that column headers are aligned consistently across each column.
If you have a WPF screen that is made up of two of more 'sections,' where each section has its own unique functionality, you might want to consider breaking each of those pieces of the screen into individual user controls and individual view model classes. This will help you build, run, and test each component. You can then aggregate the user controls into one control and inherit from one view model to the other to bring them all together. In this blog post, you are going to build upon the sample created in the post entitled 'Basics of MVVM in WPF.' Read and download that sample application to follow along with this blog post.
In this blog post, you learn how easy it is to use the Model-View-View-Model (MVVM) design pattern in WPF applications. This blog post is a step-by-step illustration of how to build a WPF application to display a list of users.
In the last blog post you learned to read songs from an exported iTunes XML file. If you have been using iTunes for a long time and have deleted songs, merged songs from other libraries, moved your library from one computer to another, then you may not know it, but there could song files on your hard drive that are no longer in the iTunes library. This blog post shows you how to locate those missing files. To follow along with this blog post, read and follow the instructions in the first blog post on reading songs from iTunes.
Have you ever wanted to retrieve the list of songs from your iTunes library? Getting songs from iTunes is not easy. In fact, since Apple stopped supplying their COM component for reading from their iTunes library, about the only way to get song data is to export the library into an XML file, then parse the XML. In this blog post you are going to learn to parse the XML using the classes contained in the System.Xml.Linq namespace.
In this blog series, you have assumed that everything has gone correctly when uploading files. However, if you attempt to upload a file that is too large, you receive an error from your web server. In this blog post you are going to learn how to get the maximum size of file allowed, display that value on the page, handle an error when the file is too large, and modify the maximum size of file allowed. If you have not done so already, please download the sample from Part 5 so you can follow along with this blog post.
So far in this blog post series on uploading files with MVC you learned to style the file upload control, use a view model for data binding, create a thumbnail from an uploaded image, and store files on the server's file system. In this post, you learn to store the uploaded file in an SQL Server table. If you have not done so already, please download the sample from Part 4 so you can follow along with this blog post.
In any application, you want to keep the coupling between any two or more objects as loose as possible. Coupling happens when one class contains a property that is used in another class or uses another class in one of its methods. If you have this situation, then this is called strong or tight coupling. One popular design pattern to help with keeping objects loosely coupled is called the mediator design pattern. The basics of this pattern are very simple; avoid one object directly talking to another object, and instead use another class to mediate between the two. This class is called a message broker. The purpose of this blog post is show you a simple approach to using a message broker in your XAML applications.
In this blog post, you learn to create a standard architecture for your WPF applications. You learn what common classes you need, what kind of library to put those classes into, and how each of the libraries are referenced from your main application.
So far in this blog post series on uploading files with MVC you have learned to style the file upload control, to use a view model for data binding, and how to create a thumbnail from an uploaded image. In this post you learn to store the uploaded file in a folder on your server. To accomplish this, there are a few changes you need to make to the application written thus far. You need to add a new setting to the Web.config file, add a property in the AppSettings method to read that setting, and a method to the view model to write the original and thumbnail files to disk. In the controller, call the new method in the view model to write the files. Finally, change the src attribute on image tags to use the path to the folder on the server where the files are located.
In the last two blog posts in this series you learned to style the file upload control and to use a view model to simplify data binding. In this third blog post, you build a class that allows you to take a large image and create a thumbnail image from it. When displaying a list of files, you may wish to show a small graphic, so the user can see what the file looks like. Instead of sending down a large image and squishing it by setting the height and width attributes, you should use a small graphic as this makes the amount of data sent to the browser less.
In the last blog post you learned to style the file upload control and to upload a file. You gathered information about the file and placed that information into individual variables in a controller class. In this blog post you create a view model class with properties to hold the file information, and a method to extract the file information, and upload the file.
In my last two blogs, you created a set of Angular classes to support user authentication and authorization. You also built a .NET Core Web API project to authenticate a user by calling a Web API method. An authorization object was created with individual properties for each item you wished to secure in your application. In this blog, you are going to build an array of claims, and eliminate the use of single properties for each item you wish to secure. Using an array of claims is a much more flexible approach for large applications.
User's frequently want the ability to upload files to a website. If you are using MVC and Bootstrap, you know that the normal file upload control does not look like the rest of your bootstrapped controls. In this blog post you are going to learn how to modify the default look and feel with a couple of other looks to make the file upload control match the rest of the bootstrap styled HTML.
I am constantly asked by desktop developers how to make the transition to web development. Web applications are almost as powerful and as fast as desktop applications these days. Plus, there are no installation hassles as the application resides in just one place: on your server. To use the application, the user simply navigates using a browser to your application's starting point, and they can start working. In this blog post, I provide you with guidance on how experienced developers can get started with web programming. I am not going to go in-depth into each technology and tool. Instead, I will introduce you to terms, technologies, and tools needed for web development, and provide you with links on where you can learn more about each.
In the last several blog posts, you worked with a very flat document structure. However, in a more real-world scenario you may have a more complicated JSON object with several nested objects. Working with those types of objects requires you to query and index data slightly differently. This blog posts shows you how to create a complex document structure and query that data.
The last four blog posts have introduced you to working with a PouchDB database. You learned to modify documents one at time, in bulk, and learned to query the data within that database. In this fifth part of our ongoing series on PouchDB, you learn to use reduce queries to provide summary data such as the sum or average cost data, minimum and maximum, and how to calculate an average of cost data.
In the last three blog posts, you created a PouchDB database and modified documents within it. You learned to search for documents within the database using allDocs() and find(). In this fourth part of our ongoing series on PouchDB, you learn to use map queries using the query() method.
In the last two blog posts, you have been introduced to the PouchDB NoSQL database. You learned to create a new database, modify documents within that database, and retrieve documents using the allDocs(). Now that you have inserted several documents into your PouchDB database, you might wish to retrieve documents based on data in fields other than the _id property. In this third part of our on-going blog posts on PouchDB, you learn to use the find() plug-in to perform queries on any property in your documents.
In the last blog post, you learned to insert, update, delete and read single documents in a PouchDB database. Let's now look at how to perform multi-document inserts and reads.
As more and more users interact with web applications on their mobile devices, it is becoming increasingly important for us to allow them to work offline. PouchDB helps you with offline storage. This first part of a series of blog posts shows teaches you the basics of working with PouchDB.
"Sometimes you need to upload some files to your server via an Angular application. There are a few different methods you may use to upload. In this blog post, I am going to present a method that works well for small files, up to about one to two megabytes in size. In this blog you build two projects; a .NET Core Web API project, and an Angular project. You build these two projects from scratch using the Angular CLI, .NET Core and Visual Studio Code editor. The result from this blog post is a page that allows you to select one or more small files using the HTML file input element.
Have you ever need to display your user's location on a map in your web application? HTML 5 adds a geolocation object to help make locating the current user's latitude and longitude quick and easy. Once you have this information, you can use a map API such as Google Maps or Microsoft's Bing Maps to display that latitude and longitude on a graphical map. This blog post explores how to use this new object to get a user's current position.
I previously published a couple of articles on how to create a security system in Angular. In those articles, a set Angular classes for users' authentication/authorization were created. You used these classes to login a user and create a set of properties in a class to turn menus and buttons on and off. For each menu or button you want to turn on or off, you have a corresponding property in a AppUserAuth class. This works for smaller applications, but for larger applications, you would be best to use a claims-based approach. In this blog post I discuss how to build a claims system for Angular applications.
In Part 1 of this article series, you created a set Angular classes for users and user authentication/authorization. You used these classes to login a user, create a set of properties in a class to turn menus and buttons on and off. In this article you learn to authenticate users against a Web API method. That method returns an authorization object with the same properties as the classes you created in Angular. You are also going to learn to secure your Web API methods using JSON Web Tokens (JWT). You use the [Authorize] attribute to secure your methods, and you learn to add security policies too.
In most business applications, you are going to want to disable, or make invisible, different features such as menu items, buttons and other UI items, based on who is logged in and what roles or permissions they have. Angular does not have anything built-in to help you with this, so you must create it yourself. There are two different pieces to security you must worry about with Angular applications. First, you must develop the client-side security, which is the subject of this article. Second, you must secure your Web API calls, which will be the subject of another article.
In the last blog post you learned how to structure your jQuery applications like Angular applications. You created a single page on which to host all your other pages. In this post you are going to put those techniques to work by building a complete list, add, edit and delete page.
In this post you will learn the basics of downloading partial HTML pages and insert them into another HTML page at a specified location. This is like the SPA functionality that Angular and React supply. You are going to create small files for style sheets and JavaScript for each page. All of this is a good start on building a SPA using just jQuery, and a model for structuring your different application artifacts.
In the previous blog post on creating a configuration settings system for Angular, you learned to create a configuration settings service to retrieve default settings for your application. In this blog post you take those settings from a JSON file, and a Web API call, and store them into local storage.
When a user clicks on a button on a web page, there can be a delay between posting back to the server and the next action that happens on the screen. The problem with this delay is the user may not know they actually clicked on the button and tries to hit the button again. It is important to give immediate feedback to the user so they know that the application is doing something. This post will show you how to disable the button, display a pop-up message and gray out the background before the post back happens thereby providing feedback to our user.
Just like in .NET applications, you might want to have configuration settings in your Angular applications that you can access from any component or service class. There are many approaches you can take for global settings, however, I am going to use a service that can be injected into any class. I think the flexibility of using a service is an ideal method for providing application-wide settings to any class that needs them. This blog post will describe the process of creating this service.
While there are many programmers who use the Entity Framework these days for database access, there are still many who do not. Many programmers still use ADO.NET directly to perform standard CRUD logic. When you must use dynamic SQL to perform queries, it is very important to not let any SQL injection attacks through. This blog post shows you how to use parameters with dynamic SQL.
Yes, we all know reflection is slow, but sometimes it is necessary to use it to satisfy a business requirement in our application. Just like anything, there is a right way and a wrong way to use reflection. Microsoft has made significant improvements in performance over the years for getting and setting properties. This blog post shows you the slow and the fast ways of using reflection.
Extension methods allow you to add your own custom method to an existing type. This blog posts shows you how to create extension methods.
Prior to .NET 2.0 when you needed a single method to work with different data types the only way to accomplish this was to pass an 'object' data type to that method. Working with the object data type introduces performance problems and bugs that can occur at runtime. The alternative is to create a new method for each data type that you wished to work with. This blog post introduces you to C# Generics.
I have long had a problem with using HTML tables to display data to the user. I have an even bigger problem with editing on a table, but that is a different discussion. An HTML table is easy to implement for a developer, and this is normally why developers use them. However, a table is not always the best method for conveying data to a user, especially when that data is most likely viewed on a mobile device. Of course, there are always exceptions to this rule, but these should be 'the exception' and not the rule. There are many reasons why a table is not suitable for user consumption. This blog post presents some alternatives to normal HTML tables.
When people think of having to store data for their applications, a database such as SQL Server immediately comes to mind. However, XML files are very handy for storing data without the overhead of a database. Using XML files to cache often-used, but seldom changed data such as US state codes, Country code, employee types and other validation tables can avoid network round-trips to a database, and potentially speed up your application. In addition, XML files are great for off-line applications where a user needs to add, edit and delete data when they can�t connect to a database. To take advantage of XML within your application, you should use LINQ to XML. I am sure you have used LINQ to iterate over other types of collections. LINQ works great to iterate over XML, too. In this blog post you will use LINQ to XML to read state codes from an XML file and display those values on a web page.
This blog post is the first in a series of four posts to discuss how to use a Model-View-View-Model (MVVM) approach in an MVC application. The MVVM approach has long been used in WPF applications, but has not been prevalent in MVC applications. Using a View Model class in MVC makes good sense as this blog post illustrates. You are going to be guided step-by-step building an MVC application using the Entity Framework and a View Model class to create a full CRUD web page.
This blog post continues from where the last blog post left off. You are going to learn to search for products. You also learn how to handle all post backs through a single method in your MVC controller. You will add code to check for no rows being returned, and display a message to the user. Finally you break up the single page into multiple partial pages.
In this post you add a product detail page in order to gather product data for adding to the product table. You add a save and a cancel button and learn to display validation messages. You build a method in the view model class to insert product data.
This post is going to finish the MVC application using a MVVM approach. You are going to build the methods to select a single product from the product table. You are going to learn to update an existing product. You are also going to delete a product. Finally you learn how to handle server-side validation, and return validation messages back to the client to display to the user.
In this blog post, you will learn to retrieve a single product record using a Web API call from the Angular product service you created. You are going to add Edit and Delete buttons to each row of the HTML table (Figure 1) to allow the user to update and delete an existing product record. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.
In this blog post, you are going to extend the last sample to allow the user to add a new product. You are going to add a POST method to your Web API controller. You will also create a new Angular component to handle getting and displaying a product record.
In the first part of this blog series, you added Angular 2 to an MVC application using Visual Studio. In this blog post, you will learn how to add a Web API that can be called from an Angular service. You will modify the Global.asax to automatically convert pascal-cased properties in C# classes into camel-cased TypeScript properties. You will build an Angular service, learn to inject it into a component, then call the service to retrieve product data. Finally, you will take the returned data and build an HTML table. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.
Many of us have MVC applications currently running. You would like to start using Angular 2 or 4 in your web applications, but don�t have the time to completely rewrite. It would be nice if you could just re-write one or two pages in Angular and keep the rest of your MVC project in place. Turns out you can. In this blog post, you will learn how to add Angular 2 or 4 to your MVC applications. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.
In my last blog post, entitled Caching for Non-Web Applications - Part 1 I introduced you to the MemoryCache class. This class allows you to create a cache for any type of application just like in ASP.NET applications. The great thing about the MemoryCache class is there is no reliance on the System.Web namespace. This means you are free to use the MemoryCache class in any type of application such as Windows Forms, WPF and Windows Services. The last blog post showed you how to add and retrieve data from the cache. This blog post expands on the last one and shows you additional methods you can take advantage of to work with cache data.
A great feature of ASP.NET applications is the Cache class which allows you to store values that are commonly used. Caching data can avoid round-trips to database servers, which can save a lot of time. Until 2010, there was no good way in a Windows Service, Windows Form or WPF application to cache data except by writing your own class. Enter the MemoryCache class, part of the System.Runtime.Caching namespace. This class allows you to add data to a cache and set a time-out so that data can be removed from memory when it is no longer used. This blog post will show you the basics of using this class
In this post, you are going to learn to run unit tests from the command line. This allows you to schedule tests using task manager or any other automated scheduling tool. The VSTest.Console.exe is the tool you use as a .NET developer to run your unit tests in your .NET test dll.
You have used the Inconclusive, IsTrue, IsFalse and Fail methods. In this blog post you will learn about some of the other methods you can utilize in the Assert class. In addition you will learn about two additional assert classes you may take advantage of when writing unit tests.
You have seen a few different attributes such as [TestClass], [TestMethod], and [TestInitialize] used to decorate classes and methods. There are several more attributes that you should be aware of. You may or may not use all the attributes presented in this blog post, but you may have a need for them at some time or another.
In this blog post you learn about initialization and cleanup of the test environment. There are different methods of initialization and cleanup available to developers in Visual Studio. This blog post will introduce you to each and describe how to use each one.
In my previous blog post, I introduced you to creating unit tests with Visual Studio. A method named FileExists was created to which you pass a file name to see if it exists. In the tests you created, you use hard-coded file names to test. Just as you wouldn�t hard-code values in a normal application, you should not do this with unit tests either. In this blog post you will learn to use constants, a configuration file, and how to create and delete test files.
Every developer needs to test their code, or have it tested by someone. Many developers are not great at testing their own code. The main reason is we tend to test only the �happy path� through the functionality that we wrote. We often avoid testing the boundaries of our code such as invalid inputs, exceptions that might occur, etc. One way to become a better tester is to start writing unit tests. While it takes more time up-front to write unit tests, it saves a ton of time when you must regression test changes to existing features. Starting with Visual Studio 2008, Microsoft added a unit testing framework right into Visual Studio. There are also several third-part testing frameworks you may use. In this blog post, you are going to learn the basics of using the unit test framework in Visual Studio.
Every developer needs to test their code, or have it tested by someone. I don�t know about you, but I am horrible at testing my own code. Does this mean that I do not need to test my code? Heck, no! It is always best if you do not rely on your end-user to test your code. This can end up with a very frustrated user, and your user can lose faith in your ability to get their project done. There are several ways you can get your code tested. This article explores a few of these methods for testing and talk about the advantages and disadvantages of each.
In the last two articles, you built an HTML page to enter credit card information. You have the drop-down lists loaded with data coming from a Web API service. Your last tasks for this page are to validate the data entered is correct, both on the client and the server, display any validation messages, and finally, save the credit card data into the CreditCard table in your SQL Server database. You are going to build custom directives in Angular to validate the input on the client side.
In the last article, you created an HTML page to enter credit card information using Angular. You created some hard-coded functions in your Angular controller to populate the three drop-down lists. In this article, you create Web API calls to gather the data for these three drop-down lists from a SQL Server table. These Web API calls request the information for these drop-down lists from a view model class. The view model class uses the Entity Framework (EF) to build a collection credit card types from a SQL Server table, a collection of language-specific month names, and a collection of years. Once you have this built, you call the Web API from your Angular controller to load the drop-down lists from this data instead of the hard-coded data you used in the last article.
A common page on many public websites is a page that asks a user to submit their credit card information. This seemingly simple little page has quite a few moving pieces in it. This series of articles illustrates how to build the HTML, Web API calls, a view model class, the Entity Framework objects, and the appropriate AngularJS controller to create a credit card entry page. Yes, I am still using AngularJS (or Angular 1) as opposed to Angular 2. The reason for this is I am finding that many developers are more familiar with JavaScript than with TypeScript and wish to stay with a language they know. There is nothing wrong with Angular 1, and thus no compelling reason to upgrade to Angular 2 if you don't want to.
In the last blog post (Introduction to Angular Routing) you were introduced to routing in Angular (v1.x). You learned the basics of how to route to different HTML fragments using the routing features of Angular. In this blog post you learn more things you can do with routing such as specifying the controller to use, aliasing the controller using 'as', passing parameters to a page and programmatically calling a route.
To build a Single-Page Application (SPA) using AngularJS (v1.x), you typically build a single HTML page and inject HTML fragments within this one page as the user navigates within your application. Navigation in AngularJS employs a mechanism called routing. This blog post explores how to perform navigation within a SPA using AngularJS routing.
This is the 3rd blog post in our series on AngularJS. The first part entitled Get Started with AngularJS shows you how to add AngularJS to a project. The second part, Build Lists of Data Using AngularJS, showed you how to build lists of data using hard-coded arrays of object literals. You should read those two blog entries first if you are not familiar with adding AngularJS to a project, don't know what a module or a controller is, or want to understand basic data binding. In this blog post, you will take the product page with the HTML table and call a Web API to retrieve product data. The data returned from the Web API builds the HTML table of products using the ng-repeat directive.
This is the 2nd blog post in our series on AngularJS. The first part entitled Get Started with AngularJS shows you how to add AngularJS to a project. You should read that blog first if you are not familiar with adding AngularJS to a project, don't know what a module or a controller is, or want to understand basic data binding. In this blog post you will build a couple of different types of lists of data using the ng-repeat directive. Building unordered lists and HTML tables is very straight-forward in AngularJS. As with anything in AngularJS, you need to have a variable defined on the $scope variable that contains the data you wish to display. Use the ng-repeat directive and data binding to iterate over the data and create bulleted list items or <tr> and <td> elements.
Sometimes the best way to learn a new technology is to start using it -- a little at a time. In this series of articles, I will show you how to use AngularJS in a step-by-step manner. You start with a simple example of adding AngularJS to a project and creating an AngularJS module and controller. Once you have the controller, you will see how to expose data so it can be bound to UI elements on your HTML page.
The Bootstrap panel classes allow you to create a bordered area on your web page. The panel classes give you a title area, a body area and a footer area. Most designers add buttons within the footer area to perform different actions on the information within the panel. Sometimes they add additional drop-downs or buttons within the body of the panel to reload the data or take action. While these work, sometimes you don't want to take up that real estate with those actions. Instead you can use the title area of the panel for these additions. This blog post will show you how to accomplish this.
When a user clicks on a button on a web page, there can be a delay between posting back to the server and the next action that happens on the screen. The problem with this delay is the user may not know they actually clicked on the button and tries to hit the button again. It is important to give immediate feedback to the user so they know that the application is doing something. This post will show you how to disable the button, display a pop-up message and gray out the background before the post back happens thereby providing feedback to our user.
In a previous post I talked about creating a push-button style of radio button for MVC. This blog post will show how to create the same push-button radio button using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.
In a previous blog post I talked about a simple push button style of radio buttons. This sample push button style can be applied to radio buttons too. This style of button is very easy to do with just some built-in Bootstrap styles and a little extra CSS.
In a previous post I talked about creating a push-button style of check box for MVC. This blog post will show how to create the same push-button check box using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.
I really enjoy working with Bootstrap and extending the styles to match what my customers want. Recently my customer wanted a simple push button style of check box and radio buttons. This turned out to be very easy to accomplish using the built-in Bootstrap styles and just a little extra CSS.
In the last blog post I showed you how to bind radio buttons to a boolean value. In this blog post we will look at how to bind to integer values. In certain business applications you might have the user select a single value from a list of items coming from a database. You want to display these options as radio buttons and then retrieve the value the user selects.
In the last blog post I showed you how to create a different look and feel for radio buttons. We used the button groups and glyph icons from bootstrap to build this different look. Now let's bind these radio buttons to a single boolean property in a class. Let's say you have a Product class that has an IsDiscontinued property that you would like a user to select between an 'Active' and a 'Discontinued' product.
As I previously published, the normal HTML check boxes and radio buttons just do not look good in bootstrap. Yes, bootstrap has a CSS class that will attempt to at least let render a radio button consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a radio button on a mobile phone can sometimes be a little challenging. In an MVC project we are doing for a client, they wanted the radio buttons to look more like buttons. Since we were already using bootstrap for this project we were able to create our own radio buttons using the 'btn-group' class from bootstrap. Let's walk through how we created these.
In my last two blog posts I showed you how to use the bootstrap 'btn-group' class to create check boxes that are a little nicer looking and easier to use on a mobile device. In addition I showed you how to bind check boxes to individual properties on an entity class. In this blog post you will learn how to create a set of check boxes from a collection of entity classes. You will also learn how to retrieve which check boxes were checked by the user and update the appropriate entity class in the collection with these values.
After the last post on how to create check boxes that use the bootstrap 'btn-group' to modify the look and feel of check boxes, I thought it would be good to show how to bind these check boxes using MVC. After all, you will most likely need to display check boxes based on data from a table.
The normal HTML check box just does not look good. Yes, bootstrap has a CSS class that will attempt to at least let it render consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a check box on a mobile phone can sometimes be a little challenging. In an MVC project we are doing for a client, they wanted the check boxes to look more like buttons. Since we were already using bootstrap for this project we were able to create our own check boxes using the 'btn-group' class from bootstrap. Let's walk through how we created these.
Friendly URls help you eliminate query string parameters and file extensions from the URL line. Friendly URLs are available in Web Forms and MVC. I see a lot of examples of using friendly URLs using MVC, but very few using Web Forms. So, I thought I would discuss how to use them in Web Forms. Actually, the process is almost identical.
One of my most widely-read blog posts had to do with creating a Login Windows in WPF that I wrote several years ago. I thought I would revisit this login screen with an updated version in Visual Studio 2012 and with an updated look and feel.
In my last blog posts I have been showing you how to create collection of entity objects using code that is custom for each table and object you create. Well, if you use a little reflection code you can shrink this code quite a bit. Yes, we all know that reflection is slow and probably should be avoided in most cases. What I have found out is that loading over 6200 product records into an entity collection still takes less than a second when using Reflection.
Let's now look at another advantage of using a DataTable. A lot of developers today are used to using LINQ. After loading data into a DataTable you can iterate using a foreach statement, or you can use LINQ to create a collection of entity objects. The DataRow class has an extension method called Field that allows you to check the data and return either a null or the real data value. Of course this means you have to use Nullable types for your properties in your class.
As discussed in my last two blog posts you have a variety of ways to create collections of Entity classes. Using a DataSet or DataTable is a little slower than using a DataReader, but in most cases the difference is in milliseconds so in a real world app this difference would not be a killer. For instance, in my sample data I was loading 6,261 records from the Product table discussed in the last blog post and it took 45 milliseconds on average to load those records into an entity collection using a DataTable. It took only 30 milliseconds on average to load the same entity collection using a DataReader. The rendering of that data would probably take longer than that, so you can choose which one you wish to use. Let's now look at one advantage of using a DataTable. A lot of developers today are used to using LINQ. After loading data into a DataTable you can iterate using a foreach statement, or you can use LINQ to create a collection of entity objects.
As discussed in the last blog post, it is a best practice to build entity classes. In the last post we filled a DataTable with Category data and then iterated over that DataTable to create a collection of Entity classes. In this blog post we will use a SqlDataReader to fill the Entity classes.
An Entity class has properties and typically no methods. An entity class is generally used to hold a single row of data from a table. So, if you have a Category table with the fields CategoryId, CategoryName and Description, you will create a Category class with properties of the same name.
One of the navigation mechanisms used in Windows 8 and Windows Phone is a Tile. A tile is a large rectangle that can have words and pictures that a user can click on. You can build your own version of a Tile in your WPF or Silverlight applications using a User Control. With just a little bit of XAML and a little bit of code-behind you can create a navigation system.
Some of our customers are asking us to give them a Windows 8 look and feel for their applications. This includes things like buttons, tiles, application bars, and other features. In this blog post I will describe how to create a button that looks similar to those you will find in a Windows 8 application bar.
Instead of a normal button with words, sometimes you want a button that is just graphical. Yes, you can put an Image control in the Content of a normal Button control, but you still have the button outline, and trying to change the style can be rather difficult. Instead I like creating a user control that simulates a button, but just accepts an image. Figure 1 shows an example of three of these custom user controls to represent minimize, maximize and close buttons for a borderless window. Notice the highlighted image button has a gray rectangle around it. You will learn how to highlight using the VisualStateManager in this blog post.
In any application, you want to keep the coupling between any two or more objects as loose as possible. Coupling happens when one class contains a property that is used in another class, or uses another class in one of its methods. If you have this situation, then this is called strong or tight coupling. One popular design pattern to help with keeping objects loosely coupled is called the Mediator design pattern. The basics of this pattern are very simple; avoid one object directly talking to another object, and instead use another class to mediate between the two. As with most of my blog posts, the purpose is to introduce you to a simple approach to using a message broker, not all of the fine details.
You go to great pains to add styles, colors, gradients, and a really cool look and feel to your WPF application only to have that ruined by the standard Windows message box as shown in Figure 1. What would be nice is if Microsoft offered a styled message box. But, they don't. So it is up to us to create a window that we can style and do whatever we want with it.
In Figure 1 you can see examples of the standard WPF Button controls. You can add a drop shadow and you can change the color, but you can't change much else without creating a whole new control template. For example, you are unable to modify the BorderBrush or the BorderThickness properties of the Button control. Additionally you might want to use some other animation than the default, which again requires you to change the control template. Sometimes all you want to do is to just have some simple buttons where you can modify the border brush and the thickness and have different color options via styles. I have found that instead of working with the whole control template thing, just creating a User Control is sometimes much easier.
All too often I see people using switch/Select Case statements when using a Factory pattern. The problem with this is if you wish to add the ability to instantiate a new class in your Factory, you need to add a new 'case' statement, re-compile the code and redeploy that DLL back out to your client machines, or your server(s). Another way to implement a Factory pattern is to use Reflection and Interfaces to dynamically create an instance of a class. This blog post will show you how to use an XML file, an Interface and the Assembly class to dynamically load a list of assemblies and classes to load into an application at runtime.
Earlier this year I blogged on how to use the WPF Tree View to view multiple levels. Since then I have had many requests to do the same in WPF. Luckily, the code is almost identical. Here is a blog post on using the WPF Tree View that has multiple levels.
In previous blog posts I have discussed how to use XML files to store data in your applications. I showed you how to read those XML files from your project and get XML from a WCF service. One of the problems with reading XML files is when elements or attributes are missing. If you try to read that missing data, then a null value is returned. This can cause a problem if you are trying to load that data into an object and a null is read. This blog post will show you how to create extension methods to detect null values and return valid values to load into your object.
Many of us have implemented logging in our ASP.NET, Windows Forms and WPF applications, so why shouldn't you do the same in your Silverlight applications? Well, you should. In this blog post I will show you one approach on how you might perform this logging. The class I will use is called PDSALoggingManager. This class has a method named Log() you use to publish data into a log file in your Silverlight application. A method named LogException() is also available for logging information about any exceptions that happen on the client-side of your Silverlight application. Let's take a look at the usage of the PDSALoggingManager class.
In a Silverlight application we are building for a client, they wanted an About screen that would display system information such as the current URL, the operating system name and version, the product name and various other information. In the same application, we built a logging system to gather this same information and write that information to a file to help developers troubleshoot issues. We decided to create a Silverlight class that would gather the information.
After my previous blog post, I realized that using SQL strings is not a great way to do things. Sometimes we start blogging too quick and then realize our mistakes after. But, no big deal, live and learn... I am going to now rewrite this application and use some lambda expressions to solve the problems inherit with concatenating strings to SQL statements; namely escaping a single quote and SQL Injection attacks.
I have been helping a client with a Silverlight application and one of his requirements was to allow his users to be able to query 1 to 5 fields and use different operators for each field. For example, they can choose to search for a Company Name that 'Starts With' a certain value and also search for an Email field that 'Contains' another value.
There are many examples of the Silverlight Tree View that you will find on the web, however, most of them only show you how to go to two levels. What if you have more than two levels? This is where understanding exactly how the Hierarchical Data Templates works is vital. In this blog post, I am going to break down how these templates work so you can really understand what is going on underneath the hood.
One of the reasons I love teaching is because of the questions that I get from attendees. I was giving a presentation at DevConnections and was showing a collection of Product objects. When I hovered over the variable that contained the collection, it looked like Figure 2. As you can see in the collection, I have actual product names of my videos from www.pdsa.com/videos being displayed. To get your data to appear in the data tips you must override the ToString() method in your class.
Like many people today, we are exploring HTML 5 for use in web applications. While not really ready for prime-time on its own at this point, it can definitely be used in combination with tools like Modernizr (www.Modernizr.com). One of the first things you might do is create a home page with a simple navigation system on it. This blog post will show you one way to accomplish this.
Many developers use the ConfigurationManager class to retrieve settings from the .Config file of your application. This blog posts shows you how to put your own wrapper class around this class to allow you flexibility in the future.