组合：具有ASP.NET MVC和移动浏览器定义文件的移动网站

UPDATE from 2011: These View Engines have a subtle release mode caching bug. Peter Mourfield and I have released a better MobileViewEngine for ASP.NET MVC 3 that is closer to what MVC 4 will look like. The updated blog post with the new MobileViewEngine is here.

从2011年起更新：这些View Engine有一个微妙的发布模式缓存错误。 Peter Mourfield和我为ASP.NET MVC 3发布了更好的MobileViewEngine，它更接近MVC 4的外观。 在更新的博客文章与新MobileViewEngine是在这里。

I gave a talk at Mix 09 today called File | New Company: Creating NerdDinner.com with Microsoft ASP.NET MVC. It was a fun, if challenging talk to do. I did it it with no slides at all. Just me and Visual Studio. It was one of two talks at Mix that had just code. I wonder if it'll catch on? ;)

我今天在Mix 09上做了一个演讲，名为File | File。 新公司：使用Microsoft ASP.NET MVC创建NerdDinner.com 。 如果要做挑战性的演讲，那是一种乐趣。 我做到了，没有任何幻灯片。 只有我和Visual Studio。 这是Mix上仅有代码的两个演讲之一。 我想知道它会流行吗？ ;)

Anyway, it was quite the tightrope walk. I'll post the video here as soon as it's posted on the Mix 09 Sessions Site.

无论如何，那是走钢丝的路。 我将在视频 发布到Mix 09 Sessions网站 后 立即将其发布在 这里 。

UPDATED: Here's the link to the video of my Mix09 talk:

更新：这是我的Mix09演讲视频的链接：

Session Video: File | New Company: Creating NerdDinner.com with Microsoft ASP.NET MVC

会议视频：文件| 新公司：使用Microsoft ASP.NET MVC创建NerdDinner.com

The general structure was to start a File | New Company and build as much of NerdDinner.com as I could in the 75 minutes allotted.

总体结构是启动文件| 新公司，并在分配的75分钟内尽我所能建立NerdDinner.com 。

Here's a few of the highlights...

这里是一些亮点...

XHTML严格 (XHTML Strict)

I pointed out how nice and easy it is to get a site to validate as XHTML Strict using ASP.NET MVC. You've got complete control over every bit that goes out on the wire. Kudos to Michael Bach for caring. I'm still not 100% convinced that XHTML Strict is as crucially important as the <ul-mafia/> says it is, but it's a simple thing to do it you keep the markup clean, simple and semantic. ;)

我指出了使用ASP.NET MVC将网站验证为XHTML Strict是多么容易和容易。 您已经完全控制了线路上的所有输出。 感谢Michael Bach的关心。 我仍然不是100％相信XHTML Strict就像<ul-mafia />所说的那样至关重要，但是要做到这一点很简单，只要保持标记干净，简单和语义即可。 ;)

移动和ASP.NET MVC (Mobile and ASP.NET MVC)

