Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nekoozi

ASP.NET MVCプロジェクトの設定と機能実装ガイド

Posted at

はじめに

　【C#】のWebアプリケーションのフレームワークである 　【ASP.NET Cor MVC】の機能実装手順+αを確認。

詳細は以下をご参考

ASP.NET MVCプロジェクトにおけるデータベース接続設定、ビューの作成、ルーティング設定、JavaScriptの読み込み手順などについて。

1. 接続文字列の設定

1.1 YourConnectionString

<connectionStrings>
    <add name="YourConnectionString" connectionString="Server=your_server;Database=your_database;User Id=your_user;Password=your_password;" providerName="System.Data.SqlClient" />
</connectionStrings>

解説:
●Server=your_server;
　: 接続先のデータベースサーバーの名前またはIPアドレスを指定しています。
　 外部にあるデータベースサーバーに接続するために、
your_serverの部分は具体的なサーバーのホスト名やIPアドレスに置き換えます。

●Database=your_database;
　: 使用するデータベースの名前を指定しています。
　 your_databaseは接続先のデータベース名に置き換えます。

●User Id=your_user;Password=your_password;
　: データベースに接続するためのユーザーIDとパスワードを
　 明示的に指定しています。
　 your_userとyour_passwordの部分はデータベースに
　 接続する際の認証情報に置き換えます。

ポイント:

●この接続文字列は、SQL Server 認証を使用しています。
　ユーザー名とパスワードを明示的に指定しているため、
　データベースにアクセスするための個別の資格情報が必要です。

2. ビューの修正

2.1 SumDatasコントローラーのIndexビュー修正

取得したデータを表示するために、sumDataListを表示するコードを追加します。

手順
　1. 新しいフォルダ作成:
Viewsフォルダ内にSumDatasフォルダを作成。

　2. ビュー作成:
SumDatasフォルダを右クリックし、「追加」→「ビュー」を選択し、
Indexという名前のビューを作成。

@model IEnumerable<RegistryManagementSystem.Models.SumData>

<h2>計算結果一覧</h2>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>数値</th>
            <th>結果</th>
            <th>作成日</th>
            <th>更新日</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Number</td>
                <td>@item.Result</td>
                <td>@item.CreatedDate.ToShortDateString()</td>
                <td>@item.UpdatedDate.ToShortDateString()</td>
            </tr>
        }
    </tbody>
</table>

3. フォームの作成

3.1 Frm/Index.cshtml の作成

配置場所: Viewsフォルダ内にFrmフォルダを作成し、その中にIndex.cshtmlを配置します。

@{
    ViewData["Title"] = "日付入力";
}

<div class="text-center">
    <h1 class="display-4">日付を入力してください</h1>

    <form action="/Frm/Submit" method="post">
        <div class="form-group">
            <label for="dateInput">日付:</label>
            <input type="date" id="dateInput" name="dateInput" class="form-control" required />
        </div>
        <button type="submit" class="btn btn-primary">送信</button>
    </form>

    @if (!string.IsNullOrEmpty(ViewBag.Message))
    {
        <p class="text-danger">@ViewBag.Message</p>
    }
</div>

4. プロジェクトの設定とスクリプトの読み込み手順

4.1 Global.asax と Global.asax.cs の反映

プロジェクトのルートにGlobal.asaxファイルを追加し、次の内容を追加します。

using System.Web.Mvc;
using System.Web.Routing;

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}

4.2 Web.config の設定

プロジェクトのルートにGlobal.asaxファイルを追加し、次の内容を追加します。

using System.Web.Mvc;
using System.Web.Routing;

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}

解説:
●Data Source=.;
　: SQL Serverの場所を示しています。ピリオド（.）は、
　ローカルホスト、つまり現在のマシンを指します。

●Initial Catalog=MyDatabase;
　: 使用するデータベースの名前を指定します。
　この例では「MyDatabase」というデータベースに接続します。

●Integrated Security=True;
　: Windows認証（統合セキュリティ）を使用してデータベースに接続します。
　ユーザー名とパスワードを指定する代わりに、
　Windowsのログイン資格情報を利用します。

●providerName="System.Data.SqlClient";
　: 使用するデータベースプロバイダを指定します。
　この例では、SQL Serverに接続するための.NETの
　クライアントライブラリ「System.Data.SqlClient」を使用しています。

4.3 App_Start フォルダの作成と初期設定

App_Startフォルダを作成し、RouteConfig.csを配置します。

using System.Web.Mvc;
using System.Web.Routing;

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

4.4 config フォルダの作成

configフォルダを作成し、設定ファイルを管理します。

●appSettings.config: アプリケーション固有の設定を記述。
●connection.config: データベース接続の設定を格納。

4.5 Scripts フォルダと JavaScript の読み込み

ScriptsフォルダにはJavaScriptファイルや外部ライブラリを配置します。

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-3.6.0.min.js"></script>

4.6 Views フォルダ

Viewsフォルダには、UIを構成するcshtmlファイルを配置します。

4.7 ViewBag と return View

ViewBagを使ってデータを渡す方法。

ViewBag.Message = "Hello, World!";
return View();

ビューでの受け取り:

<p>@ViewBag.Message</p>

4.8 スクリプトの設定と読み込み

jQueryなどを使用して、イベントリスナーを設定します。

$('#btn-primary').on('click', function() {
    alert("Button clicked!");
});

4.9 三項演算子や as/is 演算子を使用したスクリプト

C# の演算子を使って型の確認やキャスト処理を行います。



// CheckNullメソッドは、渡されたオブジェクトがnullかどうかをチェックします。
public string CheckNull(object obj)
{
/**  メソッド名は CheckNull で、引数として object 型の obj を受け取ります。**/
/**  戻り値は string 型です。**/
    

    /**  三項演算子 **/

    // objがnullでない場合は"true"を返し、nullの場合は"false"を返します。
    return obj != null ? "true" : "false";
    /**  条件による戻り値を決定します。 **/
}

/**  オブジェクトのキャスト **/
// objに100を代入します。これはint型の値ですが、object型として扱われます。
object obj = 100; 
// objをint?型にキャストします。objがint型であれば、numberにその値が代入され、
// そうでない場合はnullが代入されます。

/**  整数値 100 を object 型の変数 obj に代入します。
     この時点で、obj は整数型ですが、object 型として扱われます。 **/

int? number = obj as int?;
// numberが値を持っている場合はその値を文字列に変換し、
// そうでない場合は"null"と表示します。

/**  as 演算子を使って obj を 
     int?（nullable int）型にキャストします。 **/

/**  obj が int 型の場合、その値が number に代入され、
     そうでない場合は null が代入されます。 **/

Console.WriteLine(number.HasValue ? number.ToString() : "null");

/**  number が値を持っているかどうかを 
     HasValue プロパティで確認し、値があればその値を文字列として出力し、
     なければ "null" を出力します。 **/



// 別のオブジェクトを定義します。
object obj = 200; 

/**  新たに 200 を object 型の変数 obj に代入します。 **/



// objがint型であるかを確認します。
// is演算子を使って型の確認を行い、int型であれば条件はtrueになります。
if (obj is int == true)
{

/**  is 演算子を使って obj が int 型であるかを確認します。 **/

/**  型が一致すれば条件は true になり、以下のコードが実行されます。 **/


    // objがint型である場合に実行されるコードです。
    Console.WriteLine("objはint型です。"); 
    // コンソールにメッセージを表示します。

    /**  obj が int 型である場合、コンソールにメッセージを出力します。。 **/
}

● 型の確認やキャストを使うことで、
C# ではオブジェクトの型に応じた処理を安全に行うことができます。

0
0
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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?