Using libman for ASP.Net Core projects

This here. Long story short -- righth click on the folder where the script will go, Add -> Client-side library.

Fixing "Read More" link to be accessible to screen readers

Just a reminder for myself, to make links accessible to screenreaders, use the following template or a variation of thereof:

    <a href="..."
      <span data-bind="text: regularLinkText">
      <span data-bind="text: accessibleLinkText" class="sr-only"> <!-- this will be the text for screen reader and not visible to naked eye -->
    </a> 

The problem I kept having was that I set the data-bind="text: linkTextHere" on the actual <a> tag, and that wiped out whatever other controls I nested inside.

Skip a link while tabbing over a web page or access a link via tab

One way of doing it is to remove the href element of the link.

In contrast, if a link cannot be reached to while tabbing over a page, adding an

    href="javascript:void(0);" 

would make the link reachable via tabbing. Moreover, if a 'click' event is attached to the link, the element will respond to the Enter key press despite the fact that the 'keyup' (or other key type event) is not attached.

Visual Studio snippet for a TestMethod with a proper naming convention (naming convention was proposed by Roy Osherove)

Here it is, see this post for details on how to import it into your Visual Studio. Enjoy!

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets
    xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Test method with a naming convention</Title>
      <Author>Roy Osherove, yevgeller</Author>
      <Description>Test method with the following naming convention: method under testing, condition, and expected results. The naming convention was taken from Roy Osherove's book "The Art of Unit Testing"</Description>
      <Shortcut>testmc</Shortcut>
    </Header>
    <Snippet>
      <Imports>
        <Import>
          <Namespace>
            Microsoft.VisualStudio.TestTools.UnitTesting;
          </Namespace>
        </Import>
      </Imports>
      <Declarations>
        <Literal>
          <ID>NameOfMethodUnderTest</ID>
          <ToolTip>Replace with the method that you want to test</ToolTip>
          <Default>YourMethod</Default>
        </Literal>
        <Literal>
          <ID>ConditionYouAreTesting</ID>
          <ToolTip>Condition that you want to test</ToolTip>
          <Default>IsNull</Default>
        </Literal>
        <Literal>
          <ID>ExpectedResult</ID>
          <ToolTip>The result that you expect</ToolTip>
          <Default>NullArgumentException</Default>
        </Literal>
      </Declarations>
        <Code Language="csharp">
          <![CDATA[          
          [TestMethod]
          public void $NameOfMethodUnderTest$_$ConditionYouAreTesting$_$ExpectedResult$()
          {

          }
          ]]>
        </Code>
      </Snippet>
  </CodeSnippet>
</CodeSnippets>

Timer to count up in JavaScript

Here is my implementation, nothing original or extraordinary. Putting it here for future reference.

        
        var totalSeconds = 0;
        var timer;

        function startTimer() {
            timer = setInterval(function () {
                totalSeconds++;
                var t = document.getElementById("time2"); //or other place where to display data
                t.innerHTML = displayTimer(totalSeconds);
            }, 1000); 
        }

        function stopTimer() {
            clearInterval(timer);
        }

        function displayTimer(numberOfSeconds) {
            var result = "";

            var hours = Math.floor(numberOfSeconds / 3600);
            if (hours > 0) { result += hours + " h "; }

            var minutes = Math.floor((numberOfSeconds - (hours * 3600)) / 60);
            if (minutes > 0) { result += minutes + " m "; }

            result += (numberOfSeconds % 60 + " s");

            return result;
        }

To remember: declaring an inline array for splitting strings

