クイック スタート シリーズ MVC07 と HTML5 モバイル開発の組み合わせ_html/css_WEB-ITnose

モバイル インターネットが普及した現在、クロスプラットフォームでさまざまなデバイスと互換性のある HTML5 がますます普及しており、多くの企業が以前の非 HTML5 Web サイト アプリケーションを徐々に HTML5 に変換しています。 HTML5 アプリケーションの作成 コードのセットは、さまざまな物理端末デバイスやブラウザと互換性があり、システムの保守性と拡張性が大幅に向上します。同時に、HTML5 は、新しいアーキテクチャ要素、Cookie に代わる Web ストレージ テクノロジ、WebSocket など、多くの新機能を提供します。これにより、Web サイト アプリケーションが新しいビジネス環境や技術アップデートにさらに適応できるようになります。

このシステムの Web サイト モジュールは、.NET テクノロジ スタックの ASP.NET MVC フレームワークを使用します。このフレームワークは、Microsoft によって開始されたオープン ソース フレームワークです。関連するソース コードは、Codeplex.com Web サイトで見つけることができます。 。 7 年以上の開発を経て、この技術フレームワークは現在バージョン 5.1 に開発されており、モバイル クライアント テンプレート、WebAPI テンプレート、OAuth 認証、および現在のインターネット ベースの開発を容易にするその他の機能を含む新機能が追加されています。テーマのある背景を持つプロジェクト向け。

実際のプロジェクトでは、次の 2 つの主な問題があります。それは、実際のユーザーが使用する端末デバイスのメーカーとモデルが異なる可能性があること、および異なる Web 端末で適切なスタイルを表示する方法であることです。ASP は 2 つのビュー エンジンを提供します。 、WebForm および Razor はデフォルトでサポートされませんが、HTML5 ページのレンダリングをサポートするようにビュー エンジンを拡張する方法。実際に選択される技術的ソリューションは、メディア クエリなどの技術的手段を使用してレスポンシブな CSS3 デザインを実装し、カスタムの静的 HTML5 ビュー エンジンで ASP.NET MVC フレームワークを拡張することです。次に、プロジェクトにおける 2 つのソリューションの実装と応用について詳しく紹介します。

まず、レスポンシブ Web レイアウトを紹介します。この概念は、2010 年 5 月に Ethan Marcotte によって初めて提案されました。その目的は、Web サイトを複数の端末に対応させることであり、端末ごとに特定のバージョンを開発することではありません。 、モバイルインターネットに関連する問題点を解決するために登場したと言えます。実際、現在運営されている大規模な Web サイトの多くは依然として複数の Web サイト プログラムを維持しており、異なる端末にサービスを提供するために異なるドメイン名を使用しているものもあります。同時に、モバイル Web ページのビジネス機能はある程度削除されることが多く、優れたユーザー エクスペリエンスを提供できますが、これは最も合理的な解決策ではありません。ユーザー インターフェイスを可能な限り統一する必要があります。レスポンシブ ページ レイアウトの具体的な実装には、主に次の手順が含まれます。

最初のステップは、HTML ページの先頭部分に viewport という名前のメタ要素を追加することです。Viewport は、モバイル デバイスの画面に合わせてサイズを設定できる仮想ウィンドウを表します。コードは次のとおりです。 。

1  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />2 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>View Code

Content 属性の「width=device-width」は、幅が現在のデバイスの幅であることを意味します。「inial-scale=1」は、初期スケーリング係数が 1 であることを意味します。 -scalable=0" は、手動ユーザー スケーリングがサポートされていないことを意味します。同時に、IE6 などの古いブラウザと互換性を持たせるために css3-mediaqueries.js が追加されます。

2 番目のステップは、メディア クエリ モジュールを使用して、さまざまなデバイスの表示画面サイズに応じてさまざまな CSS ファイルをインポートすることです。このモジュールを適用するには、コンテンツの 2 つの部分を変更する必要があります。1 つは、異なる条件で 3 つの CSS ファイルを HTML ファイルに追加することであり、もう 1 つは、CSS ファイル内の元のコンテンツを指定された形式でラップすることです。コードを以下に示します。

