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

今回やること

・登録処理の作りこみ
・アカウント認証機能の追加

登録処理の作りこみ

現状の問題点

①初期値がない（金額は0、日付は今日が入っててくれた方が私はうれしい。空文字になっちゃう…。）
②区分（給与/賞与）が自由入力になっているのでコンボボックスにしたい
③備考欄が小さすぎるのでいっぱい書けるように見えるようにでかくしたい
④管理項目（登録ユーザID、登録日時、更新ユーザID、更新日時）がコードビハインドで設定しなければいけない

①初期値がない→初期値を定義する

支給日はModelでDataTypeとフォーマットを指定します。

Salary.cs

        // 支給日
        [Display(Name = "支給日")]
        [DisplayFormat(DataFormatString ="{0:yyyy-MM-dd}")] //フォーマットの指定
        [DataType(DataType.Date)]                           //DataTypeの指定
        [Required(ErrorMessage = "支給日は必須入力です")]
        public DateTime PaymentDate { get; set; }

Create.cshtmlの各項目にvalueを定義します。

Create.cshtml

@model SalaryManagementSystem.Models.Salary

@{
    ViewData["Title"] = "データ登録";
}

<h1>データ登録</h1>

<h4>給与/賞与情報</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Beneficiary" class="control-label"></label>
                <input asp-for="Beneficiary" class="form-control" />
                <span asp-validation-for="Beneficiary" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PaymentType" class="control-label"></label>
                <input asp-for="PaymentType" class="form-control" value="給与"/>
                <span asp-validation-for="PaymentType" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PaymentDate" class="control-label"></label>
                <input asp-for="PaymentDate" class="form-control" value=@DateTime.Now.ToString("yyyy-MM-dd") />
                <span asp-validation-for="PaymentDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PaymentAmount" class="control-label"></label>
                <input asp-for="PaymentAmount" class="form-control" value="0"/>
                <span asp-validation-for="PaymentAmount" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="TravelExpence" class="control-label"></label>
                <input asp-for="TravelExpence" class="form-control" value="0"/>
                <span asp-validation-for="TravelExpence" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="HealthInsurancePremium" class="control-label"></label>
                <input asp-for="HealthInsurancePremium" class="form-control" value="0"/>
                <span asp-validation-for="HealthInsurancePremium" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="WelfarePension" class="control-label"></label>
                <input asp-for="WelfarePension" class="form-control" value="0"/>
                <span asp-validation-for="WelfarePension" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="EmploymentInsurancePremium" class="control-label"></label>
                <input asp-for="EmploymentInsurancePremium" class="form-control" value="0"/>
                <span asp-validation-for="EmploymentInsurancePremium" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="IncomeTax" class="control-label"></label>
                <input asp-for="IncomeTax" class="form-control" value="0"/>
                <span asp-validation-for="IncomeTax" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ResidentTax" class="control-label"></label>
                <input asp-for="ResidentTax" class="form-control" value="0"/>
                <span asp-validation-for="ResidentTax" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="TotalPaymentAmount" class="control-label"></label>
                <input asp-for="TotalPaymentAmount" class="form-control" value="0"/>
                <span asp-validation-for="TotalPaymentAmount" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="OvertimeAllowance" class="control-label"></label>
                <input asp-for="OvertimeAllowance" class="form-control" value="0"/>
                <span asp-validation-for="OvertimeAllowance" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="MidnightAllowance" class="control-label"></label>
                <input asp-for="MidnightAllowance" class="form-control" value="0"/>
                <span asp-validation-for="MidnightAllowance" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="HolidayAllowance" class="control-label"></label>
                <input asp-for="HolidayAllowance" class="form-control" value="0"/>
                <span asp-validation-for="HolidayAllowance" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Remarks" class="control-label"></label>
                <input asp-for="Remarks" class="form-control" />
                <span asp-validation-for="Remarks" class="text-danger"></span>
            </div>
            @*<div class="form-group">
            <label asp-for="RegisterDate" class="control-label"></label>
            <input asp-for="RegisterDate" class="form-control" />
            <span asp-validation-for="RegisterDate" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="RegisterUser" class="control-label"></label>
            <input asp-for="RegisterUser" class="form-control" />
            <span asp-validation-for="RegisterUser" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="UpdateDate" class="control-label"></label>
            <input asp-for="UpdateDate" class="form-control" />
            <span asp-validation-for="UpdateDate" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="UpdateUser" class="control-label"></label>
            <input asp-for="UpdateUser" class="form-control" />
            <span asp-validation-for="UpdateUser" class="text-danger"></span>
        </div>*@
            <div class="form-group">
                <input type="submit" value="登録" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">一覧へ戻る</a>
</div>

支給日は下記のように定義することで今日の日付を設定するようにしています。

value=@DateTime.Now.ToString("yyyy-MM-dd")

②区分（給与/賞与）をコンボボックスにする

inputタグを下記の通りselectタグにします。
デフォルトは給与にしています。

<label asp-for="PaymentType" class="control-label"></label>
<!--<input asp-for="PaymentType" class="form-control" value="給与"/>-->
<select asp-for="PaymentType" class="form-control" value="給与">
    <option value="給与" selected>給与</option>
    <option value="賞与">賞与</option>
</select>
<span asp-validation-for="PaymentType" class="text-danger"></span>

③備考欄が小さすぎるので大きくする

備考欄のstyleで指定しました。

<label asp-for="Remarks" class="control-label"></label>
<input asp-for="Remarks" class="form-control" style="width: 500px; height: 100px"/>
<input asp-for="Remarks" class="form-control" width="500px" height="100px"/> ←これでは有効にならない
<span asp-validation-for="Remarks" class="text-danger"></span>

④管理項目をコードビハインドで設定する

SalariesController.csのPOSTで呼び出されるCreateメソッドに追記しました。

SalariesController.cs

// POST: Salaries/Create
        // To protect from overposting attacks, enable the specific properties you want to bind to.
        // For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Beneficiary,PaymentType,PaymentDate,PaymentAmount,TravelExpence,HealthInsurancePremium,WelfarePension,EmploymentInsurancePremium,IncomeTax,ResidentTax,TotalPaymentAmount,OvertimeAllowance,MidnightAllowance,HolidayAllowance,Remarks,RegisterDate,RegisterUser,UpdateDate,UpdateUser")] Salary salary)
        {
            // 追加ここから
            salary.RegisterDate = DateTime.Now;
            salary.RegisterUser = "DUMMY";
            salary.UpdateDate = DateTime.Now;
            salary.UpdateUser = "DUMMY";
            // 追加ここまで
            if (ModelState.IsValid)
            {
                _context.Add(salary);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(salary);
        }

登録操作をしてみる

上記の調整で、登録画面の初期状態はこのようになりました。

適当に入力します。


（備考欄を上寄せにしたい。。。）
登録ボタンを押します。

登録できました。表示がイケてない。。。まあ一覧画面はこんなに情報を出す気はないので後で直しましょう。

詳細を押すと詳細画面に遷移します。

編集画面にも遷移できます。編集画面はまだ表示の調整をしていませんでしたので、管理項目が登録できていたことがわかります。

DBを直接確認しても、きちんとデータが保存されています。

次回予告

アカウント認証を追加します。