ASP.NET Web API で JSON を返す方法

ASP.NET Web API で JSON を返す実装例です。

１．WebApiConfig クラス内で "text/html" フォーマットをリターンするようにします。

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API の設定およびサービス
        ...

        //json を返す
        //https://stackoverflow.com/a/13277616
        config.Formatters.JsonFormatter.SupportedMediaTypes
            .Add(new MediaTypeHeaderValue("text/html"));
    }
}

２．Request.CreateReponse メソッドに、ステータスコードと、モデルのリストを渡します。すると、クライアントには JSON がリターンされます。

public class ProductsController : ApiController
{
    ...

    public HttpResponseMessage Get()
    {
        IList<IProduct> products = _rep.GetAll();

        //モデルリストから JSON に変換
        //Content Negotiation in ASP.NET Web API
        //https://docs.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/content-negotiation#serialization
        return Request.CreateResponse(HttpStatusCode.OK, products);
    }
}

WPF 添付イベント（Attached Event）実装例

添付イベントの実装例を紹介します。

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp3
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        
        private void InputChangedHandler(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("InputChangedHanlder is called.");
        }
    }

    public static class EventHelper
    {
        public static readonly DependencyProperty IsEventRaisingProperty =
            DependencyProperty.RegisterAttached("IsEventRaising",
            typeof(bool),
            typeof(EventHelper),
            new FrameworkPropertyMetadata(false, new PropertyChangedCallback(OnIsEventRaisingChanged)));

        public static bool GetIsEventRaising(DependencyObject sender)
        {
            return (bool)sender.GetValue(IsEventRaisingProperty);
        }

        public static void SetIsEventRaising(DependencyObject sender, bool ier)
        {
            sender.SetValue(IsEventRaisingProperty, ier);
        }

        public static readonly RoutedEvent InputChangedEvent = EventManager.RegisterRoutedEvent(
            "InputChanged",
            RoutingStrategy.Bubble,
            typeof(RoutedEventHandler),
            typeof(EventHelper)
        );

        public static void AddInputChangedHandler(DependencyObject sender, RoutedEventHandler handler)
        {
            UIElement element = sender as UIElement;
            if (element != null)
            {
                element.AddHandler(InputChangedEvent, handler);
            }
        }

        public static void RemoveInputChangedHandler(DependencyObject sender, RoutedEventHandler handler)
        {
            UIElement element = sender as UIElement;
            if (element != null)
            {
                element.RemoveHandler(InputChangedEvent, handler);
            }
        }

        private static void OnIsEventRaisingChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            (sender as TextBox).TextChanged += (_s, _e) =>
            {
                (sender as TextBox).RaiseEvent(new RoutedEventArgs(InputChangedEvent));
            };
        }
    }
}

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:Custom="http://infragistics.com/DockManager" x:Class="WpfApp3.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow X" Height="350" Width="525">
    <Grid>
        <TextBox local:EventHelper.IsEventRaising="True"
                 local:EventHelper.InputChanged="InputChangedHandler"
                             />
    </Grid>
</Window>

WPF ユーザーコントロールのプロパティにデータをバインド

ユーザーコントロールのプロパティに、他のユーザーコントロールのプロパティをバインドしてみます。

ターゲットプロパティ・・・値を設定するプロパティ
ソースプロパティ・・・値を取得してくるプロパティ

ターゲットプロパティは、依存関係プロパティ（Dependency Property）である必要があります。


実装例：
この例では、Slider コントロールの Value プロパティを、TextBox の Text プロパティにバインドしています。なお、TextBox の Text プロパティは依存関係プロパティ（Dependency Property）です。

<Slider x:Name="slider1"
        HorizontalAlignment="Left" 
        Margin="49,36,0,0" 
        VerticalAlignment="Top" 
        Width="257"
        />
<TextBox HorizontalAlignment="Left"
         Height="24" Margin="49,85,0,0" 
         TextWrapping="Wrap"
         VerticalAlignment="Top"
         Width="257"
         Text="{Binding ElementName=slider1, Path=Value}"/>