This is how to declare an inline char array (C#) to split the string into multiple parts:

List result = inputLine.Split(new[] {'%'}, StringSplitOptions.RemoveEmptyEntries).ToList();

Tips for easy class visualization during debugging (Visual Studio/C#)

Note to self, either put this above the class declaration

[DebuggerDisplay("{Id}: {Name}")]
public class Foo
{
  public int Id {get;set;}
  public string Name {get;set;}
  ...
}

or override ToString() method :) source

Entity Framework migration comes up blank

I'm working on an MVC project with code-first Entity Framework SQL Server database and my initial migration script kept coming up as blank. I ran

Add-Migration InitialCreate

command to no avail. I then (consulted stackoverfow.com and) ran

Add-Migration "InitialMigration" -verbose -ProjectName "MyProjectName" -Force

command and that did not help.

This post helped a lot. As it turned out, I had a ghost record in my MigrationHistory table. I cleared it and everything worked.

C# quickly convert array of incoming data

Thanks to a user from codeabbey.com, here is a nifty trick to convert a bunch of data "on the fly".

int[] a = Array.ConvertAll<string, int>(Console.ReadLine().Split(' '), int.Parse);

Using MVVM to update a property on an object.

Alright, so a fresh new solution. Adding folders: Models, ServiceClasses, ViewModels, and our view should technically go into the Views folder, but I'll make it simple for this examle and use the default MainPage.xaml that already exists in the root folder of the solution.

Adding the model class, Model.cs into the /Models folder. For the simplicity, there are only two properties.

using System;
using System.ComponentModel;

namespace PWApp.Models
{
    public class Model1
    {

        public string PropertyString { get; set; }
        public int PropertyInt { get; set; }
    }
}

Next, let's add these classes into /ServiceClasses folder:

using System;
using System.Windows.Input;

namespace PWApp.ServiceClasses
{
    public class DelegateCommand : ICommand
    {
        Func<object, bool> canExecute;
        Action<object> executeAction;

        public DelegateCommand(Action<object> executeAction)
            : this(executeAction, null) { }

        public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecute)
        {
            if (executeAction == null)
            {
                throw new ArgumentNullException("executeAction");
            }
            this.executeAction = executeAction;
            this.canExecute = canExecute;
        }

        public bool CanExecute(object parameter) //can command execute in its current status?
        {
            bool result = true;
            Func<object, bool> canExecuteHandler = this.canExecute;
            if (canExecuteHandler != null)
            {
                result = canExecuteHandler(parameter);
            }
            return result;
        }

        public event EventHandler CanExecuteChanged; //occurs when changes occur that affect whether or not the command should execute

        public void RaiseCanExecuteChanged()
        {
            EventHandler handler = this.CanExecuteChanged;
            if (handler != null)
            {
                handler(this, new EventArgs());
            }
        }

        public void Execute(object parameter) //Method to call when the command is invoked
        {
            this.executeAction(parameter);
        }
    }
}