The talk was about developing on ASP.NET MVC, not about mobile, but it was easy to make the site available on mobile devices when I got wind of what the Mobile Browse Platform Team (in Microsoft's Dublin office) was releasing at Mix.

讨论的主题是在ASP.NET MVC上进行开发，而不是在移动设备上进行开发，但是当我对移动浏览平台团队(位于Microsoft都柏林办事处的信息)在Mix上发布的内容很感兴趣时，很容易使该网站在移动设备上可用。

They released the Mobile Device Browser File on CodePlex under the Ms-PL license. It's created from a database from many sources, including the popular WURFL mobile device capabilities database, actual device tests, UAProfs, contributions, logs, and elsewhere. These sources are composited, stored in a database of thousands and thousands of devices. Then that's combined with the actual logs of mobile device traffic and this file with the top 1500 or so actual devices is created to get the broadest reach with a manageable file size.

他们发布了移动设备浏览器文件 在Ms-PL许可下的CodePlex上。 它是从许多来源的数据库中创建的，包括流行的WURFL移动设备功能数据库，实际设备测试，UAProfs，贡献，日志等。 这些源经过组合，存储在成千上万个设备的数据库中。 然后，将其与移动设备流量的实际日志结合在一起，并创建前1500个左右的实际文件，从而以可管理的文件大小来获得最大的覆盖范围。

It's a mobile.browser file that contains definitions for hundreds of the top individual mobile devices and browsers that hit Microsoft mobile sites. At run time, ASP.NET uses the information in the request header to determine what type of device/browser has made the request.

这是一个mobile.browser文件，其中包含数百种访问Microsoft移动网站的顶级独立移动设备和浏览器的定义。 在运行时，ASP.NET使用请求标头中的信息来确定发出请求的设备/浏览器的类型。

It detects the mobile device hitting your site and makes available 67 capabilities describing the requesting device. These capabilities range from screen size to cookie support to CSS support. It's everything you need to adaptively render content for mobile phones and devices.

它检测到移动设备访问您的站点，并提供67个描述请求设备的功能。 这些功能范围从屏幕大小到Cookie支持再到CSS支持。 这是为手机和设备自适应呈现内容所需的一切。

This information is exposed to the developer through the Request.Browser property. The format of the .browser file is XML and the schema is defined here: Browser Definition File Schema. The Browser Definition File was introduced in the .NET Framework version 2.0. In earlier versions of the .NET Framework, the browserCaps element was used to define browser definitions in configuration files.

此信息通过Request.Browser属性向开发人员公开。 .browser文件的格式是XML，并且在此处定义架构：浏览器定义文件架构。 浏览器定义文件是.NET Framework 2.0版中引入的。 在.NET Framework的早期版本中， browserCaps元素用于在配置文件中定义浏览器定义。

Now, ASP.NET MVC doesn't know anything about Mobile. Here's what I did to enable NerdDinner on Windows Mobile and iPhone.

现在， ASP.NET MVC对移动一无所知。 这是我在Windows Mobile和iPhone上启用NerdDinner所做的工作。

First, I downloaded the new Mobile Device Browser File and put it in \App_Browsers\Devices in my ASP.NET project. Just by dropping this file in the App_Browser\Devices folder, I automatically get all these 67 capabilities populated in the Request.Browser option. I can address them like Request.Browser["AjaxSupportsGetElementByID"]. Just open up the mobile.browser file to see all your choices. There's also extensive documentation. They'll welcome  bug reports and patches.

首先，我下载了新的移动设备浏览器文件，并将其放在ASP.NET项目的\ App_Browsers \ Devices中。 只需将此文件拖放到App_Browser \ Devices文件夹中，即可自动在Request.Browser选项中填充所有这67种功能。 我可以像Request.Browser [“ AjaxSupportsGetElementByID”]这样解决它们。 只需打开mobile.browser文件即可查看所有选择。 也有大量的文档。 他们将欢迎错误报告和补丁。

The guys at Ascentium that I met at Mix threw me some code and we created a basic MobileCapableWebFormViewEngine. Kind of a long name, but basically I need to have ASP.NET MVC look in different folders for a View if the device is mobile.

我在Mix遇到的Ascentium的家伙给了我一些代码，我们创建了一个基本的MobileCapableWebFormViewEngine。 名字有点长，但是如果设备是移动的，则基本上我需要让ASP.NET MVC在不同的文件夹中查找View。

For example, ordinarily if you're in the Home Controller and the Index action, the ViewEngine's FindView() method gets called and will look in /Views/Home for Index.aspx.

例如，通常，如果您在Home Controller和Index动作中，则将调用ViewEngine的FindView()方法，并将在/ Views / Home中查找Index.aspx。

The Mobile ViewEngine needs to detect the device and change where we look. I could just make a "Mobile" version and call it a day. However, since we've got a nice tree structure here, why not set up:

Mobile ViewEngine需要检测设备并更改外观。 我可以制作一个“移动”版本，并称之为一天。 但是，由于这里有一个不错的树结构，为什么不设置：

• /Views/Home
  /浏览/首页
• /View/Home/Mobile
  /查看/首页/移动
• /View/Home/Mobile/iPhone
  /查看/首页/移动/ iPhone
• /View/Home/Mobile/MobileIE
  /查看/首页/移动/ MobileIE

etc...so, now we can have many different files, any combination of them.

等等...所以，现在我们可以有许多不同的文件，它们可以任意组合。

We can also have things fallback neatly. For example, we can create a really specific View, say, for a Nokia "Whatever" when it needs the Details, but that Nokia will use the standard Mobile view in all other situations. This is accomplished by just the folder convention.

我们还可以使事情轻松地回退。 例如，当需要“详细信息”时，我们可以为诺基亚“无论如何”创建一个真正特定的视图，但诺基亚将在所有其他情况下使用标准的“移动”视图。 仅通过文件夹约定即可完成此操作。

Here's a simple example to start.:

这是一个简单的示例开始：

public class MobileCapableWebFormViewEngine : WebFormViewEngine
{
    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        ViewEngineResult result = null;
        var request = controllerContext.HttpContext.Request;

        // Avoid unnecessary checks if this device isn't suspected to be a mobile device
        if (request.Browser.IsMobileDevice)
        {
            result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
        }

        //Fall back to desktop view if no other view has been selected
        if (result == null || result.View == null)
        {
            result = base.FindView(controllerContext, viewName, masterName, useCache);
        }

        return result;
    }
}