WPF Trigger 実装例

WPF Trigger の実装例です。

Button の Content の値に応じて Button の背景色を赤色に変更します。また、Button にマウスがホバーしている間、Button の文字色を白色に変更します。

<Window x:Class="TriggerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TriggerDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button
            Content="button1"
            Height="30"
            Width="200">
            <Button.Resources>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <!--Content が "button1" ならば-->
                        <Trigger Property="Content" Value="button1">
                            <!--背景色を赤色に変更-->
                            <Setter Property="Background" Value="Red"/>
                        </Trigger>
                        <!--Button 上にマウスがホバーしていたら-->
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--前景色を白色に変更-->
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Resources>
        </Button>
    </Grid>
</Window>

関連情報：

WPF DataTrigger 実装例
http://kainobi2.blogspot.jp/2017/05/wpf-datatrigger.html

WPF 添付プロパティ（Attached Property）の実装方法

WPF でクラスインスタンスを利用する際に、クラスに対して直接プロパティを追加できないが、任意のプロパティを追加して利用したい状況があるかと思います。そのような場合、添付プロパティ（Attached Property）を利用することができます。


MainWindow.xaml.cs

コードビハインドで「propa」と入力してスニペットを挿入します。その後、適宜名前やメタデータを変更していきます。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public static double GetRecord(DependencyObject obj)
    {
        return (double)obj.GetValue(RecordProperty);
    }

    public static void SetRecord(DependencyObject obj, double value)
    {
        obj.SetValue(RecordProperty, value);
    }

    // Using a DependencyProperty as the backing store for Record.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty RecordProperty =
        DependencyProperty.RegisterAttached("Record",
            typeof(double),
            typeof(MainWindow), 
            new FrameworkPropertyMetadata(0.0)
            );

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var btn = sender as Button;
        Debug.WriteLine(btn.GetValue(RecordProperty));
    }
}

MainWindow.xaml

追加した Record 添付プロパティに、double 値を設定します。

<Window x:Class="AttachedPropertyDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AttachedPropertyDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button 
            Content="abc"
            Height="30"
            Width="200"
            local:MainWindow.Record="3.0"
            Click="Button_Click"/>
    </Grid>
</Window>

関連情報：
WPF 依存関係プロパティ
http://kainobi2.blogspot.jp/2016/11/wpf.html

WPF バインディング：Source の使い方

Binding オブジェクトの持つ、Source プロパティの利用方法の紹介です。Source プロパティを利用することで、Resources に登録されている任意のオブジェクトを参照することができます。

例えば、Resources に用意されている Int 型の値を、TextBox の Tooltip プロパティにバインドしてみます。

※ Int 型の値を利用するためには、mscorlib アセンブリの参照を追加しています。

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow X" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <sys:Int32 x:Key="num1">123</sys:Int32>
        </Grid.Resources>

        <TextBox x:Name="textBox1"
                 Height="30"
                 Width="250"
                 Text="abc"
                 ToolTip="{Binding Source={StaticResource num1}}"/>
    </Grid>
</Window>

WPF バインディング：RelativeSource の使い方

Binding オブジェクトの持つ、RelativeSource プロパティの利用方法の紹介です。

バインディングを利用して、バインドするソースとして、バインドターゲットの UI 要素から相対位置に存在する UI 要素のプロパティを指定する時には、RelativeSource プロパティを利用することができます。

例えば、TextBox の Tooltip プロパティにバインドするバインドソースとして、TextBox の親（Grid）の親である Window の Title プロパティを利用することを考えてみます。

デザインタイムでは、UI 要素は下記の構造になっています。TextBox から、2 つ上位にある Window のプロパティを参照します。

Window
    - Grid
        - TextBox


