ASP.net MVC 3 - Разработка для веб и мобильного интернета

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/.

Там Брок Аллен объясняет, как заставить мобильную / немобильную функцию работать в 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();
    }
}

Теперь вы можете иметь отдельные представления для компьютеров и мобильных устройств:

1. Компьютер: Views/Home/Index.cshtml

2. Моб. Телефон: Views/Home/Index.Mobile.cshtml

И это все, что вам нужно сделать. Теперь MVC будет автоматически показывать Index.Mobile.cshtml для мобильных устройств и Index.cshtml для компьютеров.

Answer 2

Здесь вы найдете небольшое руководство, показывающее, как использовать мобильные функции asp.net mvc 4 в приложении asp mvc 3:

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 (вы должны следовать этому соглашению об именах), оно будет отображаться вместо исходного index.cshtml, если вы откроете свое приложение с iPhone .

Надеюсь, это поможет вам.

Приветствие.

Answer 3

Предлагаю вам взглянуть на проект NerdDinner - http://nerddinner.codeplex.com/ - он демонстрирует множество необходимых вам возможностей (настольный браузер / мобильный браузер).