ASP.NET MVCを使ってみましたその２ | 株式会社フリーメーク

前回から引き続き住所録の画面を作成していきたいと思います。

なお、作成に当たって以下のサイトを参考にさせていただきました。

→ASP.NET MVC入門

この場を借りて、お礼申し上げますm(_ _)m

６．一覧画面作成

住所録の一覧画面を作成します。

手順としては、前回作成したコントローラクラスに画面表示したい値を渡す処理を記述し、ビューを作成する流れです。作成したコントローラクラスをみると、

Index,

Details,

Create,

Edit,

Delete

というメソッドが作成され、それぞれ

Indexは一覧

Detailは詳細

Createは新規作成

という感じに各画面への遷移時のポストで呼ばれるメソッドで、これらをアクションと呼びます。

Indexアクションのコードは以下のように生成されています。

namespace WebAddress.Controllers
{
    public class AddressController : Controller
    {
        //
        // GET: /Address/

        public ActionResult Index()
        {
            return View();
        }

Indexアクションは、一覧画面へ遷移した際に実行されます。

ここでは、モデルクラスからDBデータ取得、画面項目への受け渡しを行うため以下のように記述します。

using WebAddress.Models;

namespace WebAddress.Controllers
{
    public class AddressController : Controller
    {
        AddressEntities _db = new AddressEntities();
        //
        // GET: /Address/

        public ActionResult Index()
        {
            // 住所録取得
            var address = from a in _db.Address
                          where a.status_flag == "0"
                          select a;
            return View(address);
        }

AddressEntitiesは前回追加したモデルの接続クラスで、using WebAddress.Modelsの追記で使用できます。このクラスからLINQ to SQL構文を使用して、アドレステーブルのレコードを取得します。状態フラグが0（通常状態）の場合だけ取得する仕様にしています。さらに取得したデータをView関数に渡し、アクションからの結果を保持するActionResult型を生成して返却し、ビュー（画面）に移行します。

次に、ビューの作成を行います。

Indexアクション内にカーソルを合わせた状態で右クリックメニューからAdd Viewを選択します。

「Create a partial view (.ascx)」はビューを分割する際に必要ですが、ここではチェックしません。「Create a strongly-typed view」は、ビューとのテーブルの関連付けをしたい場合にチェックします。ここでは、アドレステーブルと関連付けをしています。

「View Data class」には作成したモデルクラスを指定、「View content」には画面の種類「List」を選択します。なお、前回作成したモデルは一度ビルドを実施しないとコンボボックスにでてきません。

「Select master page」は使用するマスターページを指定するもので、チェックしたままでOKです。

Addボタンを押下することで、Index.aspxが生成されます。

    <% foreach (var item in Model) { %>

        <tr>
            <td>
                <%= Html.ActionLink("Edit","Edit", new { id=item.address_id }) %> |
                <%= Html.ActionLink("Details","Details", new { id=item.address_id })%> |
                <%= Html.ActionLink("Delete","Delete", new { id=item.address_id })%>
            </td>
            <td>
                <%= Html.Encode(item.address_id) %>
            </td>
            <td>
                <%= Html.Encode(item.name) %>
            </td>
            <td>
                <%= Html.Encode(item.zip_code) %>
            </td>
            <td>
                <%= Html.Encode(item.address1) %>
            </td>
            <td>
                <%= Html.Encode(item.tel_number) %>
            </td>
            <td>
                <%= Html.Encode(item.mail_address) %>
            </td>
            <td>
                <%= Html.Encode(item.status_flag) %>
            </td>
        </tr>

    <% } %>

こんな感じでアクションで取得した値を表示しています。

Html.～というのはHTMLヘルパーと呼ばれるHTMLタグ等の記述補助機能で、Html.ActionLinkはリンク作成、Html.Encodeは指定文字列に対してHTMLエンコードを行い出力します。 ActionLinkはややこしく理解にてこずった機能なので、時間があるときに使用方法をまとめたいと思います。

後はタイトル名などを適当に修正します。ちなみにActionLink関数の第1引数はリンクの名前になっております。生成された時点ではテーブルの全項目が表示されてしまうので、コードやフラグ等の表示したくない部分は自分で削除する必要があります。

ここまでの作業が終わりましたら、開発サーバをデバッグ等で実行し、次のURLを表示して下さい。ポート番号3057は環境によって変わります！！

http://localhost:3057/Address/Index

テーブルにデータが存在していれば、上記のような画面が表示されたと思います。

そして、まだまだ続きます。

→ASP.NET MVCを使ってみました　その３

ASP.NET MVCを使ってみました　その２

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル