ASP.NET MVC程序设计实验一：布局页和主页设计
ASP.NET MVC程序设计实验一：布局页和主页设计
- 前言
- 新建程序
- 使用NuGet更新程序包
- 更新当前项目的程序包
- 添加新程序包
- 修改项目配置
- 修改捆绑配置
- 创建项目主页和布局页
- 添加布局页
- 添加主页
- 修改路由配置
- 修改_ViewStart.cshtml
- 运行程序
前言
软件 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";
}
全部保存后运行。
运行程序
ASP.NET MVC程序设计实验一：布局页和主页设计相关推荐
- 【asp.net core 系列】5 布局页和静态资源
0. 前言 在之前的4篇的内容里,我们较为详细的介绍了路由以及控制器还有视图之间的关系.也就是说,系统如何从用户的HTTP请求解析到控制器里,然后在控制器里处理数据,并返回给视图,在视图中显示出来.这 ...
- 在Asp.net MVC使用thickbox实现调用页面的Ajax更新
在MVC模式中,通常都是Controller处理请求并生成数据,选择一个合适的View来显示结果给用户.虽然Asp.net MVC已经有非常丰富的ActionResult来满足不同情况下的需求,但是有 ...
- [ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面
随着最终用户对用户体验需求的不断提高,实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用,甚至很多Web页面本身就体现为一个单一的页面.对于这种复杂的页面,我们在设计的时候不可以真的将所有涉 ...
- Java程序设计实验四：Java小应用程序界面设计
实验四 Java小应用程序界面设计 1．实验目的: 学会设计Java小应用程序的界面. 2．实验内容: (1)编写一个Applet程序.用户界面有一个标签.一个文本框和一个按钮,在文本框中输入一个数, ...
- ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
- ASP.NET MVC 1.0 RC 版发布了【转】
[原文地址]ASP.NET MVC 1.0 Release Candidate Now Available [原文发表日期] Tuesday, January 27, 2009 12:13 PM 今天 ...
- ASP.NET MVC 2示例Tailspin Travel UI层分析
Tailspin Travel 是一个旅游预订的应用程序示例,最新版本采用ASP.NET MVC 2技术构建,主要使用 DataAnnotations 验证, 客户端验证和ViewModels,还展示 ...
- ASP.NET MVC V2 Preview 1 发布 期望VS有更好的表现
ASP.NET MVC V2 Preview 1官方首页:http://aspnet.codeplex.com/ 在这里可以下载 以下是网友的转载,介绍的还是比较详细的: 预览版是在.NET 3.5 ...
- 利用ASP.NET MVC 的默认类型绑定器---将Jquery datatables中的数据强类型绑定到实体类中
背景描述: 本文参考资料:https://blog.csdn.net/honantic/article/details/45913403 阅读了上述博文后对我产生了启发,在ASP.NET MVC 5中 ...
最新文章
- Vue开发入门看这篇文章就够了
- android 8.0以后（sdk26）启动前台服务的问题探究
- Thymeleaf引用片段传入参数
- 2021宿州市地区高考成绩排名查询,2021年宿州市所有的高中排名,宿州市高中高考成绩排名出炉...
- 数据库和ORMS：使用SQLAlchemy与数据库通信
- python 计算机基础
- python coroutine_Python coroutine的坑
- Android 应用程序获得系统权限
- mysql怎么显示创表的语句_MySql轻松入门系列——第二站 使用visual studio 对mysql进行源码级调试...
- turbo c 混编 汇编语言,Turbo C 编译 嵌入汇编
- 大牛直播sdk简单播放端demo使用
- java中如何生成随机数
- ad敷铜后还有部分飞线_难以置信！小霸王卡带中居然藏有隐藏游戏，大部分玩家闻所未闻|小霸王|游戏|魂斗罗|卡带|红白机...
- matlab 展开计算公式,钣金下料展开计算公式
- Dart中的Isolate
- 阿里云盘 Mac客户端(附mac/win版)v2.1.6中文内测版
- 兴寿镇“春踏青，兴寿行”特色旅游线路点靓辛庄
- 【显著性检测】基于HC算法实现图像显著性检测附MATLAB代码
- 【Qt学习】 碰撞检测 图元绘制
- Flask路由分发及转换器