1 //Html文件中：2 <link rel="stylesheet" type="text/css" media="only screen and (min-width:900px)" href="/content/theme/base/normalScreen.css" />3 <link rel="stylesheet" type="text/css" media="only screen and (min-width:480px), only screen and (max-device-width:900)" href="/content/theme/base/smallScreen.css" />4 <link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="/content/theme/base/tinyScreen.css" />5 //CSS文件中：6 @media screen and (min-width:900px) {7 /*正常CSS内容，省略*/8 }View Code

HTML ファイルでは、Media 属性の「screen and (min-width:900px)」は、メディア タイプが screen であり、画面の最小幅が 900 ピクセルであることを示します。キーワードによりメディアがサポートされなくなります。クエリ デバイスはスタイル ファイルを無視し、href 属性は現在の条件で参照される CSS ファイル パスです。一般に、表示される画面幅が 480 ピクセル未満のデバイスは携帯電話、画面幅が 480 ～ 900 ピクセルのデバイスはタブレット、画面幅が 900 ピクセルを超えるデバイスはデスクトップ コンピュータです。 CSS ファイルでは、ページ内のメディア属性をマップするために @media セグメントが追加されます。ブロックに含まれるコンテンツは、さまざまなデバイスでのスタイルのレイアウトの詳細を示すものです。継承調整によって行われます。

最後のステップは主に、相対的な幅、相対的なフォント サイズ、フロー レイアウト、アダプティブ ピクチャなどの使用を含む、フロントエンド開発の詳細を処理することです。これは従来のページ開発と同様です。ここでは、展開されていないことについて 1 つずつ説明します。最終的なレンダリングは次のとおりです。レスポンシブ ページ レイアウト テクノロジを適用すると、同じコンテンツが異なる方法でレンダリングされることがわかります。

接下来介绍如何在ASP.NET MVC框架中扩展自定义的视图引擎，使得框架能与HTML5技术无缝的衔接。之所以选择ASP.NET MVC框架作为Web前端主要构件基础，除了之前所提到的一些支持移动互联网方面的新特性外，它内生所具备的高性能，高扩展性也起到了很大的作用。相对与重量级的WebForm框架，该框架显得非常的轻量级，使得页面渲染所消耗的资源得到了大幅的减少，并保留了认证、安全和本地缓存等模块的支持。此外，该框架提供了极强的扩展性，无论是自行修改框架，还是在已有项目中增减业务模块，都非常的方便。这一点，和JAVA阵营的J2EE技术很相似，但同时又具有很高的稳定性和较高的开发效率。例如可以自定义URL路由美化URL并提升搜索引擎排名，自定义数据绑定支持不同数据格式的序列化和反序列化，自定义视图引擎应对不同的业务场景等。接下来，具体介绍如何实现自定义的HTML5视图引擎，包含以下的步骤。

