ASP.NET MVC 3 で jQuery Mobile を使ってみる(その2)

前回の記事でどんな画面になるかを書いたので、プログラムについて書いていきます 🙂

最初に注意点などを。この ASP.NET MVC 3 でjQuery Mobile を使ってみようというのは、jQuery Mobile を現時点の MVC 3 で使おうとするとどうなるかな、という興味から始めてみたものです。作っている最中に気がついた不具合には対処していますが、まだ気がついていない点などがある可能性があります。何か不具合や気がついた点などありましたら、知らせていただけると不具合などへの対応を考えることができるので、ありがたいです 😉

それでは作成の話に戻って、まずはプロジェクトを作って、必要なモジュールを NuGet を使って導入します。例示のソースではプロジェクト名を「GetExternalXml001」としています。

  • ソリューション・エクスプローラー のプロジェクトの上で右クリック
  • 表示されるメニューから Manage NuGet Packages… を選択
  • Updates を選択すると更新対象が表示されます。EntityFramework と jQuery を使うので更新しておきます。更新対象をクリックすると Update ボタンが表示されるのでクリックします。
  • Online を選択し、検索欄に jQuery を入力
  • jQuery Mobile が表示されるので選択
  • Install ボタンをクリック

以上で必要な物が揃ったので、NuGet のウィンドウ右下の Close ボタンをクリックして NuGet を閉じます。

次に、更新作業によって jQuery のスクリプトファイルの名称が変わっている(ファイル名にバージョン番号部分がある)ので、 Views\Shared\_Layout.cshtml に記述されている jQuery のスクリプトファイルへの参照を変更します。

ここまでで準備が完了です 🙂

モデル

まずは、モデルを作ります。モデルは「RSS で取得した新刊情報を記録する Book.css」「RSS からの取得日時を記録する UpdateInfo.cs」「情報通知先のメールアドレスの入力で利用する NoticeInfo.cs」の3つです。

Book.cs

using System;
using System.ComponentModel.DataAnnotations;

namespace GetExternalXml001.Models
{
    public class Book
    {
        public int Id { get; set; }
        [Display(Name = "タイトル")]
        public string Title { get; set; }
        public string Link { get; set; }
        [Display(Name = "概要")]
        public string Description { get; set; }
        [Display(Name = "著者")]
        public string Author { get; set; }
        [Display(Name = "刊行日")]
        public DateTime? PublicationDay { get; set; }
    }
}

UpdateInfo.cs

using System;

namespace GetExternalXml001.Models
{
    public class UpdateInfo
    {
        public int UpdateInfoId { get; set; }
        public DateTime Date { get; set; }
    }
}

NoticeInfo.cs

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace GetExternalXml001.Models
{
    public class NoticeInfo
    {
        [DataType(DataType.EmailAddress)]
        [Display(Name = "メールアドレス")]
        [Required]
        public string MailAddress { get; set; }
        public int Id { get; set; }
        [HiddenInput(DisplayValue = false)]
        public string Title { get; set; }
        [HiddenInput(DisplayValue = false)]
        public string Url { get; set; }
    }
}

データアクセス系

次にデータアクセス系。プロジェクトに DAL フォルダを追加します。作るのは「BooksContext.cs」「BooksInitializer.cs」「IBooksRepository.cs」「BooksRepository.cs」の4つです。

BooksContext.cs

using System.Data.Entity;
using GetExternalXml001.Models;

namespace GetExternalXml001.DAL
{
    public class BooksContext : DbContext
    {
        public DbSet<Book> Books { get; set; }
        public DbSet<UpdateInfo> UpDateInfos { get; set; }
    }
}

BooksInitializer.cs

using System.Data.Entity;

namespace GetExternalXml001.DAL
{
    public class BooksInitializer : DropCreateDatabaseIfModelChanges<BooksContext> { }
}

IBooksRepository.cs

using System;
using System.Linq;
using GetExternalXml001.Models;

