venerdì 17 ottobre 2014

Input (HTML) validation calling a WEB API method

AngularJS v. 1.2.14, WEB API (.NET Framework 4.51)

This is my first post on AngularJS, in my opinion a very beautiful and powerful framework for developing web application.
My first little problem is to validate the user fiscal code by calling a WEB API method and return a feedback to the user. Naturally I suppose that development environment is correctly configured.

Therefore, in my ASP.NET web application, in the Site.css I define this style:

.ng-invalid.ng-dirty {
  border-color: #FA787E;
}

.ng-valid.ng-dirty {
  border-color: #78FA89;
}


Then in my html page, I add the fiscal code input:

<div ng-controller="RegisterUserController as registerUser">
    <div class="form-container">
        <form name="form" class="form-horizontal" ng-submit="form.$valid && registerNewUser()" novalidate>
            <div class="row">
                <div class="col-md-7 col-md-offset-2">
<div class="form-group">
                        <label for="inputCodiceFiscale" class="col-md-4 control-label">Fiscal code</label>
                        <div class="col-md-8">
                            <input name="inputFiscalCode" type="text" class="form-control" id="inputCodiceFiscale" ng-model="codiceFiscale"
                                   required placeholder="Codice fiscale" ui-validate="'checkFiscalCode($value)'"
                                   ng-class="{true: 'ng-invalid ng-dirty'}[submitted && form. inputFiscalCode.$invalid]">
                            <span ng-show='form.inputFiscalCode.$invalid'>Fiscal code is not valid!</span>
                        </div>
                    </div>
<div class="form-group">
                        <div class="col-md-offset-6 col-md-4">
                            <button type="submit" class="btn btn-primary" ng-click="submitted=true">Register</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


Therefore this the javascript code. I use the $http service (http://www.angularjshub.com/examples/servercalls/httpservice/), that is an asynchronous service and for this reason I create a service factory with a promise:

(function() {
  var app = angular.module('verifyUser-registerUser', []);
app.controller('RegisterUserController', [
    '$scope', '$http', 'checkFiscalCodeService', function($scope, $http, checkFiscalCodeService) {


      $scope.checkFiscalCode = function(value) {
        if (value != null && value.length === 16) {
          var promise = checkFiscalCodeService.checkCode(value);
          promise.then(
            function (response) {
              if (response.data === 'true') {
                $scope.form.inputFiscalCode.$setValidity('validator', true);
              }             
            },
            function (errorResponse) {
              $scope.form.inputFiscalCode.$setValidity('validator', false);
            });
        }
      }
    }
  ]);

  app.factory('checkFiscalCodeService', function($http) {
    return {
      checkCode: function(value) {
        return $http.get('./api/{Controller}/CheckFiscalCode', {
          params: {
            fiscalCode: value
          }
        });
      }
    }
  });
 
})();


This is the result:



See you to the next time!

martedì 30 settembre 2014

giovedì 4 settembre 2014

Set the DecodePixelHeight property (Binding) of the BitmapImage object from the configuration file

C# .NET Framework 4.0 (WPF - MVVM)

In my MVVM WPF application, I want to resize a bitmap image with values stored in app.config. Therefore, for doing this I’ve tried to bind the Image.Height property and the BitmapImage.DecodePixelHeight directly to my ViewModel, like in this way:

In app.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>   
  <appSettings>   
    <add key="DocumentsToBeFiledImageHeight" value="240"/>
    <add key="DocumentsToBeFiledImageDecodePixelHeight" value="240"/>
  </appSettings
</configuration>

Then in my ViewModel I’ve added these properties 

    private int _documentsToBeFiledImageDecodePixelHeight;
    public int DocumentsToBeFiledImageDecodePixelHeight
    {
      get { return _documentsToBeFiledImageDecodePixelHeight; }
      set
      {
        if (value != _documentsToBeFiledImageDecodePixelHeight)
        {
          _documentsToBeFiledImageDecodePixelHeight = value;
          RaisePropertyChanged(DocumentsToBeFiledImageDecodePixelHeightPropertyName);
        }
      }
    }

    private double _documentsToBeFiledImageHeight;
    public double DocumentsToBeFiledImageHeight
    {
      get { return _documentsToBeFiledImageHeight; }
      set
      {
        if (value != _documentsToBeFiledImageHeight)
        {
          _documentsToBeFiledImageHeight = value;
          RaisePropertyChanged(DocumentsToBeFiledImageHeightPropertyName);
        }
      }
    }

and this code

DocumentsToBeFiledImageHeight = Convert.ToDouble(ConfigurationManager.AppSettings["DocumentsToBeFiledImageHeight"]);

DocumentsToBeFiledImageDecodePixelHeight = Convert.ToInt32(ConfigurationManager.AppSettings["DocumentsToBeFiledImageDecodePixelHeight"]);

Then in the XAML I’ve added this code

<Image Grid.Row="0" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.DocumentsToBeFiledImageHeight, UpdateSourceTrigger=PropertyChanged}"> 
  <Image.Source>
    <BitmapImage DecodePixelHeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.DocumentsToBeFiledImageDecodePixelHeight, UpdateSourceTrigger=PropertyChanged}" 
      UriSource="{Binding Path=FullName}" />
  </Image.Source>
</Image>

Unfortunately it doesn’t work, it seems that the DecodePixelHeight property is not set correctly.
Therefore, I’ve tried to recover the value directly from app.config. I’ve added these parameters in the user setting section in my app.config file

<userSettings>
    <Agest.AO.Client.Properties.Settings>
      <setting name="DocumentsToBeFiledImageDecodePixelHeight" serializeAs="String">
        <value>240</value>
      </setting>
<setting name="DocumentsToBeFiledImageHeight" serializeAs="String">
        <value>240</value>
      </setting>
    </Agest.AO.Client.Properties.Settings>
</userSettings

and I’ve changed the XAML code in this way

xmlns:localme="clr-namespace:Agest.AO.Client.Properties" 

<Image Grid.Row="0" Height="{Binding Source={x:Static localme:Settings.Default}, Path=DocumentsToBeFiledImageHeight, Mode=OneWay}">
  <Image.Source>
    <BitmapImage DecodePixelHeight="{Binding Source={x:Static localme:Settings.Default}, Path=DocumentsToBeFiledImageDecodePixelHeight, Mode=OneWay}"
            UriSource="{Binding Path=FullName}" />
  </Image.Source>
</Image>


Now it works and I’m able to set values directly in the configuration file.

Regards!