使用 DevExpress DXperience 12.1 创建 iOS 和移动设备友好的 ASP.NET MVC Web 应用程序

引言

DevExpress是为 .NET 开发人员提供工具和组件的最大和最著名的公司之一。他们从事这项业务已有近 15 年，并且拥有为开发人员提供可靠解决方案的可靠记录。在本文中，我将研究最新的 DevExpress ASP.NET 组件，特别是 12.1 版本中引入的组件的新 iOS 主题。

已安装的内容

安装 ASP.NET 控件时，一系列 Visual Studio 模板会添加到“新建项目”对话框中

其中包括标准 Web 应用程序、空 Web 应用程序、表格 Web 应用程序和 Outlook Inspired Web 应用程序。它们都具有经典的 ASP.NET Web Forms 和 ASP.NET MVC 风格。

iOS 主题

在本次评测中，我将重点介绍刚刚添加到最新版本中的全新 iOS 主题。在 DXperience 12.1 包中，您将获得一组预定义的主题，这些主题使您可以立即为您的 Web 应用程序获得时尚的专业外观。除了 iOS 主题，您还可以获得 Default、Aqua、Black Glass、Dev Ex、Glass、Office2003Blue/Olive/Silver、Office2010 Black/Blue/Silver、Plastic Blue、Red Wine、Soft Orange 以及 Youthful。

您会注意到，所有图形用户界面元素都比您习惯的更大，所有这些都是为了使视觉元素更易于从触摸设备（如 iPhone/iPod/iPad 以及 Android 和 Windows Phone 移动设备）使用。

设备相关主题

虽然 iOS 主题非常适合移动设备，但对于普通的桌面客户端来说，它可能有点过于宽敞。解决此问题的一种方法是仅对移动设备使用 iOS 主题，而对于其他设备，则切换到更以桌面为中心的主题。这可以通过使用 User Agent 来检测移动设备来实现。大多数（如果不是全部）移动设备都会显示一个用户代理字符串，其中包含单词 Mobile。例如，iPad 将显示如下内容

Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

Windows Phone 通常会使用

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)

最后，在 Ice Cream Sandwich 上运行 Chrome 的通用 Android 设备将具有此 User Agent 字符串

Mozilla/5.0 (Linux; Android 4.0.4; SGH-I777 Build/Task650 & Ktoonsez AOKP) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

它们都有一个共同点，那就是字符串“mobile”，所以这就是我们要检查的内容。

在 global.asax.cs 文件中，只需添加代码来处理 Application_PreRequestHandlerExecute 方法。

protected

void Application_PreRequestHandlerExecute(object sender, EventArgs e)
{
  if (Context.Request.UserAgent.ToLower().Contains("mobile"))
  {
    DevExpressHelper.Theme = "iOS";
  }
  else
  {
    DevExpressHelper.Theme = "Office2010Black";
  }
}

使用 iPad 设备进行测试

让我们首先使用桌面浏览器浏览到我们的测试页面。

一个相当标准的桌面主题。

让我们用 iOS 模拟器进行测试，看看是否有效。

正如您所看到的，我们现在已经切换到对移动用户来说更加触摸友好的主题，而桌面用户将体验到更传统的主题。

结论

移动设备是一个快速扩张的市场；越来越多的用户在其手机和平板电脑上消费内容。重要的是，您的面向公众的网站要提供尽可能最好的用户体验。DevExpress 的新 iOS 主题将通过使您的 ASP.NET Web 应用程序提供更加触摸友好的体验来帮助您实现这一点。

您可以在此处下载完整的 DevExpress DXv2 工具套件的免费试用版。

材料连接披露：我免费收到了上述一种或多种产品或服务，希望我会在我的博客上提到它。 无论如何，我只推荐我个人使用的产品或服务，并相信我的读者会喜欢。 我正在根据联邦贸易委员会的 16 CFR，第 255 部分：“关于在广告中使用背书和推荐的指南”披露这一点。