ASP.NET MVC Layout 嵌套
模板页Layout.cshtml代码(路径"~/Views/Backstage/MachineMng/Layout.cshtml")：
@{
ViewBag.Title = "货机管理";
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<style type="text/css">
body
{
font-size: 12px;
padding: 0;
margin: 0;
background-color: #666;
}
.ul-menu
{
float: left;
margin: 0;
padding: 0;
margin-left: 3px;
}
.ul-menu li
{
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 45px;
height: 25px;
line-height: 25px;
text-align: center;
margin-right: 20px;
border: solid 1px #999;
cursor: pointer;
}
</style>
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
function gotourl(url) {
window.location = url;
}
</script>
</head>
<body>
<div style="width: 960px; margin: auto; background-color: #fff; padding: 7px;">
<div style="height: 110px; border: solid 1px #999;">
<div style="float: left; width: 105px; height: 65px; margin: 3px; text-align: center; border: solid 1px #999;">
<div style="font-size: 16px; margin-top: 12px;">
IMU
<br />
120×90
</div>
</div>
<div style="float: right; padding: 5px; margin-top: 5px;">
<div style="float: left;">
欢迎您，<span>XXX</span> 【退出】
</div>
<div style="float: left; margin-left: 50px;">
@{
string[] weekDays = { "星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
}
当前时间 @DateTime.Now.ToString("yyyy-MM-dd（" + weekDays[(int)DateTime.Now.DayOfWeek] + "）HH:mm")
</div>
<div style="float: left; margin-left: 50px; margin-right: 5px;">
帮助中心
</div>
</div>
<div style="margin-top: 76px;">
<ul class="ul-menu">
<li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/MachineInfo/Index")')">货机</li>
<li onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')">运营</li>
<li>交易</li>
<li>系统</li>
</ul>
</div>
</div>
@RenderBody()
</div>
</body>
</html>
模板页RoadSetLayout.cshtml代码：(路径"~/Views/Backstage/MachineMng/RoadSetLayout.cshtml")：
@{
ViewBag.Title = "货道设置";
Layout = Url.Content("~/Views/Backstage/MachineMng/Layout.cshtml");
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<style type="text/css">
.div-button1
{
float: left;
width: 120px;
height: 35px;
border: solid 1px #999;
font-size: 18px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.div-button2
{
float: left;
width: 120px;
height: 30px;
border: solid 1px #999;
font-size: 14px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.div-arrow
{
float: left;
height: 55px;
padding-top: 5px;
}
.div-arrow2
{
float: left;
width: 35px;
height: 22px;
padding-top: 6px;
margin-left: 10px;
}
</style>
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$(function () {
});
</script>
</head>
<body>
<div style="height: 200px; border: solid 1px #999; border-top: 0;">
<div style="float: left; width: 200px; height: 150px; border: solid 1px #999; margin: 20px; padding: 5px;">
<div style="text-align: center; font-size: 18px; line-height: 25px; padding-top: 10px;">
货机现在运行正常
<br />
连续运行3天 72小时
</div>
<div style="padding-top: 10px; line-height: 20px;">
货机数据已经与平台数据同步，无需插数据盘。
请插入数据盘完成数据同步更新/数据盘已插入，数据传输完成10%
</div>
</div>
<div style="float: right; width: 600px; height: 160px; margin: 20px; margin-right: 50px;">
<div class="div-button1" style="margin-left: 100px; cursor: default; background-color: #eee;">
暂停货机
</div>
<div onclick="gotourl('@Url.Content("~/Backstage/MachineMng/StartCargo/Index")')" class="div-button1" style="margin-left: 50px;">
启动货机
</div>
<div style="float: left; width: 100%; height: 33px; line-height: 33px; text-align: center;">
<div style="float: left; margin-left: 100px;">
货机暂停才可以进行以下操作：以下操作完成须启动货机
</div>
</div>
<div style="float: left; width: 100%; height: 60px; line-height: 60px; text-align: center;">
<div class="div-arrow" style="margin-left: 150px;">
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_down.png")" />
</div>
<div class="div-arrow" style="margin-left: 160px;">
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_up.png")" />
</div>
</div>
<div class="div-button2" onclick="gotourl('@Url.Content("~/Backstage/MachineMng/RoadSet/Index")')" style="margin-left: 50px;">
商品货道设置
</div>
<div class="div-arrow2" style="">
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")" />
</div>
<div class="div-button2" style="margin-left: 5px;">
现金管理理
</div>
<div class="div-arrow2" style="">
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_right.png")" />
</div>
<div class="div-button2" style="margin-left: 5px;">
货机运维
</div>
</div>
</div>
@RenderBody()
</body>
</html>
Index页面代码(路径"~/Views/Backstage/MachineMng/RoadSet/Index.cshtml")：
@{
ViewBag.Title = "货道设置";
Layout = Url.Content("~/Views/Backstage/MachineMng/RoadSetLayout.cshtml");
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link type="text/css" href="~/Scripts/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
<style type="text/css">
body
{
font-size: 12px;
}
.div-box
{
float: left;
border: solid 1px #f5f5f5;
height: 148px;
width: 97px;
background-color: #f5f5f5;
cursor: default;
}
.div-box div
{
float: left;
margin-top: 15px;
margin-left: 9px;
height: 120px;
width: 80px;
line-height: 120px;
font-size: 16px;
font-family: 黑体;
text-align: center;
}
.ul-instructions
{
float: left;
width: 200px;
padding: 0;
margin: 0;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.ul-instructions li
{
float: left;
list-style: none;
width: 200px;
line-height: 25px;
font-size: 12px;
margin: 0;
padding: 3px;
}
.ul-instructions li div
{
float: left;
}
.div-road
{
float: left;
height: 130px;
width: 100px;
margin-left: 20px;
margin-top: 20px;
}
.table-road
{
background-color: #ffff00;
border: solid 1px #999;
}
.div-highlight
{
border: solid 1px #6dbde4 !important;
background-color: #dceaf2 !important;
}
.img-btn
{
cursor: pointer;
margin: 3px;
}
.img-btn2
{
cursor: pointer;
margin-left: 10px;
}
.table-addroads
{
width: 100%;
}
.table-addroads tr td:first-child
{
text-align: right;
}
.table-addroads tr td
{
height: 30px;
padding: 3px;
}
.input-green
{
background-color: green;
}
</style>
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Scripts/SimpoWindow.js"></script>
<script type="text/javascript">
$(function () {
$("#tdboxs").load("Boxs?cargoCode=" + '@ViewBag.cargoCode' + "&t=" + new Date().valueOf(), function (data) {
$(".div-box:first").click();
});
});
//显示货柜的货道
function showBox(obj, boxId) {
$(".div-box").removeClass("div-highlight");
$(obj).addClass("div-highlight");
$("#divfloors").load("Floors?boxId=" + boxId + "&t=" + new Date().valueOf());
}
//添加货柜
function addbox(addType) {
if (confirm("确定添加？")) {
var cargoCode = '@ViewBag.cargoCode';
var floorType = $("input[name='floorType']:checked").val();
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddBox")",
data: { "addType": addType, "cargoCode": cargoCode, "floorType": floorType },
success: function (d) {
var data = eval("(" + d + ")");
if (data.ok) {
$("#tdboxs").load("Boxs?cargoCode=" + cargoCode + "&t=" + new Date().valueOf(), function (data) {
if (addType == 1) {
$(".div-box:first").click();
} else {
$(".div-box:last").click();
}
});
} else {
alert("添加失败：" + data.msg);
}
},
error: function () {
alert("添加失败");
}
});
}
}
//删除货柜
function delbox(addType) {
if (confirm("确定删除？")) {
var cargoCode = '@ViewBag.cargoCode';
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelBox")",
data: { "addType": addType, "cargoCode": cargoCode },
success: function (data) {
if (data == "ok") {
if (addType == 1) {
$(".div-box:first").remove();
}
else {
$(".div-box:last").remove();
}
$(".div-box:first").click();
}
else {
alert("删除失败" + data);
}
},
error: function () {
alert("删除失败");
}
});
}
}
//添加货道
function addroad(obj, boxId, floor) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoad")",
data: { "boxId": boxId, "floor": floor },
success: function (d) {
var data = eval("(" + d + ")");
if (data.ok) {
var td = $(obj).parent().parent().parent().parent().find("td:first");
td.find("#divroads_" + floor).load("Roads?boxId=" + boxId + "&floor=" + floor + "&t=" + new Date().valueOf());
var roadNum = parseInt(td.find(".span-roadNum").text(), 10);
td.find(".span-roadNum").html((roadNum + 1).toString());
} else {
alert("添加失败：" + data.msg);
}
},
error: function () {
alert("添加失败");
}
});
}
//删除货道
function delroad(obj, boxId, floor) {
if (confirm("确定删除？")) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelRoad")",
data: { "boxId": boxId, "floor": floor },
success: function (data) {
if (data == "ok") {
var td = $(obj).parent().parent().parent().parent().find("td:first");
td.find(".div-road:last").remove();
var roadNum = parseInt(td.find(".span-roadNum").text(), 10);
if (roadNum > 0) {
td.find(".span-roadNum").html((roadNum - 1).toString());
}
}
else {
alert("删除失败" + data);
}
},
error: function () {
alert("删除失败");
}
});
}
}
//添加货道层
function addfloor(obj, boxId) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddFloor")",
data: { "boxId": boxId },
success: function (d) {
var data = eval("(" + d + ")");
if (data.ok) {
$("#divfloors").load("Floors?boxId=" + boxId + "&t=" + new Date().valueOf());
var div = $(obj).parent().parent();
var floorNum = parseInt(div.find(".span-floorNum").text(), 10);
div.find(".span-floorNum").html((floorNum + 1).toString());
} else {
alert("添加失败：" + data.msg);
}
},
error: function () {
alert("添加失败");
}
});
}
//删除货道层
function delfloor(obj, boxId) {
var div = $(obj).parent().parent().parent();
if (div.find(".table-floor").length < 2) return;
if (confirm("确定删除？")) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/DelFloor")",
data: { "boxId": boxId },
success: function (d) {
var data = eval("(" + d + ")");
if (data.ok) {
div.find(".table-floor:last").remove();
var floorNum = parseInt(div.find(".span-floorNum").text(), 10);
div.find(".span-floorNum").html((floorNum - 1).toString());
} else {
alert("删除失败：" + data.msg);
}
},
error: function () {
alert("删除失败");
}
});
}
}
//批量添加货道
function addroads(obj, boxId, floor) {
SimpoWin.showWin2("更换货箱", "addroads", 240, 170);
var windiv = $("#addroads");
var btnOK = windiv.find("input[type='button']");
btnOK.bind("click", function () {
var roadNum = windiv.find("select[name='roadNum']").find("option:selected").val();
var roadSpec = windiv.find("select[name='roadSpec']").find("option:selected").val();
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/MachineMng/RoadSet/AddRoads")",
data: { "boxId": boxId, "floor": floor, "roadNum": roadNum, "roadSpec": roadSpec },
success: function (d) {
var data = eval("(" + d + ")");
if (data.ok) {
var td = $(obj).parent().parent();
td.find("#divroads_" + floor).load("Roads?boxId=" + boxId + "&floor=" + floor + "&t=" + new Date().valueOf());
td.find(".span-roadNum").html(data.roadNum.toString());
} else {
alert("添加失败：" + data.msg);
}
},
error: function () {
alert("添加失败");
}
});
btnOK.unbind("click");
SimpoWin.closeWin2("addroads");
});
}
</script>
</head>
<body>
<div style="height: 30px; line-height: 30px; padding-top: 5px; border-left: solid 1px #999; border-right: solid 1px #999; text-align: center;">
客户喜好
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
商品
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
选择货道
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
摆放商品
<img alt="" src="@Url.Content("~/Images/Cargo/roadset_arrow_longright.png")" />
完成货道商品绑定
</div>
<div id="divbox" style="border: solid 1px #999; border-top: 0; border-bottom: none;">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<tr>
<td style="width: 260px;">
<ul class="ul-instructions">
<li>
<div style="height: 25px; width: 25px; background-color: yellow;"></div>
<div style="height: 25px; margin-left: 10px;">黄色：表示更换货道</div>
</li>
<li>
<div style="height: 25px; width: 25px; background-color: green;"></div>
<div style="height: 25px; margin-left: 10px;">绿色：表示上货数量</div>
</li>
<li>
<div style="height: 25px; width: 25px; background-color: red;"></div>
<div style="height: 25px; margin-left: 10px;">红色：表示现有商品数</div>
</li>
<li>
<div style="height: 25px; width: 25px; background-color: gray;"></div>
<div style="height: 25px; margin-left: 10px;">灰色：表示最大商品数</div>
</li>
<li>
<div style="height: 23px; width: 23px; border: solid 1px #000; text-align: center;">调</div>
<div style="height: 25px; margin-left: 10px;">调：表示调换本商品</div>
</li>
<li>
<div style="height: 23px; width: 23px; border: solid 1px #000; text-align: center;">换</div>
<div style="height: 25px; margin-left: 10px;">换：表示更换商品种类</div>
</li>
</ul>
</td>
<td>
<div style="float: left;">
<div style="text-align: center; margin-top: 25px;">
<img onclick="addbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
</div>
<div style="margin-top: 50px; text-align: center;">
<img onclick="delbox(1)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
</div>
</div>
</td>
<!--货柜-->
<td id="tdboxs">
</td>
<td>
<div style="float: left;">
<div style="text-align: center; margin-top: 25px;">
<img onclick="addbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
</div>
<div style="margin-top: 50px; text-align: center;">
<img onclick="delbox(2)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
</div>
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="text-align: right;">
<input name="floorType" value="1" type="radio" checked="checked" />横箱<input name="floorType" value="0" type="radio" />竖箱</td>
<td> </td>
</tr>
</table>
</div>
<!--货道层-->
<div id="divfloors"></div>
<!-- 分隔线 -------------------------------------------------------------------------------------->
<!--更换货箱-->
<div id="addroads" style="display: none;">
<div style="padding: 10px;">
<table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 80px;">货道数：</td>
<td>
<select name="roadNum">
<option value="4">4货道</option>
<option value="6">6货道</option>
<option value="8">8货道</option>
<option value="10">10货道</option>
</select>
</td>
</tr>
<tr>
<td>货道型号：</td>
<td>
<select name="roadSpec">
<option value="C25/80">C25/80</option>
<option value="C10/50">C10/50</option>
<option value="C30/85">C30/85</option>
<option value="C15/75">C15/75</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="确定" />
</td>
</tr>
</table>
</div>
</div>
<!--批量更换货道-->
<div id="replaceRoadSpec" style="display: none;">
<div style="padding: 10px;">
<table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>货道型号：</td>
<td>
<select name="roadSpec">
<option value="C25/80">C25/80</option>
<option value="C10/50">C10/50</option>
<option value="C30/85">C30/85</option>
<option value="C15/75">C15/75</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="确定" />
</td>
</tr>
</table>
</div>
</div>
<!--更换单个货道-->
<div id="replaceRoadSpecSingle" style="display: none;">
<div style="padding: 10px;">
<table class="table-addroads" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>当前货道：</td>
<td id="currentRoadSpec"></td>
</tr>
<tr>
<td>货道型号：</td>
<td>
<select name="roadSpec">
<option value="C25/80">C25/80</option>
<option value="C10/50">C10/50</option>
<option value="C30/85">C30/85</option>
<option value="C15/75">C15/75</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="确定" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果图：
ASP.NET MVC Layout 嵌套的更多相关文章
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...
- asp.net mvc视图中嵌套分部视图
asp.net mvc中Layout相当于webForm中母版页,分部视图相当于webForm中的用户控件. 下面例子是一个视图如何嵌套分部视图: A是分部视图,B是一般视图(A,B中的代码省略) 我 ...
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理 【转】
http://www.cnblogs.com/powertoolsteam/p/MVC_five.html 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会 ...
- 微冷的雨ASP.NET MVC之葵花宝典(MVC)
微冷的雨ASP.NET MVC之葵花宝典 By:微冷的雨 第一章 ASP.NET MVC的请求和处理机制. 在MVC中: 01.所有的请求都要归结到控制器(Controller)上. 02.约定优于配 ...
- 使用ASP.NET MVC局部视图避免JS拼接HTML，编写易于维护的HTML页面
以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观.简捷.易于维护,由于不用JS ...
- 7 天玩转 ASP.NET MVC — 第 5 天
目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 欢迎来到第五天的学习.希望第一天到第四天的学习,你都是开心的. 1. Lab 22 - 增加 Fo ...
- ASP.NET MVC 学习2、从Controller传递数据到View
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view 一,Control ...
- ASP.NET MVC局部视图
使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面 以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS ...
- Asp.net mvc 中View 的呈现(二)
[toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...
随机推荐
- 初探ECMAScript6
基础变化 String类型新增了三个方法,不必使用indexOf来判断一个字符串是否在另一个字符串内 //String changes var a = "Hello world"; ...
- 【网站国际化必备】Asp.Net MVC 集成Paypal（贝宝）快速结账 支付接口 ，附源码demo
开篇先给大家讲段历史故事,博主是湖北襄阳人.襄阳物华天宝,人杰地灵,曾用名襄樊.在2800多年的历史文化中出现了一代名相诸葛亮(卧龙),三国名士庞统(凤雏),魏晋隐士司马徽(水镜先生),唐代大诗人孟浩 ...
- Unity多单位战斗寻路问题的一种解决办法
Unity多单位战斗寻路问题的一种解决办法 Unity提供了NavMesh 导航组件 NavMesh是在实践中通用性最好的一种导航方式,但是Unity的实现并没有完全提供一个开放自由的API. 主 ...
- IOS Runtime-初识runtime（一）
苹果公布了runtime的源码,可以从地址下载:http://www.opensource.apple.com/tarballs/objc4/ object-c程序在启动的时候,需要一个准备时间,这个 ...
- excel怎么固定第一行
这里给大家介绍一下怎么固定表格的第一行,或者说怎么固定表格的表头. 1.我这里有一个成绩表,希望固定住其第一行. 2.选择单元格A2 注意:你只需要选择所要固定行的下一行的任一单元格即可!!! 3.然 ...
- [Java面试十二]数据库概念相关
1. 什么是存储过程?它有什么优点? 答:存储过程是一组予编译的SQL语句,它的优点有: 允许模块化程序设计,就是说只需要创建一次过程,以后在程序中就可以调用该过程任意次. 允许更快执 ...
- Atitit图片复制父目录给你设计的实现 基于win 图片浏览器
Atitit图片复制父目录给你设计的实现 基于win 图片浏览器 打开属性,获取其路径...1 Ahk参数传递,使用环境变量即可1 如何ahk异常转换为java异常1 如何获取ahk的输出.1 C:\ ...
- salesforce 零基础学习（二十一）workflow Q&A
有一篇内容专门写了workflow,后来用到的时候心生疑问,不知道小伙伴有没有和我想法一样的,workflow具体内容原来已经说过,不在过多叙述,只说一下运行条件. 那就是:当满足运行条件时,执行相关 ...
- KlayGE 4.4中渲染的改进（二）：DR的其他改进
转载请注明出处为KlayGE游戏引擎,本文的永久链接为http://www.klayge.org/?p=2749 上一篇讲了TBDR的实现,本篇继续讲解deferred rendering层的一些 ...
- 用户代理字符串userAgent可实现的四个识别
定义 用户代理字符串:navigator.userAgent HTTP规范明确规定,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号.但现实中却没有这么简单. 发展历史 [1]1993年美 ...