为.net core网站添加通用的操作引导指南(IntroJs)

接上级领导命令, 需要为开发的网站添加一个操作引导功能,让用户进入网站后可以大概了解如何操作.

实现该功能使用intro.js插件及asp.net core中组件(由于.net core中 @html.renderaction已经移除)来完成.

点击下载introjs

一. 首先是创建components

1. 在views/shared/components(没有请新建)目录下创建”IntroJs”目录

2. 创建ViewModel实体类

    public class IntroJsViewModel
    {
        /// <summary>
        /// 区域名
        /// </summary>
        public string Area { get; set; }

        /// <summary>
        /// 控制器名
        /// </summary>
        public string Controller { get; set; }

        /// <summary>
        /// 页面名
        /// </summary>
        public string Action { get; set; }

        /// <summary>
        /// 步骤列表
        /// </summary>
        public IntroStep[] Steps { get; set; }
    }

    public class IntroStep
    {
        /// <summary>
        /// 唯一选择器
        /// </summary>
        public string Element { get; set; }

        /// <summary>
        /// 步骤序号 1 ,2 ,3 ,4
        /// </summary>
        public int Step { get; set; }

        /// <summary>
        /// 提示文本, 可以为html
        /// </summary>
        public string Intro { get; set; }

        /// <summary>
        /// 位置, left right top  可为空
        /// </summary>
        public string Position { get; set; }
    }

3. 创建ViewComponent类

    public class IntroJsViewComponent: ViewComponent
    {
        public IntroJsViewComponent()
        {

        }

        public IViewComponentResult Invoke()
        {
            var routes = RouteData.Routers[0];
            var area = RouteData.Values["Area"] as string;
            area = string.IsNullOrWhiteSpace(area) ? "" : area.ToLower();
            var controller = RouteData.Values["Controller"].ToString().ToLower();
            var action = RouteData.Values["Action"].ToString().ToLower();
            StringBuilder sb = new StringBuilder();
            string line = string.Empty;
            string filepath = System.IO.Directory.GetCurrentDirectory() + "/IntroSettings.json";
            if (File.Exists(filepath))
            {
                using (StreamReader sr = new StreamReader(filepath))
                {
                    while ((line = sr.ReadLine()) != null)
                    {
                        sb.Append(line);
                    }
                }
                var stepList = JsonConvert.DeserializeObject<List<IntroJsViewModel>>(sb.ToString());
                var step = stepList.FirstOrDefault(x =>
                    x.Area.ToLower() == area && x.Controller.ToLower() == controller && x.Action.ToLower() == action);
                step = step == null ? new IntroJsViewModel{ Steps = new IntroStep[0]}: step;
                return View(step);
            }
            return View(new IntroJsViewModel { Steps = new IntroStep[0] });
        }
    }

4. 添加默认的Default.cshtml视图文件

文件代码如下:

@using WebProject.Views.Shared.Components.IntroJs
@model IntroJsViewModel
@{

}
<script type="text/javascript" src="~/Scripts/introjs/intro.min.js"></script>
<script>
    var showIntro = true;
    var steps = [];
    $(function () {

        @{
            foreach (var item in Model.Steps)
            {
                <text>steps.push({ element: '@item.Element', intro: '@item.Intro', position: '@item.Position' });</text>
            }
        }
        if (showIntro) {
            introJs().setOptions({
                prevLabel: "上一步",
                nextLabel: "下一步",
                skipLabel: "跳过",
                doneLabel: "完成",
                showProgress: true, //显示进度条
                steps:steps
            }).start();
        }
    });

</script>

二. 在需要添加引导的页面引用该组件

一般在母版页底部进行引用.

@await Component.InvokeAsync("IntroJs")

三. 添加配置文件

在项目根目录添加”IntroSettings.json”配置文件

area和controller及action用来确定页面(可以多个)

steps节点下的element为该页面下的dom选择器,如ID等, 请务必保证唯一,否则将影响效果

step为该提示的步骤, 从数字1开始

intro为引导的文字说明

position为文字说明在该dom元素的哪个方向. left,right,top, bottom

[
  {
    "Area": "FormStat",
    "Controller": "WKEntryYear",
    "Action": "Index",
    "Steps": [
      {
        "Element": "#divContent",
        "Step": 1,
        "Intro": "这里是头部......",
        "Position": ""
      },
      {
        "Element": "#btnSearch",
        "Step": 2,
        "Intro": "搜索内容 ",
        "Position": ""
      }
    ]
  }
]

 

五. 效果图

jquery.datatables 设置语言

$(document).ready(function() {
    $('#example').dataTable( {
        "language": {
            "lengthMenu": "每页 _MENU_ 条记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
            "infoEmpty": "无记录",
            "infoFiltered": "(从 _MAX_ 条记录过滤)"
        }
    });
});

js实现图片上传即时预览

btn_upload是上传控件

photo是img标签.

function setImagePreview() {
//input
var docObj = document.getElementById("btn_upload");
//img
var imgObjPreview = document.getElementById("photo");

if (docObj.files &amp;&amp; docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '100px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "100px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}