Class "ShowConverter" is what we will use to show or hide the data based on their values. If it is not clear now how it works, it'll become all clear in the end. Something worth noticing here is that we are extracting the "value" parameter and converting it to an integer, and we are doing the same thing to the "parameter" object. If the values are the same, then whatever we are tying up to this is visible, otherwise it is hidden.

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace PWApp.ServiceClasses
{
    public class ShowConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            int i = System.Convert.ToInt32(value);
            int j = System.Convert.ToInt32(parameter);

            if (i == j) return Visibility.Visible;

            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

Next, adding items to the /ViewModels folder. Starting with the BaseViewModel class, it implements the events that we could use for all the other ViewModels

using System;
using System.ComponentModel;

namespace PWApp.ViewModels
{
    public class BaseViewModel : INotifyPropertyChanged
    {        
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Now, the actual ViewModel. This is where the magic is happening.

using System;
using System.Windows.Input;
using PWApp.Models;
using PWApp.ServiceClasses;
using PWApp.ViewModels;

namespace PWApp.ViewModels
{
    public class PWViewModel : BaseViewModel
    {
        public PWViewModel()
        {
            m1 = new Model1();
            m1.PropertyInt = 1;
            m1.PropertyString = "String 1";

            _alterM1Command = new DelegateCommand(this.AlterM1CommandAction, this.CanAlterM1); //add this line to wherever you initialize your commands
        }

        private Model1 m1;
        public Model1 M1
        {
            get { return m1; }
            set
            {
                if (m1 == value) return;
                m1 = value;
                OnPropertyChanged("M1");
            }
        }

        DelegateCommand _alterM1Command;
        public ICommand AlterM1Command { get { return _alterM1Command; } }
        private void AlterM1CommandAction(object obj)
        {
            int i = M1.PropertyInt;

            Model1 backup = new Model1 { PropertyInt = M1.PropertyInt, PropertyString = M1.PropertyString };
            //I am creating a whole new copy of the object because just changing the property does not change
            //the value of the object, and does not fire the OnPropertyChanged event
            if (++i == 3)
                M1 = new Model1 { PropertyInt = 0, PropertyString = backup.PropertyString };
            else
                M1 = new Model1 { PropertyInt = i, PropertyString = backup.PropertyString };
        }

        private bool CanAlterM1(object obj)
        {
            return true;
        }
    }
}

Now, the view. The actual face of the program. First thing to notice is the xmlns:service line in the Page tag. That declares the namespace that we can use, and we declare it to use the converter. The next line is Page.Resources tag, actually what's happening inside it. First declaration is me being lazy -- I set the FontSize of all the TextBoxes at once to 24. The second item is our declaration of the ShowConverter. I declared the namespace in the Page tag to be able to access the file, I actually tell the system what it is under the Resources section. I actually use the file to toggle visibility of an item in the following manner:

Visibility="{Binding M1.PropertyInt, Converter={StaticResource sc}, ConverterParameter=0}"

Here is the entire view. If you copy it into your app, don't forget to replace the "PWApp" namespace with your own.

<Page
    x:Class="PWApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PWApp"
    xmlns:service="using:PWApp.ServiceClasses"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="24" />
        </Style>
        <service:ShowConverter x:Key="sc" />
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Command="{Binding AlterM1Command}" Content="Alter M1" Margin="20, 60, 12, 12" />
        <Button Command="{Binding AlterM2Command}" Content="Alter M2" Grid.Column="1" Margin="12, 60, 12, 12" />
        <Button Command="{Binding AlterM3Command}" Content="Alter M3" Grid.Column="2" Margin="12, 60, 12, 12" />
        <TextBlock Text="M1:" Grid.Row="1" Margin="12"/>
        <Border BorderBrush="Red" Grid.Row="1" Grid.Column="1" BorderThickness="2" Padding="10" Margin="12"><TextBlock Text="{Binding M1.PropertyInt}" Margin="12" 
                   Visibility="{Binding M1.PropertyInt, Converter={StaticResource sc}, ConverterParameter=0}" /></Border>
        <Border BorderBrush="Red" Grid.Row="1" Grid.Column="2" BorderThickness="2" Padding="10" Margin="12"> <TextBlock Text="{Binding M1.PropertyInt}" Margin="12"
                   Visibility="{Binding M1.PropertyInt, Converter={StaticResource sc}, ConverterParameter=1}" /></Border>
        <Border BorderBrush="Red" Grid.Row="1" Grid.Column="3" BorderThickness="2" Padding="12" Margin="12"><TextBlock Text="{Binding M1.PropertyInt}" Margin="12"
                   Visibility="{Binding M1.PropertyInt, Converter={StaticResource sc}, ConverterParameter=2}" /></Border>
        <TextBlock Text="{Binding M1.PropertyString}" Grid.Row="1" Grid.Column="4" Margin="12" />
    </Grid>
</Page>

Finally, setting the DataContext of the MainPage, tying up the View to the ViewModel:

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.DataContext = new PWViewModel();
        }
    }

Pull data by date from MS Access using C# no records returned

I am playing with MS Access database and a WPF app. I generated a bunch of data and the C# DateTime values of, say, 6/27/2010, inserted in the database turned out as 6/27/2010 12:00:00. Then the funny thing happened, I was trying to pull the following query:

using(OleDbCommand cmd = "SELECT * FROM Table1 WHERE MyDate = ?")
{
  cmd.Parameters.Add("@val1", OleDbType.Date).Value = myDate;
  try
  {
    conn.Open();
    ...
  }
}

And it just did not pull any rows. I tried running it just in Access, and it worked fine in the query designer, I was getting rows back. This puzzled me until I read this KB. I then ran the following query in MS Access:

SELECT DISTINCT MyDate, CDbl(MyDate) FROM Table1 ORDER BY 1

And I got some interesting results:

Expr1000         Expr1001
6/27/2010         40356
6/27/2010 12:00:00 40356.5

So if a datae is stored as just 6/27/2010, it's a midnight of the beginning of the day. But if it has 12:00:00 time suffix, it is a noon of that day, so it's not the same as midnight and my query above would not pull it. But the funny thing is is that when I created data, I only specified the date part and nothing on time, so something is happening between C# and MS Access that C# sends 12:00:00 as midnight and MS Access understands it as noon. I even tried the following to no avail:

cmd.Parameters.Add("@val1", OleDbType.DBDate).Value = myDate;
cmd.Parameters.Add("@val1", OleDbType.Date).Value = myDate.Date;
cmd.Parameters.Add("@val1", OleDbType.Date).Value = new DateTime(myDate.Year, myDate.Month, myDate.Day);

Same thing, no results from the command, while the query in MS Access worked just fine.

A workaround:

using(OleDbCommand cmd = "SELECT * FROM Table1 WHERE MyDate BETWEEN ? AND ?")
{
  cmd.Parameters.Add("@val1", OleDbType.Date).Value = myDate.Date;
  cmd.Parameters.Add("@val2", OleDbType.Date).Value = myDate.Date.AddDays(1);
  try
  {
    conn.Open();
    ...
  }
}

And that works.

XAML: change an element's property based on another element's property

Another one for the power and beauty of XAML. This one allows one to change an element's state based on another element's state. Example:

<CheckBox x:Name="chb1" Content="Check/Uncheck this" />
<Button IsEnabled="{Binding ElementName=chb1, Path=IsChecked}" Content="Click here" />

Code snippet for MVVM command in a ViewModel

Since code snippets are not that hard to do, here is another one. This one gets all the plumbing for a command in a ViewModel, I used DelegateCommand class to abstract all the INotifyPropertyChanged functionality. See my other posts on the subject. Call this one in VisualStudio by its shortcut, dcmvvm.

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets
    xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Plumbing for an MVVM DelegateCommand</Title>
      <Author>yevgeller</Author>
      <Description>Plumbing for an MVVM DelegateCommand for use in a ViewModel</Description>
      <Shortcut>dcmvvm</Shortcut>
    </Header>
    <Snippet>
      <Declarations>
        <Literal>
          <ID>cmd1</ID>
          <ToolTip>Prefix for a private variable that holds command name.</ToolTip>
          <Default>your</Default>
        </Literal>
        <Literal>
          <ID>cmd2</ID>
          <ToolTip>Prefix for a property Name that exposes the command to the View.</ToolTip>
          <Default>Your</Default>
        </Literal>
      </Declarations>
      <Code Language="csharp">
        <![CDATA[
        DelegateCommand _$cmd1$Command;
        public ICommand $cmd2$Command { get { return _$cmd1$Command; } }
        private void $cmd2$CommandAction(object obj)
        {
            throw new NotImplementedException();
        }
        //add the following line to ViewModel constructor or wherever else you initialize your commands:
        _$cmd1$Command = new DelegateCommand(this.$cmd2$CommandAction, this.Can$cmd2$);
        private bool Can$cmd2$(object obj)
        {
            return true;
        }
      ]]>
      </Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

Code snippet file for a property that calls for OnPropertyChanged event

With minimal changes, this snippet will also work for PropertyChanged event. How to use:

1. Save the following contents into a .snippet file
2. Visual Studio -> Tools -> Code Snippets Manager (or Ctrl+K, Ctrl+B)
3. Import, find your file
4. While working on another ViewModel, type in propopc and enjoy

Note to self: while working on the next snippet, if variables don't show up in the result, make sure that they are included in the <Snippet> section

Helpful resource 1, helpful resource 2.

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets
    xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Property with a call to OnPropertyChanged</Title>
      <Author>yevgeller</Author>
      <Description>Property calling OnPropertyChanged method</Description>
      <Shortcut>propopc</Shortcut>
    </Header>
    <Snippet>
      <Declarations>
        <Literal>
          <ID>var</ID>
          <ToolTip>Replace with a private variable.</ToolTip>
          <Default>_privateVar</Default>
        </Literal>
        <Literal>
          <ID>type</ID>
          <ToolTip>Replace with a property type.</ToolTip>
          <Default>string</Default>
        </Literal>
        <Literal>
          <ID>propName</ID>
          <ToolTip>Replace with a property name.</ToolTip>
          <Default>MyProperty</Default>
        </Literal>
      </Declarations>
      <Code Language="csharp">
        <![CDATA[
  private $type$ $var$;
         public $type$ $propName$
         {
              get { return $var$; }
              set
              {
                  if ($var$ == value) return;
                  $var$ = value;
                  OnPropertyChanged("$propName$");
              }
         }
      ]]>
      </Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

One of the uses for Visual Studio's Output window

I am generating some dummy data for testing every time I build and run a program, and I need to look something up every time. Being a lazy programmer, I was wondering if there is a way in Visual Studio to display something during compile time. I found that if execute this code:

System.Diagnostics.Debug.WriteLine("Hello, World!");

Then it will be display along with a bunch of other compilation info in the Output Window. Oh, yeah, Output window in Visual Studio is also extremely useful for displaying XAML binding information.

ASP.Net Web API with Angular.js front-end example

I wanted to learn about Microsoft ASP.Net Web API and how I could use Angular.js framework as a front-end. I built a little application that demonstrates the basics.

This app was heavily influenced by this tutorial (especially parts 3-5), and this book's chapter on Web API.

The code is available on Github here.

The project has two controllers: HomeController and RecordController. HomeController is the ASP.Net MVC controller while RecordController deals with Web API. The Web API data infrastructure is in /Models folder. The script file is in /Scripts/Home/record.js. One last thing I need is a view, so there is a view RecordsApi.cshtml under /Views/Home

The view has all the regular angular directives. It uses /Scripts/Home/records.js file which has all the Angular.js stuff. I use $http service to communicate with the server.

In short, ajax calls are replaced with calls to the corresponding methods of Angular's $http service. The view is created as usual, API controller is the same as it would be for a regular Web API service, and models are done in the same way. The only difference you need to make if you want Angular.js front-end is to introduce angular script in the view and put all the directives in place.

Comments/questions are welcome.

Another simple MVVM tutorial for Windows Phone explained

I will take another attempt to explain the use of MVVM on Windows Phone. I already tried it before, but this time code is available on GitHub. Clone the project and follow along with my explanations.

This time we are building a registration database. The app will be tracking people's names along with gender.

1. Model

There is a class called "Person" in the Models folder. For the sake of simplicity, the app will track the name and gender.

2. View

There is MainPage.xaml file in ViewModels folder that is the front-end of the app (to change startup page for a Windows Phone app, go to Properties/WMAppManifest.xml and change it in "Navigation Page" field to whatever you need; the sample app already has it set up properly). There is a textbox for name, and radiobuttons to select a gender. The app must only allow to register when a name is provided and a gender is selected. So it can either provide feedback to the user when not all data is supplied for registration, or we can disable the Register button until all data is present.

There is a tricky part here. TextBox's text property originally had the following binding:

Text="{Binding UserName, Mode=TwoWay}"

The problem with that is that the Text property is updated in the view model only after textbox loses focus. To mitigate the situation, we can use the solution provided by Charles Petzold in his "Programming Windows Phone 7" book:

<!-- TextBox full declaration in XAML -->
<TextBox Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=Explicit}" 
                     x:Name="boundTextBox" 
                     TextChanged="boundTextBox_TextChanged" />

