Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9509

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

$
0
0

今回やること

前回スキャフォールディングでうまくできなかった原因を解消
・Viewの作りこみ

前回ダメだったところ

①導入するフレームワークが違ったらしい

Npgsqlは合っているけど、Postgres用のEntity FrameworkのNpgsqlを入れなければいけなかったらしい。
参考:https://qiita.com/nosa67/items/49ac036a15a4f7deed8b

フレームワークを入れ替えて、下記のように修正。

appsettings.json
{"Logging":{"LogLevel":{"Default":"Information","Microsoft":"Warning","Microsoft.Hosting.Lifetime":"Information"}},"AllowedHosts":"*","ConnectionStrings":{//"SalaryManagementSystemContext":"Server=(localdb)\\mssqllocaldb;Database=SalaryManagementSystemContext-265af9c0-8ccd-465a-b2a3-0aea1030624b;Trusted_Connection=True;MultipleActiveResultSets=true""DefaultConnection":"Server=localhost;Port=5432;Database=SMSDB;User ID=postgres;Password=password;Enlist=true"}}
Startup.cs
publicvoidConfigureServices(IServiceCollectionservices){services.AddControllersWithViews();services.AddDbContext<SalaryManagementSystemContext>(options=>//options.UseSqlServer(Configuration.GetConnectionString("SalaryManagementSystemContext")));options.UseNpgsql(Configuration.GetConnectionString("DefaultConnection")));}

②そもそもASP.NET Coreのバージョンがダメだったらしい

何かのライブラリのサポートバージョンが合っていなかったので、5.0で再作成…
image.png

③前回のControllerを作るまで実施

すんなりいけた。
①を再実施、ただしDataフォルダは削除してはいけない。
※DBContextの継承クラスを使うため。
参考資料のUpdate-Databaseコマンドの実行まで行い、pgAdminでSalaryテーブルができていることを確認。
image.png

実行してみる

できた。
image.png

この時点で気に入らないところをちょっと修正

①Viewを直す

Chromeがご丁寧に翻訳してくれちゃうので日本語扱いにする。

_Layout.cshtml
<!DOCTYPE html><htmllang="ja">

②項目名をちゃんと設定する

ついでに必須チェックも

Salary.cs
usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel.DataAnnotations;usingSystem.Linq;usingSystem.Threading.Tasks;namespaceSalaryManagementSystem.Models{publicclassSalary{// IDpublicintId{get;set;}// 受給者[Display(Name="受給者")][Required(ErrorMessage="受給者は必須入力です")]publicstringBeneficiary{get;set;}// タイプ(給与、賞与)[Display(Name="給与/賞与")][Required(ErrorMessage="給与/賞与は必須入力です")]publicstringPaymentType{get;set;}// 支給日[Display(Name="支給日")][Required(ErrorMessage="支給日は必須入力です")]publicDateTimePaymentDate{get;set;}// 支給額[Display(Name="支給額")][Required(ErrorMessage="支給額は必須入力です")]publicdecimalPaymentAmount{get;set;}// 交通費[Display(Name="交通費")]publicdecimalTravelExpence{get;set;}// 健康保険料[Display(Name="健康保険料")]publicdecimalHealthInsurancePremium{get;set;}// 厚生年金料[Display(Name="厚生年金料")]publicdecimalWelfarePension{get;set;}// 雇用保険料[Display(Name="雇用保険料")]publicdecimalEmploymentInsurancePremium{get;set;}// 所得税[Display(Name="所得税")]publicdecimalIncomeTax{get;set;}// 住民税[Display(Name="住民税")]publicdecimalResidentTax{get;set;}// 総支給[Display(Name="総支給額")]publicdecimalTotalPaymentAmount{get;set;}// 時間外手当[Display(Name="時間外手当")]publicdecimalOvertimeAllowance{get;set;}// 深夜手当[Display(Name="深夜手当")]publicdecimalMidnightAllowance{get;set;}// 休日手当[Display(Name="休日手当")]publicdecimalHolidayAllowance{get;set;}// 備考[Display(Name="備考")]publicstringRemarks{get;set;}// 登録日時publicDateTimeRegisterDate{get;set;}// 登録ユーザIDpublicstringRegisterUser{get;set;}// 更新日時publicDateTimeUpdateDate{get;set;}// 更新ユーザIDpublicstringUpdateUser{get;set;}}}

③非表示項目を設定する

登録日時・登録ユーザID・更新日時・更新ユーザIDは管理用の項目なので、画面には表示しないようにする。
追加させられたIdは勝手に非表示になるんだ…
ついでに日本語化。
日本語化と非表示項目の削除は、必要な画面すべてで実施する。

Index.cshtml
@model IEnumerable<SalaryManagementSystem.Models.Salary>

@{
    ViewData["Title"] = "一覧";   ←日本語化
}

<h1>一覧</h1>←日本語化

<p><aasp-action="Create">データ登録</a>←日本語化
</p><tableclass="table"><thead><tr><th>
                @Html.DisplayNameFor(model => model.Beneficiary)
            </th><th>
                @Html.DisplayNameFor(model => model.PaymentType)
            </th><th>
                @Html.DisplayNameFor(model => model.PaymentDate)
            </th><th>
                @Html.DisplayNameFor(model => model.PaymentAmount)
            </th><th>
                @Html.DisplayNameFor(model => model.TravelExpence)
            </th><th>
                @Html.DisplayNameFor(model => model.HealthInsurancePremium)
            </th><th>
                @Html.DisplayNameFor(model => model.WelfarePension)
            </th><th>
                @Html.DisplayNameFor(model => model.EmploymentInsurancePremium)
            </th><th>
                @Html.DisplayNameFor(model => model.IncomeTax)
            </th><th>
                @Html.DisplayNameFor(model => model.ResidentTax)
            </th><th>
                @Html.DisplayNameFor(model => model.TotalPaymentAmount)
            </th><th>
                @Html.DisplayNameFor(model => model.OvertimeAllowance)
            </th><th>
                @Html.DisplayNameFor(model => model.MidnightAllowance)
            </th><th>
                @Html.DisplayNameFor(model => model.HolidayAllowance)
            </th><th>
                @Html.DisplayNameFor(model => model.Remarks)
            </th>
            @*<th>←*.cshtmlのコメントアウトは「@*」で開始、「*@」で終了
            @Html.DisplayNameFor(model => model.RegisterDate)
        </th><th>
            @Html.DisplayNameFor(model => model.RegisterUser)
        </th><th>
            @Html.DisplayNameFor(model => model.UpdateDate)
        </th><th>
            @Html.DisplayNameFor(model => model.UpdateUser)
        </th>*@
            <th></th></tr></thead><tbody>
@foreach (var item in Model) {
        <tr><td>
                @Html.DisplayFor(modelItem => item.Beneficiary)
            </td><td>
                @Html.DisplayFor(modelItem => item.PaymentType)
            </td><td>
                @Html.DisplayFor(modelItem => item.PaymentDate)
            </td><td>
                @Html.DisplayFor(modelItem => item.PaymentAmount)
            </td><td>
                @Html.DisplayFor(modelItem => item.TravelExpence)
            </td><td>
                @Html.DisplayFor(modelItem => item.HealthInsurancePremium)
            </td><td>
                @Html.DisplayFor(modelItem => item.WelfarePension)
            </td><td>
                @Html.DisplayFor(modelItem => item.EmploymentInsurancePremium)
            </td><td>
                @Html.DisplayFor(modelItem => item.IncomeTax)
            </td><td>
                @Html.DisplayFor(modelItem => item.ResidentTax)
            </td><td>
                @Html.DisplayFor(modelItem => item.TotalPaymentAmount)
            </td><td>
                @Html.DisplayFor(modelItem => item.OvertimeAllowance)
            </td><td>
                @Html.DisplayFor(modelItem => item.MidnightAllowance)
            </td><td>
                @Html.DisplayFor(modelItem => item.HolidayAllowance)
            </td><td>
                @Html.DisplayFor(modelItem => item.Remarks)
            </td>
            @*<td>
            @Html.DisplayFor(modelItem => item.RegisterDate)
        </td><td>
            @Html.DisplayFor(modelItem => item.RegisterUser)
        </td><td>
            @Html.DisplayFor(modelItem => item.UpdateDate)
        </td><td>
            @Html.DisplayFor(modelItem => item.UpdateUser)
        </td>*@
            <td><aasp-action="Edit"asp-route-id="@item.Id">編集</a> |   ←日本語化
                <aasp-action="Details"asp-route-id="@item.Id">詳細</a> |   ←日本語化
                <aasp-action="Delete"asp-route-id="@item.Id">削除</a>←日本語化
            </td></tr>
}
    </tbody></table>

見た目はいったんOK

きれいになった
image.png

次回予告

次回は登録処理の作りこみとアカウント認証機能の追加をやります。


Viewing all articles
Browse latest Browse all 9509

Trending Articles