请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

给网站添加移动端模板


为网站添加移动端模板的思路,一是实现客户端来源的判断filter,二是实现移动端的模板提供器,三是制作移动端模板。
首先、实现客户端来源的判断filter
主要代码如下:
OnActionExecuting方法,执行时判断是否是移动客户端,本例以session做为客户选择的标记,当然也可以用cookie
Apply(RequestContext context)方法:对满足条件的访问应用filter
bool IsApplied(RequestContext context)方法:判定是否应用了filter
 bool IsMobile(RequestContext filterContext)方法,判定来访客户端是否来自移动端。
void OnResultExecuting(ResultExecutingContext filterContext)方法,实现移动端来访时支持移动端和电脑端模板的切换。
类如下:
 public class MobileClientFilter : FilterProvider,IActionFilter, IResultFilter
    {
        private readonly IWorkContextAccessor _workContextAccessor;
        private readonly dynamic _shapeFactory;
        public MobileClientFilter(IWorkContextAccessor workContextAccessor,
             IShapeFactory shapeFactory)
        {
            T = NullLocalizer.Instance; _shapeFactory = shapeFactory;
            _workContextAccessor = workContextAccessor;
        }


        public Localizer T { get; set; }


        public void OnActionExecuting(ActionExecutingContext filterContext)
        {
            //手机端访问
            if (IsMobile(filterContext.RequestContext) && ThemeFilter.IsApplied(filterContext.RequestContext))
            {
                var userClient = _workContextAccessor.GetContext().HttpContext.Session["userVisitClient"];
                if (userClient==null)
                {
                    Apply(filterContext.RequestContext);
                    _workContextAccessor.GetContext().HttpContext.Session.Add("userVisitClient", "mobile");
                }
                else if (userClient.ToString().ToLower() == "pc")
                {
                    Disable(filterContext.RequestContext);
                }
                else
                {
                    Apply(filterContext.RequestContext);
                }
            }
        }


        public void OnActionExecuted(ActionExecutedContext filterContext) { }


        public static void Apply(RequestContext context)
        {
            // the value isn't important
            context.HttpContext.Items[typeof(MobileClientFilter)] = null;
           
        }


        public static bool IsApplied(RequestContext context)
        {
            return context.HttpContext.Items.Contains(typeof(MobileClientFilter));
        }
        public static void Disable(RequestContext context)
        {
            context.HttpContext.Items.Remove(typeof(MobileClientFilter));
        }
        public static bool IsMobile(RequestContext filterContext)
        {


            string u = filterContext.HttpContext.Request.ServerVariables["HTTP_USER_AGENT"];
            if (string.IsNullOrEmpty(u))//主要针对ajax,wcf,之类
                return false;
            Regex b = new Regex(@"android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            Regex v = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4))))
            {
                return true;
            }
            else
                return false;
        }


        public void OnResultExecuting(ResultExecutingContext filterContext)
        {
            // ignore tracker on admin pages
             if (!(IsMobile(filterContext.RequestContext) && ThemeFilter.IsApplied(filterContext.RequestContext)))
            {
                return;
            }


            // should only run on a full view rendering result
            if (!(filterContext.Result is ViewResult))
                return;


            var context = _workContextAccessor.GetContext();
            var footer = context.Layout.Footer;
            footer.Add(_shapeFactory.MobileClient(), ":after");
        }


        public void OnResultExecuted(ResultExecutedContext filterContext)
        {
        }
}
MobileClient.cshtml在view根目录下,内容如下:
<div class="row">
    <a href="@Url.Action("Apply", new { Controller = "MobileClient", Area = "Wkong.Infrastructure", returnUrl = Context.Request.RawUrl, applyClient = "mobile" })">手机版</a>|
    <a href="@Url.Action("Apply", new { Controller = "MobileClient", Area = "Wkong.Infrastructure", returnUrl = Context.Request.RawUrl, applyClient = "pc" })">电脑版</a>
</div>


其次:实现移动端模板提供器
需要实现IThemeSelector接口,返回名称为Mobile的Theme
public class MobileClientThemeSelector : IThemeSelector
    {
        private readonly ISiteMobileThemeService _siteMobileThemeService;
        public MobileClientThemeSelector(ISiteMobileThemeService siteMobileThemeService)
        {
            _siteMobileThemeService = siteMobileThemeService;
        }
        public ThemeSelectorResult GetTheme(RequestContext context)
        {//如果是移动端则返回
            if (MobileClientFilter.IsApplied(context))
            {
                return new ThemeSelectorResult { Priority =10, ThemeName = "Mobile" };               
            }
//否则,返回空
            return null;
        }


    }
再次,制作移动端模板。不在赘述。
当然,我们还可以对GetTheme方法进行修改,以其支持自定义的移动端模板,具体操作,随后补上,

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。