//and then, the event in the code-behind file for the View:
private void boundTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
  TextBox txtbox = sender as TextBox;
  BindingExpression bindingExpression = txtbox.GetBindingExpression(TextBox.TextProperty);
  bindingExpression.UpdateSource();
}

As a result of this modification, every time a key is pressed in that TextBox, the property in our view model will be updated. One can argue that the true MVVM has no data in the code-behind files and this event might violate that principle, but the reality is that sometimes it's not easily possible. In addition, one of the main benefits of MVVM is testability. Having such an event in the code-behind of the view only affects internal workings of the app and does not affect data or business logic, so testability is very much preserved intact.

Now let's look a little closer at bindings. RegisterViewModel exposes properties and commands, which the view uses to display data or react to user input. For example, RegisterViewModel exposes a property named ProspectiveRegistration, which it calculates as as combination of name and gender:

public string ProspectiveRegistration
{
    get
    {
        string ret = this.UserName;
        ret += this.UserName.Length > 0 ? ", " : "";

        if (this.IsALady)
            ret += "Lady";
        if (this.IsAGentleman)
            ret += "Gentleman";

        return ret;
    }
}

The view binds this property to a TextBlock's Text property in the following manner:

<TextBlock Text="{Binding ProspectiveRegistration}" />

How does the view know that the property was updated? The answer to that lies in the setters of the all the other properties used in ProspectiveRegistration (UserName, IsALady, IsAGentleman). They all have the following line of code:

