3、完善网站主界面，添加JS代码，并制作视图模板

一、为EasyUI的“选项卡Tabs”增加“刷新”和“全部关闭”按钮，见下列tools代码

        <div id="mainTab" class="easyui-tabs" data-options="fit:true,
             tools:[
             {iconCls:'icon-reload',text:'刷新', handler:refreshTab },
             {iconCls:'icon-cancel',text:'关闭全部', handler:closeTab}
             ]">
            <div id="home" title="我的主页" data-options="closable:false,fit:true" style="padding:3px">
                <iframe scrolling="auto" frameborder="0" src="" style=" 100%; height: 100%;"></iframe>
            </div>
        </div>

二、添加JS代码，手动敲入script，按Tab键，页面自动补齐<script></script> ，内部新增JS代码

<script>

    //菜单树
    $('#tree').tree({
        onClick: function (node) {         //节点的点击事件  
            if (node.text == '菜单一') { var url = '/SysSampleMVC'; };
            if (node.text == '菜单二') { var url = '/SysSampleEasyUI'; };
            if (node.text == '菜单三') { var url = '/SysSample'; };

            if ($('#tree').tree('isLeaf', node.target)) {    //判断是否是叶子节点
                addTab(node.text, url);
            } else {    //如果是父节点，单击文本切换展开/折叠节点的状态
                $(this).tree('toggle', node.target);
            }
        }
    });


    //增加选项卡
    function addTab(subtitle, url) {
        if (!$("#mainTab").tabs('exists', subtitle)) {  //若选项卡不存在，生成新的选项卡
            var con = '<iframe frameborder="0" scrolling="auto" style="99.5%; height:99%"  src="' + url + '"></iframe>';
            $("#mainTab").tabs('add', {
                title: subtitle,
                content: con,
                closable: true,
                loadingMessage: '加载中......'
            });
        } else {     //若选项卡已存在，选择该选项卡
            $("#mainTab").tabs('select', subtitle);
            $("#tab_menu-tabrefresh").trigger("click");
        }
    }

    //刷新选项卡
    function refreshTab() {
        var index = $('#mainTab').tabs('getTabIndex', $('#mainTab').tabs('getSelected'));
        if (index != -1) {
            var tab = $('#mainTab').tabs('getTab', index);
            $('#mainTab').tabs('update', {
                tab: tab,
                options: {
                    selected: true
                }
            });
        }
    }

    //关闭选项卡
    function closeTab() {
        $('.tabs-inner span').each(function (i, n) {
            var t = $(n).text();
            if (t != '') {
                if (t != "我的主页") {
                    $('#mainTab').tabs('close', t);
                }
            }
        });
    }

</script>

添加完毕后的效果如下：因为未添加SysSample控制器及视图，会显示无法找到资源。

三、创建一个视图模版（布局页）

在View文件夹下面的新建Shared文件夹，新建_Index_Layout.cshtml布局页，以后系统用到的index视图基本要引用这个模版

把内部代码修改为：

<!DOCTYPE html>

<html>
<head>
    <title>Main</title>
    @Styles.Render("~/Content/themes/css")
    @Styles.Render("~/Content/themes/bootstrap/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryeasyui")
</head>
<body>
    @RenderBody()
</body>
</html>

新建_Index_LayoutEdit.cshtml布局页，以后系统用到的create、edit视图基本要引用这个模版

<!DOCTYPE html>

<html>
<head>
    <title>Main</title>
    @Styles.Render("~/Content/themes/bootstrapcss")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
</head>
<body>
    @RenderBody()
</body>
</html>