Author: quooston

quooston

Date format in ASP.Net (MVC)

Displaying a dates in the client culture format is as as easy as:

  • Use the DataType attribute to describe the type in your ViewModel – https://stackoverflow.com/questions/133671/format-date-on-binding-asp-net-mvc/4058891#4058891
public class Model 
{
  [DataType(DataType.Date)]
  public DateTime? Due { get; set; }
}
  • Add the Globalization element to your web.config file to respect the Culture and UICulture of the client: https://msdn.microsoft.com/en-us/library/ydkak5b9(v=vs.71).aspx
  <system.web>
    <globalization culture="auto:en-US" uiCulture="auto:en-US"/>
    <compilation targetFramework="4.6.1" debug="true" />
    <httpRuntime targetFramework="4.6.1" />
  </system.web>

 

  • Make certain that the browser is set to the correct language, which determines culture. In Chrome this means setting the default to the language and also prioritising that language by moving it to the top of the list.

At this point, your date will display in the culture as defined in the browser, with the fallback of en-US as specified in the Web.Config file.

 

Trace, the Ultimate Slow Down

Trace in .Net is supposedly efficient. Well, it’s not.

It’s easy to just add a Seq Trace Sync for example and not think too much about it… Well, do so at your own peril.

Adding the Trace Sync to Serilog and the fact that the Owin Test Server adds a new Trace Listener every time it’s spun up = a SLOW death and hard to track down.

So remember, TRACE MAKES SHIT SLOW.

Configure DD-WRT Printer

I’ve got a Netgear Nighthawk R7000 router which I have flashed with DD-WRT v3.0-r29316 std. It’s amazing, yada yada.

I wanted to get my printer which is currently shared off my media centre PC onto the router so that it’s more available to everyone on the network. Following are the steps I needed to follow:

  1. Turn the USB printing feature of the DD-WRT on:
    ddwrt-enable-usb 
  2. Connect the powered on printer to a USB port on the router
  3. SSH into the router (root and your router admin password), and check to see there is an lpt port available with ls -la /dev/l*
    ddwrt-check-lpt-port1 
  4. Then check to see that there is something listening on port 9100 with netstat -an
    ddwrt-check-lpt-port2
  5. Go to the Windows Devices and Printers screen, and add a new NETWORK printer
  6. Select The printer that I want isn't listed
  7. Select Add a printer using a TCP/IP port or hostname
  8. Select Autodetect for the Device Type field
  9. Use the IP address of the router for the Hostname or IP field
  10. DESELECT Query the printer and automatically select the driver to use
  11. It will fail to detect the port (9100)… that’s ok
  12. Select Custom on the Additional port information required screen
  13. Give the port a name and make sure the port number field has the value9100
  14. Go through the fdriv

Defining dependencies for injection – Aurelia

There are two ways to define dependencies which you would like injected into your objects in Aurelia:

  1. Use the `inject` decorator
  2. Use the static `inject` member

Using the static inject member has the benefit of not needing to import `inject` from the aurelia-framework:

import {Todo} from './todo';
import {Factory} from 'aurelia-dependency-injection';
import {EventAggregator} from 'aurelia-event-aggregator';

export class App {
  static inject = [EventAggregator, Factory.of(Todo)];
  constructor(aggregator, todoFactory) {
    this.bus = aggregator;
    this.completedTodos = 0;
    this.newTodoDesc = '';
    this.todos = [];
    this.todoFactory = todoFactory;
  }
}

 

Creating instances of objects with dependencies – Aurelia

Sometimes you want to create instances of objects with dependencies, which would normally have been created by the DI container within Aurelia.

Aurelia implements a Factory object which can be used to create instances out of the DI container on demand, for any of your objects:

import {Todo} from './todo';
import {Factory} from 'aurelia-dependency-injection';
import {EventAggregator} from 'aurelia-event-aggregator';

export class App {  

  static inject = [EventAggregator, Factory.of(Todo)];
  constructor(aggregator, todoFactory) {
    this.bus = aggregator;
    this.completedTodos = 0;
    this.newTodoDesc = '';
    this.todos = [];
    this.todoFactory = todoFactory;
  }

  addTodo() {
    if (!this.newTodoDesc) return;

    let todo = this.todoFactory();
    todo.description = this.newTodoDesc;
    this.todos.push(todo);
    this.newTodoDesc = '';
  }
}

 

Detect changes to model state – Aurelia

In order to intercept or subscribe to changes in your model, you need to decorate the properties you’re interested in with observable and implement the convention based <propertyName>Changed function:

import {observable} from 'aurelia-framework';

export class Todo {
  @observable done = false;
  description = '';

  doneChanged(newVal, oldVal) {
    console.log(`done change from ${oldVal} to ${newVal}`);
  }
}

 

Aurelia CLI and template requires

So you’ve used the Aurelia CLI to bootstrap your awesome Aurelia app and you npm install some dependencies, let’s say bootstrap and jquery:

npm i bootstrap 
npm i jqeury

Ok, ready to rock. Next, you update your aurelia.json file with the new dependencies:

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["jquery"],
  "exports": "$"
}

Sweet.

Next up is to import bootstrap into your main module, so that you can require it in your templates:

import 'bootstrap';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  aurelia.start().then(() => aurelia.setRoot());
}

Amazeballs.

So, you require your bootstrap css in your app template:

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-4">Contact List Placeholder</div>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

But, what’s this??? You get this error in the console:

vendor-bundle

WTF is going on there? Hmmm… Let’s review that dependency configuration we added to aurelia.json…

Oooh, we left out the css resources:

{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["jquery"],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
}

And now it works.