会社という「体」は色々な要素で構成されています。  「顔」であるホームページ作成、「手足」となるスタッフを効率良く動かすための「神経信号」となる「共有ツール」、「エネルギー」である資金を管理するための「会計ツール」etc...  そんな「体をメンテナンス」についてお手伝いをするのが、私たちの務めです。
ASP.NET MVCを使ってみました その2

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

 

 

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

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

 

ASP.NET MVC入門

 

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

 

 

6.一覧画面作成

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

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

 

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を使ってみました その3

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください