asp.net-mvc-3 - ASP.net MVC 3 - 为网络和移动网络开发

Question

我目前已经开发了一个asp.net mvc 3 网站，现在我想制作该网站的移动版本。我已经阅读了有关移动 jquery 以及如何在 mvc 中检测移动设备的信息。但我想知道更多关于如何将网络/移动网络混合在一起的问题......我会为移动网络提供新的 Controller 和 View 吗？这将意味着大量的代码重复和高维护。

任何涵盖此场景的优秀教程都会很棒。

非常感谢。

一些好的链接:

http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application

http://www.hanselman.com/blog/ABetterASPNETMVCMobileDeviceCapabilitiesViewEngine.aspx

阅读上面的链接很有趣，他们有一些不错的想法，比如创建一个移动区域并为移动设备提供新 View 并调整 Controller 。还为移动设备创建一些自定义 css 样式，然后可以在单独的移动设备母版页中引用这些样式。

Answer 1

我建议您看看这篇博文(如果您不想/不能使用 MVC 4):http://brockallen.com/2012/05/24/mobile-support-in-mvc-3/ .

Brock Allen 解释了如何使用 Action Filter 在 MVC 3 中使用移动/非移动功能。

基本上您创建了以下类(假设您使用 C# 编写):

public class MobileAttribute : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        // is the request a view and is the client device a mobile device
        var vr = filterContext.Result as ViewResult;
        if (vr != null &&
            filterContext.HttpContext.Request.Browser.IsMobileDevice)
        {
            // determine from the current view what the mobile view name would be
            var viewName = vr.ViewName;
            if (String.IsNullOrWhiteSpace(viewName)) viewName = (string)filterContext.RouteData.Values["action"];
            var fileExtension = Path.GetExtension(viewName);
            var mobileViewName = Path.ChangeExtension(viewName, "Mobile" + fileExtension);

            // ask MVC is we have that view
            var ver = ViewEngines.Engines.FindView(filterContext, mobileViewName, vr.MasterName);
            if (ver != null && ver.View != null)
            {
                ver.ViewEngine.ReleaseView(filterContext, ver.View);

                // we do, so tell MVC to use the mobile view instead
                vr.ViewName = mobileViewName;
            }
        }
    }
}

然后您只需将 [Mobile] 添加到所有也具有移动 View 的 Controller :

[Mobile]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

现在您可以为计算机和移动设备提供单独的 View :

1. 计算机:Views/Home/Index.cshtml

2. 手机:Views/Home/Index.Mobile.cshtml

这就是您要做的全部。现在，MVC 将自动向移动设备显示 Index.Mobile.cshtml，向计算机显示 Index.cshtml。