第一步，创建自定义的HTML5视图。它是读取HTML5文件并呈现的基础，需要实现 System.Web.Mvc .IView 接口，并实现接口中的Render方法，该方法主要通过流的方式读取指定的HTML5文件并渲染到页面，该部分内容比较简单，简化的代码如下所示。

 1 public class HTML5View : IView 2 { 3 public string FileName { get; private set; }//文件名 4 public HTML5View(string fileName) 5 { 6 this.FileName = fileName; 7 } 8   9 public void Render(ViewContext viewContext, TextWriter writer)10 {11 byte[] buffer = null;12 using (var fs = new FileStream(this.FileName, FileMode.Open))13 {14 buffer = new byte[fs.Length];15 fs.Read(buffer, 0, buffer.Length);16 }17 writer.Write(Encoding.UTF8.GetString(buffer));//读取文件并渲染18 }19 }View Code

第二步，创建自定义缓存。由于HTML5FileView中都是静态的内容，很自然的需要构建相应的缓存用于提高性能。创建页面的缓存Key对象HTML5ViewCacheKey，实现GetHashCode方法，通过对Controller和View的名称进行简单的Hash组合运算等到缓存内容的Key，并实现Equals方法用于比较，简化的代码如下所示。

 1  public class HTML5ViewCacheKey 2 { 3 public string ControllerName { get; private set; } 4 public string ViewName { get; private set; } 5 public HTML5ViewCacheKey(string controllerName, string viewName) 6 { 7 this.ControllerName = controllerName ?? string.Empty; 8 this.ViewName = viewName ?? string.Empty; 9 }10 11 public override int GetHashCode()12 {13 return this.ControllerName.ToLower().GetHashCode() ^ this.ViewName.ToLower().GetHashCode();14 } 15 16 public override bool Equals(object obj)17 {18 HTML5ViewCacheKey key = obj as HTML5ViewCacheKey;19 if (null == key)20 return false;21 return key.GetHashCode() == this.GetHashCode();22 }23 }View Code

第三步，创建视图引擎HTML5ViewEngine。该类实现了IViewEngine接口，字典类viewEngineResults结合第二步中构建的缓存类用于缓存渲染后的视图。方法FindView首先解析路由信息获得控制器的名称，之后判断请求是否支持缓存，若不支持缓存，则直接通过 InternalFindView 方法 获得视图。反之，判断请求视图是否在本地缓存中，若存在直接返回，若不存在则调用方法获取并缓存，写缓存时注意加锁。 InternalFindView 方法中，借助面向约定编程的思路到指定的路径中寻找到对应的文件HTML5，最终完成URL信息与文件的映射。

 1 public class HTML5ViewEngine : IViewEngine 2 { 3 private Dictionary<HTML5ViewCacheKey, ViewEngineResult> viewEngineResults = 4 new Dictionary<HTML5ViewCacheKey, ViewEngineResult>(); 5 private static object syncHelper = new object(); 6   7 public ViewEngineResult FindPartialView(ControllerContext controllerContext, string partialViewName, bool useCache) 8 { 9 return this.FindView(controllerContext, partialViewName, null, useCache);10 }11 12 public ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)13 {14 string controllerName = controllerContext.RouteData.GetRequiredString("controller");15 var key = new HTML5ViewCacheKey(controllerName, viewName);16 ViewEngineResult result = null;17 if (!useCache)//是否支持缓存18 {19 result = InternalFindView(controllerContext, viewName, controllerName);20 viewEngineResults[key] = result;21 return result;22 }23 if (viewEngineResults.TryGetValue(key, out result)) //视图是否已经在缓存中24 {25 return result;26 }27 28 lock (syncHelper)//锁定视图数据写入缓存过程29 {30 if (viewEngineResults.TryGetValue(key, out result))31 {32 return result;33 }34 result = InternalFindView(controllerContext, viewName, controllerName);35 viewEngineResults[key] = result;36 return result;37 }38 }39 40 private ViewEngineResult InternalFindView(ControllerContext controllerContext, string viewName, string controllerName)41 {42 string[] searchLocations = new string[]{43 string.Format("~/staticViews/{0}/{1}.html", controllerName.ToLower(), viewName.ToLower()),44 string.Format("~/staticViews/Shared/{0}.html", viewName.ToLower())45 };46 47 string filename = controllerContext.HttpContext.Request.MapPath(searchLocations[0]);48 if (File.Exists(filename))49 {50 return new ViewEngineResult(new HTML5View(filename), this);51 }52 filename = string.Format(@"\staticViews\shared\{0}.html", viewName.ToLower());53 if (File.Exists(filename))54 {55 return new ViewEngineResult(new HTML5View(filename), this);56 }57 return new ViewEngineResult(searchLocations);58 }59 60 public void ReleaseView(ControllerContext controllerContext, IView view)61 {62 }63 }View Code

最后一步，将视图自定义的视图引擎添加到Global.asax文件的Application_Start方法中，完成该引擎的注册。同时注意需要将该引擎的优先级设为最高，使得系统优先使用该引擎对视图相关请求进行响应。

1  public class MvcApplication : System.Web.HttpApplication2 {3 protected void Application_Start()4 {5 //省略6 ViewEngines.Engines.Insert(0, new HTML5ViewEngine());7 }View Code

通过以上步骤，基本上将ASP.NET MVC框架，HTML5技术，移动互联网开发技术有机的整合到了一起。

Tip: 本文由于是学习需要，主要参考了以下书目。

[1]蒋金楠. ASP.NET MVC4框架揭秘[M]. 上海:电子工业出版社, 2012. 419-421

[2]唐俊开. HTML5移动Web开发指南[M]. 上海:电子工业出版社, 2012. 52-54