namespace GetExternalXml001.DAL
{
    interface IBooksRepository
    {
        /// <summary>
        /// Books テーブルの全レコードを削除します。
        /// </summary>
        void ClearBooks();
        /// <summary>
        /// Books テーブルにレコードを追加します。
        /// </summary>
        /// <param name="book"></param>
        void AddBook(Book book);
        /// <summary>
        /// Books テーブルへの IQueryable アクセスを提供します。
        /// </summary>
        /// <returns></returns>
        IQueryable<Book> FindBooks();
        /// <summary>
        /// Books テーブルから指定された ID のレコードを取り出します。
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        Book GetBook(int id);

        /// <summary>
        /// 更新日時記録レコードが存在するかどうかを返します。
        /// </summary>
        /// <returns></returns>
        bool IsExistUpdateRecord();
        /// <summary>
        /// 更新日時記録レコードから更新日時を取得して返します。
        /// </summary>
        /// <returns></returns>
        DateTime GetUpdateDate();
        /// <summary>
        /// 更新日時記録レコードを追加します。
        /// </summary>
        /// <param name="updateInfo"></param>
        void AddDate(UpdateInfo updateInfo);
        /// <summary>
        /// 更新日時記録レコードを更新します。
        /// </summary>
        /// <param name="updateInfo"></param>
        void UpdateDate(UpdateInfo updateInfo);
    }
}

BooksRepository.cs

using System;
using System.Collections.Generic;
using System.Linq;
using GetExternalXml001.Models;

namespace GetExternalXml001.DAL
{
    public class BooksRepository : IBooksRepository
    {
        private BooksContext _db;

        public BooksRepository()
        {
            _db = new BooksContext();
        }

        public void ClearBooks()
        {
            var records = FindBooks().ToList();
            records.ForEach(n => _db.Books.Remove(n));
            _db.SaveChanges();
        }

        public void AddBook(Book book)
        {
            _db.Books.Add(book);
            _db.SaveChanges();
        }

        public IQueryable<Book> FindBooks()
        {
            return _db.Books;
        }

        public Book GetBook(int id)
        {
            return _db.Books.Where(n => n.Id == id).FirstOrDefault();
        }

        public bool IsExistUpdateRecord()
        {
            return (_db.UpDateInfos.Count() != 0);
        }

        public DateTime GetUpdateDate()
        {
            return _db.UpDateInfos.First().Date;
        }

        public void AddDate(UpdateInfo updateInfo)
        {
            _db.UpDateInfos.Add(updateInfo);
            _db.SaveChanges();
        }

        public void UpdateDate(UpdateInfo updateInfo)
        {
            if (_db.UpDateInfos.Where(n => n.UpdateInfoId == updateInfo.UpdateInfoId).Count() != 1)
                throw new KeyNotFoundException("更新対象の更新日時データが見つかりません。");

            var orgUpdateInfo = _db.UpDateInfos.Where(n => n.UpdateInfoId == updateInfo.UpdateInfoId).First();
            orgUpdateInfo.Date = updateInfo.Date;

            _db.SaveChanges();
        }
    }
}

データアクセス系の最後に、Web.config へコネクションストリングを記述し、Global.asax.cs に Entity Framework の DB イニシャライズ方法の指示を記述します。

Web.config (抜粋)
BooksContext の行を追加する

<configuration>
 ... 他の記述 ...
  <connectionStrings>
      <add name="BooksContext" connectionString="data source=|DataDirectory|Books.sdf" providerName="System.Data.SqlServerCe.4.0" />
      <add name="ApplicationServices" ← これは記述済み
  </connectionStrings>

Global.asax (抜粋)
Database.SetInitializer の行を追加する

namespace GetExternalXml001
{
 ... 他の記述 ...
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas(); ← 記述済み

            RegisterGlobalFilters(GlobalFilters.Filters); ← 記述済み
            RegisterRoutes(RouteTable.Routes); ← 記述済み

            Database.SetInitializer<BooksContext>(new BooksInitializer());
        }

長くなったので、その3に続きます。


ASP.NET MVC 3 で jQuery Mobile を使ってみる (インデックス)


2 thoughts on “ASP.NET MVC 3 で jQuery Mobile を使ってみる(その2)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です