自制一个学院信息管理系统

首先我们需要先创建一个VS2015的文件添加一个控制器和一个视图，作为基础的框架

然后我们需要引入写代码时需要使用到的插件，例如：jQuery，bootstrap，layui

将插件包含在文件中然后就可以开始写代码了（以下是基础的布局）

<div class="wrapper">
        <!--侧边导航部分 开始-->
        <div data-active-color="white" data-background-color="crystal-clear" data-image="@Url.Content("~/Content/app-assets/img/sidebar-bg/08.jpg")" class="app-sidebar">
            <div class="sidebar-header">
                <div class="logo clearfix">
                    <a href="#" class="logo-text float-left">
                        <div class="logo-img">
                            <img src="~/Content/app-assets/img/logo.png" alt="Convex Logo" />
                        </div>
                        <span class="text align-middle">CONVEX</span>
                    </a>
                    <a id="sidebarToggle" href="javascript:;" class="nav-toggle d-none d-sm-none d-md-none d-lg-block">
                        <i data-toggle="expanded" class="ft-disc toggle-icon"></i>
                    </a>
                    <a id="sidebarClose" href="javascript:;" class="nav-close d-block d-md-block d-lg-none d-xl-none">
                        <i class="ft-circle"></i>
                    </a>
                </div>
            </div>
            <div class="sidebar-content">
                <div class="nav-container">
                    <ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main">
                        <li class="has-sub nav-item">
                            <a href="#"><i class="icon-settings"></i><span data-i18n="" class="menu-title">基本信息维护</span></a>
                            <ul class="menu-content">
                                <li class="" data-src="/BaseInfoManage/Academe/index">
                                    <a href="JavaScript:;" class="menu-item">学院信息维护</a>
                                </li>
                                <li data-src="/BaseInfoManage/Grade/index">
                                    <a href="#" class="menu-item">年级信息维护</a>
                                </li>
                                <li data-src="/BaseInfoManage/Specialty/index">
                                    <a href="#" class="menu-item">专业信息维护</a>
                                </li>
                                <li data-src="/BaseInfoManage/Class/index">
                                    <a href="#" class="menu-item">班级信息维护</a>
                                </li>
                                <li data-src="/BaseInfoManage/Student/index">
                                    <a href="#" class="menu-item">学生信息维护</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="sidebar-background"></div>
        </div>
        <!--侧边导航部分 结束-->
        <!--顶部导航部分 开始-->
        <nav class="navbar navbar-expand-lg navbar-light bg-faded" style="background-image: linear-gradient(45deg,#4873b8,#92b1d4 );position:relative;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" data-toggle="collapse" class="navbar-toggle d-lg-none float-left">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <span class="text-white sysname">学校信息管理系统</span>
                    <span class="d-lg-none navbar-right navbar-collapse-toggle">
                        <a class="open-navbar-container"><i class="ft-more-vertical"></i></a>
                    </span>
                </div>
                <div class="navbar-container">
                    <div id="navbarSupportedContent" class="collapse navbar-collapse">
                        <ul class="navbar-nav">
                            <li class="dropdown nav-item mr-0">
                                <a id="dropdownBasic3" href="#" data-toggle="dropdown" class="nav-link position-relative dropdown-user-link dropdown-toggle">
                                    @*<span class="avatar avatar-online"><img id="navbar-avatar" src="~/Content/app-assets/img/portrait/small/avatar-s-3.jpg" alt="avatar"></span>*@
                                    <span class="avatar avatar-online">@ViewBag.jobNumber</span>
                                    <p class="d-none">User Settings</p>
                                </a>
                                <div aria-labelledby="dropdownBasic3" class="dropdown-menu dropdown-menu-right">
                                    <div class="arrow_box_right">
                                        <a href="javascript:;" class="dropdown-item" id="btnLoginOut"><i class="ft-power mr-2"></i><span>Logout</span></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <!--顶部导航部分 结束-->
        <!--主视图区域 开始 -->
        <div class="main-panel">
            <div class="main-content">
                <div class="content-wrapper">
                    <div class="container-fluid">
                        <!--Statistics cards Starts-->
                        <!--导航条-->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb" id="breadcrumb-main">
                                <li class="breadcrumb-item">学校信息管理系统</li>
                            </ol>
                        </nav>
                        <iframe id="content"></iframe>
                    </div>
                </div>
            </div>

            <footer class="footer footer-static footer-light">
                <p class="clearfix text-muted text-center px-2"><span>Copyright  &copy; 2018 <a href="http://bootstrapmb.com" id="pixinventLink" target="_blank" class="text-bold-800 primary darken-2">PIXINVENT </a>, All rights reserved. </span></p>
            </footer>

        </div>
        <!--主视图区域 结束 -->
    </div>

布局完成后就要写jQuery代码了，jQuery的代码并不是很多，只有左边导航菜单的点击选中事件，点击添加类，还有面包屑导航，具体代码如下

 //左侧导航菜单点击选中事件
        $("#main-menu-navigation >li li").click(function () {
            //遍历所有菜单 去除active类
            $("#main-menu-navigation >li li").each(function (index, item) {
                //判断是否存在active类，存在就先移除
                if ($(item).hasClass("active")) {
                    $(item).removeClass("active");
                }
            });
            //为当前出发事件的li添加上active类
            $(this).addClass("active");

            //设置右侧顶部的页面的导航条
            $("#breadcrumb-main").empty();//清除现有的导航信息
            //添加默认的系统级导航信息
            $("#breadcrumb-main").append('<li class="breadcrumb-item">学校信息管理系统</li>');
            //添加一级菜单导航信息
            $("#breadcrumb-main").append('<li class="breadcrumb-item">' + $(this).parent().prev("a").text().trim() + '</li>');
            //添加二级菜单导航信息
            $("#breadcrumb-main").append('<li class="breadcrumb-item">' + $(this).text().trim() + '</li>');

            var src = $(this).data("src");
            $("#content").prop("src",src);
        });

这就是我们制作一个学院信息管理系统的基本结构。

基础的结构搭建完毕后，我们就需要建造一个分区，用来存放导航栏中的页面分页。创建一个分区，是为了减少不必要的麻烦，虽然布局页面中的标签也可以跳转页面，但是，需要我们重新创建其他的文件夹，而且跳转时会有刷新的效果。添加分区我们就不用重新创建新的文件夹，可以避免了不必要的麻烦。

因为我们制作的学院信息管理系统中有五个导航栏，所以我们只需五个分区

每个分区都可以添加控制器，视图。一个控制器中五个视图，一个视图用来做布局页面，其他的四个视图用来接收数据。