this.OnPropertyChanged("ProspectiveRegistration");

This line of code is the magic that updates the view with the new value of the property.

The example above was somewhat simple because the view only displayed the value of a property that belongs to the view model. What if the view needs to send data back to the ViewModel? Let's look at how the gender radiobuttons are declared:

<RadioButton Content="Lady" IsChecked="{Binding IsALady, Mode=TwoWay}" GroupName="genderGroup" />

IsChecked property is declared as a two-way property, and not only it displays the state of the property in the view model, but it also sends its value back to the view model. This is one of the ways how the view propagates data to the view model.

3. ViewModel

The view model for the project is the class called RegisterViewModel and it resides in the ViewModels folder along with the class called ViewModel. ViewModel class is the parent class for RegisterViewModel and it has the plumbing for INotifyPropertyChanged interface. It also has plumbing for navigation since it may be a bit tricky if using MVVM, but there are usage instructions.

RegisterViewModel.cs

A couple of interesting points here. First, the data store is an ObservableCollection. The difference between an ObservableCollection and List is that ObservableCollection lets know when it changed. The app conveniently subscribes to the CollectionChanged event to update properties bound to the view.

Next, let's look at the register command. Declaration:

private DelegateCommand _registerCommand;

It is an instance of a DelegateCommand. What is a DelegateCommand? Any command bound to the view must implement ICommand interface. DelegateCommand wraps up all the members of the ICommand interface so that the app does not have to re-implement them every time. DelegateCommand.cs can be found in ServiceClasses folder.

