ASP.NET MVC Framework : TaskList チュートリアル

Creating a Tasklist Application with ASP.NET MVC : The Official Microsoft ASP.NET Site 

1.”ファイル" -> "新規作成" -> "プロジェクト"

WS000021

2. データベース作成

2-1. ”デバッグ"で実行

WS000022

2-2. ”Login" -> "register"

WS000023 WS000024 WS000025

2-3. DBが作成されます。

2-4.プロジェクトを保存して再起動したりするとDBが追加されています。

WS000030

3. 不要なファイルの削除

Views/Home/Index.aspx とビハインドコード。

Controllers/HomeControllers.cs

 

4. /Home/Index の追加

4-1. View/Homeで”追加"->"新しい項目"-> "MVC View Page"

WS000026

4-2. Controllers で”追加"->"新しい項目"-> "MVC Controller Class"

WS000027

そして以下のようにIndex()メソッドを修正

        public ActionResult Index()
        {
            // Add action logic here
            return View();
        }
4-3. "デバッグ"で真っ白け
WS000028 
 
5. "登録"をクリックすると登録フォームが開くようにする
4-1. Views/Home/Index.aspxに/Home/Create アンカーをつける
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MyTasks.Views.Home.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <div>
    
    <hr />
       <a href="/Home/Create">Add new Task</a>
    </div>
</body>
</html>
4-2. Controllers/HomeController.cs に Create() メソッドを追加して Viewを表示するようにする。
        public ActionResult Create()
        {
            return View();
        }

4-3. View/Home/Create.aspx を追加(View/Homeで”追加"->"新しい項目"-> "MVC View Page")

        <h1>Create New Task</h1>
        <form method="post" action="/Home/CreateNew" >   
        <label for="task">Task:</label>
        <input type="text" name="task" />
        <br /> 
        <input type="submit" value="Add Task" />
        </form>

4-4. "デバッグ"でフォームが表示

WS000029

 

5. "Add Task"でDB登録できるようにするためにモデルの追加

5.1. テーブルの作成

IF  EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[Tasks]') AND type in (N'U'))
DROP TABLE [dbo].[Tasks]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[Tasks]') AND type in (N'U'))
BEGIN
CREATE TABLE [dbo].[Tasks](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Task] [nvarchar](300) NOT NULL,
	[IsCompleted] [bit] NOT NULL,
	[EntryDate] [datetime] NOT NULL,
 CONSTRAINT [PK_Tasks] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
END
GO
5.2. Modelsで"追加"->"新しい項目"->"Linq to SQL" でTaskListクラスを追加
WS000031 
5.3. Tasks テーブルをTaskList.dbmlにドラッグアンドドロップして保存。
image 
 
6. CreateNewコントローラの追加(Controllers/HomeController.csにCreateNewメソッド追加,dbクラスメンバ変数追加 )
   
 private Models.TaskListDataContext db = new  Models.TaskListDataContext();
         public ActionResult CreateNew(string task)
        {
            Models.Tasks newTask = new Models.Tasks();

            newTask.Task = task;
            newTask.IsCompleted = false;
            newTask.EntryDate = DateTime.Now;

            db.Tasks.InsertOnSubmit(newTask);
            db.SubmitChanges();

            return RedirectToAction("Index");   // Redirect to Index
        }
7. "デバッグ"登録されることを確認
登録後リダリレクト。
WS000032 
DBに入っています。
image 
8. Indexで一覧が表示されるようにする。
8-1. Controllers/HomeController.cs でIndex()メソッドでデータ取得
        public ActionResult Index()
        {
            var tasks = from t in db.Tasks orderby t.EntryDate descending select t;

            return View(tasks.ToList());
        }
8-2. Views/Home/Index.aspx.cs の  ViewPageを変更
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyTasks.Views.Home
{
    public partial class Index : ViewPage<List<Models.Tasks>>
    {
    }
}
8-3. View/Home/Index.aspxに一覧を表示
    <h1>My Tasks</h1>   
    <ul>
    <%
        foreach ( var t in ViewData.Model)
        {
           %>
           <li>                
                <%=t.EntryDate.ToShortDateString() %> -- <%=t.Task %>             
            </li>
           <%
        }
    %>
    </ul>

8-4. デバッグで確認

WS000033 
9. タスクの消しこみ
9-1. View/Home/Index.aspxで、終了タスクは<del>、未終了にはCompleteへのアンカーをつける
    <h1>My Tasks</h1>    
    <ul>
    <%
        foreach ( var t in ViewData.Model)
        {
           %>
           <li> 
           <% if (t.IsCompleted)
              { %>
                <del>
                <%=t.EntryDate.ToShortDateString() %> -- <%=t.Task %>
                </del>
           <% }
              else
              { %>
                <a href="/Home/Complete/<%=t.Id.ToString() %>">Complete</a>
                <%=t.EntryDate.ToShortDateString() %> -- <%=t.Task %>
           <% } %>
           </li>
           <%
        }
    %>
    </ul>

9-2. Complete() メソッドをHomeController.csに追加

        public ActionResult Complete(int Id)
        {
            var tasks = from t in db.Tasks where t.Id == Id select t;

            foreach (var t in tasks)
            {
                t.IsCompleted = true;
            }
            db.SubmitChanges();

            return RedirectToAction("Index");   //Redirect to Index
        }
9-3. デバッグで確認
"Compelte"で消しこみ確認。

WS000034

カテゴリー: 未分類 パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中