TextBox.Tooltip プロパティには、RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window} として、RelativeSoure を利用し、Mode に FindAncestor、AncestorType に Window をそれぞれ指定しています。これで、TextBox のツールチップには「MainWindow X」という値が表示されるようになります。

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow X" Height="350" Width="525">
    <Grid>

        <TextBox x:Name="textBox1"
                 Height="30"
                 Width="250"
                 Text="abc"
                 ToolTip="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=Title}"/>
    </Grid>
</Window>

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

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

View:

<input type="button" id="apiButton" class="btn" value="Web Api Test" />

<script>
    function asyncCall() {
        var xhr = new XMLHttpRequest();
        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:

public class Item
{
    public int Id { get; set; }

    public string Name { get; set; }

    public DateTime RegisteredOn { get; set; }

    public int CategoryId { get; set; }
}


public class ValuesController : ApiController
{
    // GET api/values
    public IEnumerable<Item> Get()
    {
        List<Item> items = new List<Item>();
        items.Add(new Item { Id = 1, Name = "Toshihiko", CategoryId = 1, RegisteredOn = DateTime.Today });
        items.Add(new Item { Id = 2, Name = "Takashi", CategoryId = 1, RegisteredOn = DateTime.Today });
        return items;
    }
}

WPF DependencyProperty 簡易サンプル

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


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

public class MyTextBox : TextBox
{
    public string MyProperty
    {
        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 DependencyProperty MyPropertyProperty =
        DependencyProperty.Register(
            "MyProperty", 
            typeof(string), 
            typeof(MyTextBox),
            new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
}

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

<StackPanel Orientation="Vertical">
    <local:MyTextBox x:Name="myTextBox1" Text="{Binding MyProperty, RelativeSource={RelativeSource Self}, UpdateSourceTrigger=PropertyChanged}" MyProperty="This is my property."/>
    <TextBox Text="{Binding ElementName=myTextBox1, Path=MyProperty, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

ASP.NET MVC, ASP.NET Web API でのデータベース接続

ASP.NET MVC、ASP.NET Web API 両方で同じ設定が可能です。

Web.config
App_Data フォルダに DB1.mdb がある状態で、下記のように connectionString を設定します。

<connectionStrings>
  <!--a database file(mdf, ldf) will be created in App_Data folder of the project and attach to SQL Server-->
  <add name="DataContext" connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\DB1.mdf;Integrated Security=True;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" />
</connectionStrings>

C# コードでは、Web.config で設定した接続文字列を使ってデータベースへ接続します。

var str = ConfigurationManager.ConnectionStrings["DataContext"].ConnectionString;

using (SqlConnection connection = new SqlConnection(str))
{
    connection.Open();
    using (SqlCommand command = new SqlCommand("Select * from dbo.incident;", connection))
    {
        SqlDataReader dr = command.ExecuteReader();
        while (dr.Read())
        {
            Debug.WriteLine(dr.GetValue(1).ToString());
        }
        dr.Close();
    }
}

C# out キーワード

C# の out キーワードについての簡単なメモです。

out キーワードは、メソッドにオブジェクトを参照渡しすることができます。
下記例では、ModifyText メソッドでは、値のコピーが渡されます。このため ModifyText の呼び出し後に、ModifyText の呼び出し元のオブジェクト（text）そのものに変化はありません。

一方で、後続の ModifyTextOut では、引数に out キーワードを伴います。ModifyTextOut を呼び出す際にも、引数に out キーワードをつけます。out キーワードは参照渡しのため、呼び出し元で ModifyTextOut に渡される引数（out text）の、メモリのアドレスを渡しています。ModifyTextOut 内では text のアドレスを経由して、ModifyText の呼び出し元のオブジェクト（text）そのものの値を書き換えています。

class Program
{
    static void Main(string[] args)
    {
        string text = "abc";
        ModifyText(text);
        Console.WriteLine("ModifyText の後：" + text);
        ModifyTextOut(out text);
        Console.WriteLine("ModifyTextOut の後：" + text);
        Console.ReadLine();
    }

    private static void ModifyText(string param)
    {
        param = "xxx";
    }

    private static void ModifyTextOut(out string param)
    {
        param = "zzz";
    }
}

実行結果です。