ASP.NET MVC程序设计实验一：布局页和主页设计
前言
软件 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更新程序包
更新当前项目的程序包
项目 --> 管理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”改为新建的视图的名。
修改_ViewStart.cshtml
在Views Shares下面，找到_ViewStart.cshtml，改为：
@{
Layout = "~/Views/Shared/_MainLayout.cshtml";
}
全部保存后运行。
运行程序
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
