投稿

ASP.NET Web API で JSON を取得する方法

Web API で JSON を取得する実装例です。

View:
<inputtype="button"id="apiButton"class="btn"value="Web Api Test" /> <script>functionasyncCall() {var xhr =newXMLHttpRequest();xhr.onreadystatechange=function () {if ((xhr.readyState===4) && (xhr.status===200)) {var json =xhr.response;console.log(json); } }xhr.open("GET", "/api/values", true);xhr.send(null); }var button1 =document.getElementById("apiButton");button1.addEventListener("click", asyncCall, false);</script>
Controller:
publicclassItem { public intId { get; set; } public stringName { get; set; } public DateTimeRegisteredOn { get; set; } public intCategoryId { get; set; } }

Angular メモ

イメージ
Angular アプリケーションプログラミング を読み、要点をメモしています。本文のコピーにならないように、自分の言葉に置き換えて記載しています。


2 章 Angular の基本
2.1 Angular を利用するための準備

2.1.1 Angular アプリケーションの基本構造

npm start コマンド:
Angular 同梱の lite-server が実行されます。この時、TypeScript が JavaScript にトランスパイルされます。
→ 2.3.1 で詳細説明。

xxx.js.map:
ソースマップファイルという。ts ファイルと js ファイルを紐付けています。デバッグ時に ts ファイルでデバッグ実行することができます。

2.2.1 モジュールについて

NgModule:
モジュール定義のためのモジュール

BrowserModule:
アプリケーションをブラウザで実行するためのモジュール

Angular モジュール:
オブジェクトをまとめるための入れ物という概念です。定義されているクラスの中は空でも動作します。(e.g. AppModule)

Angular モジュール = デコレーター + クラス
デコレーターでクラスの構成情報を設定します。


2.2.2 コンポーネント

app.component.ts 一部抜粋
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, })
→ selector で指定されている要素(my-app)に、template で設定されているテンプレートを適用する、という意味です。変数 name の前後を囲っている {{...}} は Interpolation という構文で、変数を受け取る際の記述方法です。


2.2.3 スタートアップ
main.ts:
アプリケーション起動のための情報を設定しています。

main.ts
import { platformBrowserDynamic } from'@angular/platform-browser-dynamic'; import { AppModule } from'./app/app.module…

WPF DependencyProperty 簡易サンプル

WPF の DependencyProperty を簡単に実装したサンプルコードです。


C# コード
TextBox クラスを継承した MyTextBox クラスを定義し、string 型の MyProperty を用意します。DependencyProperty.Register メソッドの引数 FrameworkPropertyMetadata から、デフォルト値(今回は null)とデフォルトのバインドモード(今回は TwoWay)を設定します。

publicclassMyTextBox : TextBox { public stringMyProperty { get { return (string)GetValue(MyPropertyProperty); } set { SetValue(MyPropertyProperty, value); } } // Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...public static readonly DependencyPropertyMyPropertyProperty = DependencyProperty.Register( "MyProperty", typeof(string), typeof(MyTextBox), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault)); }

XAML コード
XAML 側では、MyTextBox の MyProperty プロパティを、自身の Text プロパティと、別に用意した TextBox の Text プロパティにバインドしています。

<StackPanelOrientation="Vertical"> <l…

XAMPP MySQL の日本語文字化け対応

イメージ
データベース作成時に、照合順序として utf8_general_ci を選択すると、日本語を文字化けすることなく扱うことができるようになります。












MySQL JOIN コマンド

incident テーブル +-------+---------------+------+-----+---------+-------+ | Field | Type          | Null | Key | Default | Extra | +-------+---------------+------+-----+---------+-------+ | id    | int(11)       | NO   | PRI | NULL    |       | | title | varchar(1000) | YES  |     | NULL    |       | | owner | int(11)       | YES  |     | NULL    |       | +-------+---------------+------+-----+---------+-------+
owner テーブル +-------+---------------+------+-----+---------+-------+ | Field | Type          | Null | Key | Default | Extra | +-------+---------------+------+-----+---------+-------+ | id    | int(11)       | NO   | PRI | NULL    |       | | name  | varchar(1000) | YES  |     | NULL    |       | +-------+---------------+------+-----+---------+-------+
incident テーブルと owner テーブルを結合する。
SELECTi.id, i.title, o.nameFROM`incident`AS i RIGHT JOIN (SELECT id, name FROM`owner`) AS o ONi.owner=o.id

Require.js によるモジュール管理

イメージ
Require.js を利用して JavaScript ファイルをまとめて管理してみます。

フォルダとファイルの構成は以下のとおりです。



index.html

ここでは jQuery と require.js を参照します。
jQuery を参照した後に、require.js への参照を加えます。require.js の script タグ内に、data-main 属性を加えて、require.js が管理する JavaScript のエントリポイントを指定します。ここでは js フォルダ配下の main.js をエントリポイントにしますので "js/main" と記載します。

index.html の実装内容
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <scriptsrc="js/jquery.js"type="text/javascript"></script> <scriptdata-main="js/main"src="js/require.min.js"type="text/javascript"></script> </head> <body> <inputid="btn1"type="button"value="get jQuery closed issues"/>…