This can be expanded on like this (and in a number of other ways...switch statements, tables, conventions, it's up to you to map the Views as you like.

可以像这样扩展它(以及以其他多种方式...切换语句，表，约定，这取决于您是否愿意映射视图。

public class MobileCapableWebFormViewEngine : WebFormViewEngine
{
    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        ViewEngineResult result = null;
        var request = controllerContext.HttpContext.Request;

        //This could be replaced with a switch statement as other advanced / device specific views are created
        if (UserAgentIs(controllerContext, "iPhone"))    
        {
            result = base.FindView(controllerContext, "Mobile/iPhone/" + viewName, masterName, useCache);
        }

        // Avoid unnecessary checks if this device isn't suspected to be a mobile device
        if (request.Browser.IsMobileDevice)
        {
            if (UserAgentIs(controllerContext, "MSIEMobile 6"))
            {
                result = base.FindView(controllerContext, "Mobile/MobileIE6/" + viewName, masterName, useCache);
            }
            else if (UserAgentIs(controllerContext, "PocketIE") && request.Browser.MajorVersion >= 4)
            {
                result = base.FindView(controllerContext, "Mobile/PocketIE/" + viewName, masterName, useCache);
            }

            //Fall back to default mobile view if no other mobile view has already been set
            if ((result == null || result.View == null) &&
                            request.Browser.IsMobileDevice)
            {
                result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
            }
        }

        //Fall back to desktop view if no other view has been selected
        if (result == null || result.View == null)
        {
            result = base.FindView(controllerContext, viewName, masterName, useCache);
        }

        return result;
    }

    private bool UserAgentIs(ControllerContext controllerContext, string userAgentToTest)
    {
        return (controllerContext.HttpContext.Request.UserAgent.IndexOf(userAgentToTest, StringComparison.OrdinalIgnoreCase) > 0);
    }
}

Remember when I said there were 67 capabilities for each of the devices? I might need a custom view for a device, but in many instances, I might just want to modify some small aspect of a few based on the browser's characteristics like screen width or height. I could control the Mobile ViewPort like this for phones that support it.

还记得我说的每种设备有67种功能吗？ 我可能需要一个设备的自定义视图，但是在许多情况下，我可能只想根据浏览器的特征(例如屏幕的宽度或高度)来修改其中的一些小部分。 对于支持它的手机，我可以像这样控制Mobile ViewPort。

<meta name="viewport" content="width=<%= Request.Browser["ScreenPixelsWidth"] %>, height=<%=Request.Browser["ScreenPixelsHeight"]%>"/>

A more advanced example might be this. Say I store all my images in PNG format, but I come upon a phone that doesn't support PNG. I might automatically transcode my PNGs into JPGs. Same with a phone that supports WAV but not MP3.

一个更高级的示例可能是这样。 假设我将所有图像都存储为PNG格式，但是遇到了不支持PNG的手机。 我可能会自动将PNG转换为JPG。 与支持WAV但不支持MP3的电话相同。

Windows Mobile和iPhone (Windows Mobile and iPhone)

Armed with this, it was just a few hours work for my simple NerdDinner app to get mobile enabled. Now that I'm learning more about what devices can do what, I'll check all this in and continue to add functionality.

有了这个，我简单的NerdDinner应用程序就可以启用移动设备，只需几个小时。 现在，我学习了更多有关什么设备可以做什么的知识，我将检查所有这些内容并继续添加功能。

For iPhone I used Joe Hewitt's IUI JavaScript and CSS Framework (and the iPhone Simulator). The iPhone includes a lot of -webkit CSS extensions so the view did need be custom. It just doesn't work at all on other browsers, but it looks great on the iPhone. For Windows Mobile, I downloaded the free Windows Mobile 6.1.4 Emulator Images and the Device Emulator.

对于iPhone，我使用了Joe Hewitt的IUI JavaScript和CSS框架(以及iPhone Simulator )。 iPhone包含许多-webkit CSS扩展，因此该视图确实需要自定义。 它在其他浏览器上根本无法使用，但在iPhone上看起来不错。 对于Windows Mobile，我下载了免费的Windows Mobile 6.1.4仿真器映像和设备仿真器。

Again, I can do whatever I like with the markup, so on these devices, clicking the phone number initiates a call, clicking a map takes you to a mobile map solution, etc.

同样，我可以使用标记做任何我想做的事，因此在这些设备上，单击电话号码可发起呼叫，单击地图可将您带到移动地图解决方案，等等。

I'll be checking this in to the NerdDinner CodePlex project in the next few days. I'm really stoked that these guys released this data file. I just dropped it in, and ASP.NET suddenly got a lot smarter and I can now make great sites for any device. After this prototyping exercise, it's time for me to think about the interaction design for the mobile experience, rather than just "down-porting" the desktop site.

我将在接下来的几天中将其检入NerdDinner CodePlex项目。 我真的很高兴这些家伙发布了这个数据文件。 我刚把它放进去，ASP.NET突然变得更加智能，现在我可以为任何设备创建出色的站点。 在进行了原型制作之后，是时候让我考虑一下移动体验的交互设计，而不仅仅是“向下移植”桌面站点了。

All in all, great fun, and a boon to ASP.NET and developers interested in mobile.

总而言之，这非常有趣，并且可以使ASP.NET和对移动设备感兴趣的开发人员受益。

翻译自: https://www.hanselman.com/blog/mix-mobile-web-sites-with-aspnet-mvc-and-the-mobile-browser-definition-file