软件 VS2017， 在安装时应该选上跟.NET相关的包，否则会创建失败，还需要重新下载VS。
文件 --> 新建项目 --> ASP.NET Web应用程序 --> 确认 选择MVC --> 勾选MVC和Web API 看一下创建好的项目 也可以运行一下，能看到默认的页面。
观察一下项目结构：
文件夹名称说明App_Data保存数据库、XML等数据文件App_Start保存项目启动时的功能配置文件Content保存项目中公用的CSS文件Controller保存控制器，MVC要求所有控制器的名称都带“Controller”后缀fonts保存Bootstrap自带的图标文件Models保存模型文件（.cs文件）Scripts保存项目引用的脚本文件Views保存视图文件Views/Shares保存可供多个视图共享的页面，如布局页、分布页等除这些文件夹之外，该项目还使用Global.asax文件来设置全局URL路由默认值，同时，还会使用根目录下的Web.config文件来配置全局应用程序。
如有需要，可以修改项目启动页。，默认情况下是当前页。 项目 --> （你的项目名）属性 --> Web --> 当前页面改为特定页
项目 --> 管理NuGet程序包 --> 更新 --> 全部更新
然后在搜索框里搜索添加 jQuery UI 和 Microsoft jQuery Unobtrusive Ajax。jQuery UI用来实现布局页中的导航，Ajax实现页面局部更新。然后点击安装。
使用MVC开发ASP.NET Web 应用程序时，可利用App_Start 文件夹下的捆绑配置BundleConfig.cs 优化CSS文件以及Bootstrap、jQuery等脚本文件的引用。 捆绑（Bundle）是指将多个文件合并到单个文件中。捆绑后加载的文件变少了，客户端访问网站时的HTTP请求次数也会相应减少。
修改App_Start文件夹下的BundleConfig.cs 的文件：
using System.Web; using System.Web.Optimization; namespace ASPNetWebApplication { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); } } }在Global.asax文件中，下面代码会自动注册捆绑配置，下面是创建项目时系统自动添加的代码：
BundleConfig.RegisterBundles(BundleTable.Bundles);创建项目主页时，可以直接修改已经存在的_Layout.cshtml，在这里我们新建一个_MainLayout.cshtml。
文件名建议用下划线开头，表示这种网页只能被其他页面引用，无法单独显示。 鼠标右键Views下面的Shares子文件夹，选择 添加 --> 新建项。找到MVC5布局页，可以在下面修改名称。点击添加。 页面代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title> @Styles.Render("~/Content/themes/base/jqueryui") @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jquery-ui") @Scripts.Render("~/bundles/jquery-unobtrusive-ajax") @Scripts.Render("~/bundles/bootstrap") </head> @{ var ajaxOptions = new AjaxOptions { LoadingElementId = "loading", UpdateTargetId = "mainWindow", OnFailure = "OnFailure" }; } <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("姓名：Houly", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a>组号：01，上机位置：01排1号，学号：123456789，性别：女</a></li> </ul> <ul id="loading" class="nav navbar-text navbar-right" style="display: none; color: white;"> <li>（正在加载，请稍等...）</li> </ul> </div> </div> </div> <div class="container body-content"> <div class="row"> <div class="col-md-3"> <div class="leftMenu" style="margin-top:10px"> <h3 class="btn-success">练习1-布局页和主页设计</h3> <div class="list-group"> @Ajax.ActionLink("主页", "Index", "Home", null, ajaxOptions, new { @class = "list-group-item" }) @Ajax.ActionLink("Test", "Welcome", "My", null, ajaxOptions, new { @class = "list-group-item" }) </div> <h3 class="btn-success">练习2-模型和基本操作</h3> <div class="list-group"> @Html.ActionLink("ViewResult", "Index", "Lx2", new { id = "1" }, new { @class = "list-group-item" }) @Ajax.ActionLink("PartialViewResult", "Index", "Lx2", new { id = "2" }, ajaxOptions, new { @class = "list-group-item" }) @Ajax.ActionLink("RedirectResult", "Index", "Lx2", new { id = "3" }, ajaxOptions, new { @class = "list-group-item" }) </div> <h3 class="btn-success">练习3-数组排序</h3> <div> </div> <h3 class="btn-success">练习4-图片浏览</h3> <div> </div> <h3 class="btn-success">练习5-表单交互</h3> <div> </div> <h3 class="btn-success">练习6-CSS和动画</h3> <div> </div> <h3 class="btn-success">练习7-数据库操作</h3> <div> </div> </div> </div> <div class="col-md-9"> <div id="mainWindow" style="border:1px solid blue;margin-top:10px; padding:10px; overflow-y:auto; overflow-x:hidden"> @RenderBody() </div> </div> </div> <footer style="margin-top:10px"> <div class="btn-danger text-center">本组成员：houly（组长）、小花、小狗、小猫</div> </footer> </div> <script> $(document).ready(function () { var menu = $(".leftMenu"); menu.accordion({ collapsible: true }); $("#mainWindow").css({ minHeight: menu.height() }); }); function OnFailure(xhr) { $("body").html(xhr.responseText); } </script> </body> </html>我已经写到了练习二所以练习二的超链也加上了，这个页面主要是左边三列（导航栏）右边九列。 在布局页里面，将脚本引用搜放在了head里，这样视图页和分布页都能直接引用项目中的脚本，避免重复引用。
在Controller里面找到HomeController 点开里面应该有一个Index方法，右键Index添加视图 然后打开Index.cshtml 代码为：
@{ ViewBag.Title = "默认主页"; } <h2>完成情况：</h2> <p>练习1：完成。</p> <p>练习2：完成。</p> <p>练习4：未完成。</p> <p>练习6：未完成。</p> <h2>遇到的问题和解决办法：</h2> <p>练习1：未遇到问题。</p> <p>练习2：未遇到问题。</p> <p>练习4：未遇到问题。</p> <p>练习6：未遇到问题。</p>如果新建的主页并非默认Index，则需要打开App_Start下的RouteConfig，将代码中的default 的action = “Index”改为新建的视图的名。
在Views Shares下面，找到_ViewStart.cshtml，改为：
@{ Layout = "~/Views/Shared/_MainLayout.cshtml"; }全部保存后运行。