_registerCommand as it is declared in constructor of the RegisterViewModel:

_registerCommand = new DelegateCommand(this.RegisterCommandAction, CanRegister); //initialize command

Method RegisterCommandAction is where the registration actually happens. This is what the command is supposed to do:

//Registration procedure
private void RegisterCommandAction(object obj)
{
    people.Add(new Person
    {
        Name = this.UserName,
        Gender = this.IsALady ? "Lady" : "Gentleman"
    });
    this.UserName = "";
    this.IsALady = false;
    this.IsAGentleman = false;
}

CanRegister method defines whether the command can execute or not. Here is what it looks like:

//Data consistency conditions that must be satisfied for a successful registration
private bool CanRegister(object arg)
{
    return (IsALady || IsAGentleman) && UserName.Length > 0;
}

This method enables/disables the register button in the view without having to bind the IsEnabled property of the button on the view. By the way, IsEnabled property can be managed by binding this property on the view to a boolean property on a view model. Pretty much any property on the view can be bound to a property on the view model, sometimes one might need to use a converter class (any class that implements an IValueConverter interface).

There is just one piece missing. The app somehow needs to know when CanRegsiter changes. For that, the DelegateCommand exposes a method called RaiseCanExecuteChanged(). Every time a property changes in the RegisterViewModel, not only the app has to notify that the property value changed, but it also has to make sure we can (or cannot) register. Here is, for example, an implementation of the UserName property in the view model:

private string _userName;
public string UserName
{
    get
    {
        if (_userName == null)
            _userName = "";
        return _userName;
    }
    set
    {
        if (_userName == value)
            return;
        _userName = value;
        this.OnPropertyChanged("UserName");
        this.OnPropertyChanged("ProspectiveRegistration");
        _registerCommand.RaiseCanExecuteChanged(); //checking on RegisterCommand to see if it can execute
    }
}

4. Testing

Now you can see that MVVM decouples View from ViewModel making it easy to test ViewModels. Visual Studio (even Express versions) provides tools for testing. A couple of test methods included with the Test project give a basic idea of how testing can go.

