Question

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

任何涵盖这种情况的好教程都会很棒。

非常感谢。

一些好的链接：

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

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

通过以上链接阅读很有意思，他们有很好的想法，只需创建一个移动区域，并为移动设备和调整控制器提供新的视图。还可以为移动设备创建一些自定义CSS样式，然后可以在移动设备的单独母版页中引用这些样式。

Answer 1

我建议您查看此博文（如果您不想/不能使用MVC 4）：http://brockallen.com/2012/05/24/mobile-support-in-mvc-3/。

Brock Allen通过使用动作过滤器解释了如何使移动/非移动功能在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]添加到同时拥有移动视图的所有控制器：

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

现在，您可以为计算机和移动设备提供单独的视图：

计算机：Views/Home/Index.cshtml
移动设备：Views/Home/Index.Mobile.cshtml

这就是你要做的一切。现在，MVC会自动向移动设备显示Index.Mobile.cshtml，并向计算机自动显示Index.cshtml。

Answer 2

我建议您查看NerdDinner项目 - http://nerddinner.codeplex.com/ - 它展示了您需要的许多功能（桌面浏览器/移动浏览器）。

Answer 3

在这里，您将找到一个小教程，展示如何在asp mvc 3应用程序中使用asp.net mvc 4移动功能：

http://christopheargento.com/2012/01/14/vues-mobiles-en-asp-net-mvc-3-profitez-de-linnovation-majeure-de-mvc-4-sans-attendre/

我知道它是法语的，但基本上你必须将这3个类添加到你的应用程序中并在global.asax文件中添加这些代码：

protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();

  ViewEngines.Engines.Clear();
  ViewEngines.Engines.Add(new CustomViewEngine());

  DisplayMode iphoneMode = new DisplayMode("Iphone");

  iphoneMode.ContextCondition = o => o.Request.UserAgent.IndexOf("iphone",  StringComparison.OrdinalIgnoreCase) > 0;

  DisplayModes.Modes.Insert(0, iphoneMode);

  RegisterGlobalFilters(GlobalFilters.Filters);
  RegisterRoutes(RouteTable.Routes);
}

一旦你这样做，如果你创建一个名为index.Mobile.cshtml的视图（你必须遵循这个命名约定），例如，如果用iPhone打开你的应用程序，它将显示而不是原始的index.cshtml

希望这会对你有所帮助。

干杯。

ASP.net MVC 3 - 为Web和移动Web开发

3 个答案: