26
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【C#入門】初学者がASP.NETでWebアプリを作る:第1回

Posted at

#概要
転職してC#で開発することになったものの、C#は触ったことがないので、練習として簡単にWebアプリを作っていきたいと思います。
やってみた結果、こうやったらできたよ、ではなく、やりながらやったことをそのまま書いていきたいと思います。
(最後まで読むと成長過程がわかる…きっと。)

#作るもの
・給与管理アプリケーション
会社が従業員の給与を管理するものではなく、従業員が自分の給与を管理するアプリを作っていきます。
毎月の給与や賞与の明細を登録、蓄積していきます。
データを見るところは、明細を確認するだけはアプリの機能として実装して、グラフとかで見えたらいいなと思うので、そこはBIツールを使う予定。
アプリの機能としては、下記3機能を持たせます。
1.アカウント管理
2.給与・賞与データ登録
3.給与・賞与データ参照

#使うもの
・Visual Studio 2019
 Community版を使います。
・ASP.NET Core
・Entity Framework
 PostgreSQLを使うのでNpgsqlを使います。
・IdentityASP.NET Core(アカウント認証はこれを使うとできるって聞いたけどほんとに使うか不明)
・PostgreSQL(あえてSQL Serverは使わない挑戦)

#プロジェクトを作る
Visual Studio 2019を起動し、新しいプロジェクトの作成
image.png

ASP.NET Core Web アプリケーションを選択、次へ
image.png

適当に入力して作成
image.png

Web アプリケーション(モデルビューコントローラー)を選択し作成
(認証のところを変更しておくかどうか迷ったけど一旦スルー、まずは登録機能だけ作り上げて、アカウント管理機能は後で作る。)
image.png

プロジェクトの作成完了。
#Npgsqlを導入する
プロジェクトを右クリックして、NuGetパッケージの管理を開き、
Npgsqlを検索、インストール
image.png

なんか聞かれるのでOK
image.png

エラーが出なければ完了。

#Modelを作る
参考文献:https://qiita.com/Kei18/items/1a9b936216bd2458ec08
まずはSalaryモデルを作っていきます。
ソリューションエクスプローラのModelsフォルダを右クリック→追加→新しい項目を選択、
クラスを選択して名前を記入し追加
image.png

下記のようなクラスにしました。

Salary.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SalaryManagementSystem.Models
{
    public class Salary
    {
        // 受給者
        public string Beneficiary { get; set; }
        // タイプ(給与、賞与)
        public string PaymentType { get; set; }
        // 支給日
        public DateTime PaymentDate { get; set; }
        // 支給額
        public decimal PaymentAmount { get; set; }
        // 交通費
        public decimal TravelExpence { get; set; }
        // 健康保険料
        public decimal HealthInsurancePremium { get; set; }
        // 厚生年金料
        public decimal WelfarePension { get; set; }
        // 雇用保険料
        public decimal EmploymentInsurancePremium { get; set; }
        // 所得税
        public decimal IncomeTax { get; set; }
        // 住民税
        public decimal ResidentTax { get; set; }
        // 総支給
        public decimal TotalPaymentAmount { get; set; }
        // 時間外手当
        public decimal OvertimeAllowance { get; set; }
        // 深夜手当
        public decimal MidnightAllowance { get; set; }
        // 休日手当
        public decimal HolidayAllowance { get; set; }
        // 備考
        public string Remarks { get; set; }
        // 登録日時
        public DateTime RegisterDate { get; set; }
        // 登録ユーザID
        public string RegisterUser { get; set; }
        // 更新日時
        public DateTime UpdateDate { get; set; }
        // 更新ユーザID
        public string UpdateUser { get; set; }
    }
}

スキャフォールディング機能を使用するため、一度ビルドしておく。

#Controllerを作る
ソリューションエクスプローラのControllersを右クリック→追加→新規スキャフォールディングアイテムを選択
Entity Frameworkを使用した、ビューがあるMVCコントローラーを選択し追加
image.png
下記のように設定し追加
image.png
エラーになった
image.png
どうやらIdという項目(自動的に主キーにする項目)がないといけないらしいので追加した。
エラー解消!

Salary.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SalaryManagementSystem.Models
{
    public class Salary
    {
        // ID
        public int Id { get; set; }
        // 受給者
        public string Beneficiary { get; set; }
        // タイプ(給与、賞与)
        public string PaymentType { get; set; }
        // 支給日
        public DateTime PaymentDate { get; set; }
        // 支給額
        public decimal PaymentAmount { get; set; }
        // 交通費
        public decimal TravelExpence { get; set; }
        // 健康保険料
        public decimal HealthInsurancePremium { get; set; }
        // 厚生年金料
        public decimal WelfarePension { get; set; }
        // 雇用保険料
        public decimal EmploymentInsurancePremium { get; set; }
        // 所得税
        public decimal IncomeTax { get; set; }
        // 住民税
        public decimal ResidentTax { get; set; }
        // 総支給
        public decimal TotalPaymentAmount { get; set; }
        // 時間外手当
        public decimal OvertimeAllowance { get; set; }
        // 深夜手当
        public decimal MidnightAllowance { get; set; }
        // 休日手当
        public decimal HolidayAllowance { get; set; }
        // 備考
        public string Remarks { get; set; }
        // 登録日時
        public DateTime RegisterDate { get; set; }
        // 登録ユーザID
        public string RegisterUser { get; set; }
        // 更新日時
        public DateTime UpdateDate { get; set; }
        // 更新ユーザID
        public string UpdateUser { get; set; }
    }
}

#とりあえず実行してみる
画面上部のIIS Expressボタンを押下
証明書がどうとか聞かれるがOK的な方を選ぶ
自動的に開いたページのURL末尾に/Salariesを追加して開くと…エラー。
DBにアクセスできない的なエラー。そりゃDB作ってないからな。。。
image.png

#まとめ
・プロジェクトを作成した
・Modelクラスを作成した
・Controllerはスキャフォールディングで作成したがうまくいってない???

#次回予告
次回はスキャフォールディングでうまくいかなかった調査と、CRUDの作りこみをしていきます。

26
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?