5. Conclusion

Hopefully this article explained the usage of MVVM pattern on Windows Phone. Again, the code is available on GitHub, feel free to ask questions and/or leave comments

UPDATE 3/16/2014:

I updated the code in the repository to include a technique where a Text propery (or another one for that matter) can be used as a CommandParameter. See the code for full example, but in short, here is what you need to do:

In the View, I added a TextBox, gave it an x:Name property of "typeSomethingHere" (that's the second named control on the entire page). Then I added a Button, and I assigned the following properties to it besides Content and position on the page:

Command="{Binding DisplayInputWithoutAdditionalPropertyCommand}"
CommandParameter="{Binding ElementName=typeSomethingHere, Path=Text}"

The Command property is just as usual, but the CommandParameter property shows the beauty and flexibility of XAML, it grabs the Text property from the TextBox.

The rest are details, I create a string property ShowWhatWasTyped and it displays what was typed.

What's the bottom line here? I could have bound the Text property of a typeSomethingHere TextBox and use it to get text, but instead I taught the button to grab Text directly from the TextBox and pass it to the ViewModel. This works well only if you need to pass one value into a method quickly. You can, of course, use other properties of the ViewModel in the method.

Some notes on Angular.js

I have almost finished (read: abandoned) a project using Angular.js and here are some notes of little things that I would like to keep here so that I know where to find them next time.

This code snippet changes CSS class depending on the variable state:

ng-class="{CSSClassName: scopeVariable1 == scopeVariable2}"

The following regular expression finds the use of all scope variables that does not start with the letter "s":

\$scope\.[^s]+

Let's say there is a keyboard event, and the code needs to know what key was pressed. The following statement will provide the keycode to the function:

... ng-keypress="yourEventName($event.keyCode, otherArgsIfAny)" ...

Also, gotta remember that in JavaScript, when a variable's value is 'null', it means that there is such variable, but it has no value; when value is 'undefined' it means that there is no such variable.

In JavaScript, only the getMonth() function is zero-based (so December is month number 11), all other methods to get elements of a date are 1-based. To get year, use the getFullYear() function.

A new Date can be instantiated from milliseconds. For example:

var today = new Date(); //gets the date and time at the moment
var milliSec = Date.now(); //gets the number of milliseconds since epoch
//to reconstruct the date from millisec, just do this:
var someDate = new Date(millisec);

ng-show/ng-hide directives are pretty awesome to show/hide content:

...ng-show="oneVariable == anotherVariable"...

Or a function can be plugged in or a field or a string (if it is empty, then it would return false, otherwise -- true) or whatever else returns a boolean after evaluation.

Ordering a collection using Angular.js seems to be tricky. First of all, it only sorts arrays as of now. I had an array of object literals like so:

$scope.data = [{one:'one',two:'two'},{one:'three',two:'four'},{one:'five',two:'six'}];

and this sort expression worked for me:

<div ng-repeat = "a in data|orderBy:['one']">{{a}}</div>

You can access the ordinal number of the variable from within ngRepeat directive this way:

{{$index}}

Read more about it on Angular.js docs site.

The statement above becomes useful, if the app needs to convert an array into a comma- (or other delimiter) separated string. Here is a way to do it:

<div ng-repeat="a in itemCollection">
  {{a.someProperty}}
  <span ng-show="$index < itemCollection.length - 1">, </span>
  <span ng-show="$index >= itemCollection.length -1">. </span>
</div>

Let's say itemCollection has 3 items. $index is a 0-based variable, so for the first two items ($index is 0 and 1 and both times is less than three, so the span with a comma will be shown and the span with a period will be hidden. Then, on the last item $index equals to 2, which is >= to the (itemCollection.length-1), so the span with a comma will be hidden and the span with a dot will show up.

Select all text in TextBox using C#

Here is what worked for me today:

    txtContent.Focus();
    txtContent.SelectionLength = txtContent.Text.Length;

It does not work if the TextBox does not have focus. There are other solutions, but this one is quick and easy.

JavaScript: convert milliseconds to a date

Pretty easy, as it turns out:

  var dt = new Date(milliseconds);

And then one can use the standard Date methods available here. JSFiddle.