使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面

 

以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观、简捷、易于维护,由于不用JS拼接HTML,所以JS写的也很少。

最近使用ASP.NET MVC开发,前台页面的功能比较复杂,每次刷新整个页面的话体验会很差,所以通过JS控制页面元素,实现局部刷新。刚开始使用的方法是通过JS在前台拼接HTML,结果JS写的很长,要命的事,每增加一个新功能,都要拼接很长的HTML,结果页面的JS越写越多。考虑到后期可能难以维护,所以花了半天的时间,对页面进行了大改,把这一个页面拆分成了四个页面,通过jQuery的load方法实现局部更新,修改之后页面清爽多了。

本来想使用ASP.NET MVC的PartialView实现,结果路由的问题遇到点麻烦。最后发现直接使用View也可以,就用View实现了,效果是一样的,不必太钻牛角尖。

模板页面代码(用了两层Layout嵌套):

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页面代码:

 
@{
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.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;
}
</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', function (data) {
$(".div-box:first").click();
});
});
//显示货柜的货道
function showBox(obj, boxId) {
$(".div-box").removeClass("div-highlight");
$(obj).addClass("div-highlight");
$("#divfloors").load("Floors?boxId=" + boxId);
}
//添加货柜
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, 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);
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);
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) {
if ($(obj).parent().parent().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) {
var div = $(obj).parent().parent();
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 btnOK = $(".table-addroads").find("input[type='button']");
btnOK.bind("click", function () {
var roadNum = $("select[name='roadNum']").find("option:selected").val();
var roadSpec = $("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);
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">&nbsp;
</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>&nbsp;</td>
<td>&nbsp;</td>
<td style="text-align: right;">
<input name="floorType" value="1" type="radio" checked="checked" />横箱<input name="floorType" value="0" type="radio" />竖箱</td>
<td>&nbsp;</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>
</body>
</html>

Index.cshtml页面中有两个局部页面Boxs.cshtml和Floors.cshtml,Floors.cshtml页面中有一个局部页面Roads.cshtml,代码如下:

Boxs.cshtml页面代码:

 
@using System.Data;
@using DAL;
@{
BoxInfoDal boxInfoDal = new BoxInfoDal();
string cargoCode = ViewBag.cargoCode;
DataTable dtLeftBox = boxInfoDal.GetListByBoxCodeDesc(cargoCode, 1);
DataTable dtRightBox = boxInfoDal.GetList(cargoCode, 2);
}
@foreach (System.Data.DataRow dr in dtLeftBox.Rows)
{
<div class="div-box" onclick="showBox(this,'@dr["id"].ToString()')">
<div style="background: url(@Url.Content("~/Images/Cargo/yougui.png")) no-repeat;">
@boxInfoDal.GetName(dr["cargoCode"].ToString())
</div>
</div>
}
<div id="divMainBox" style="float: left; height: 150px; width: 99px;">
<img alt="" src="@Url.Content("~/Images/Cargo/zhugui.png")" />
</div>
@foreach (System.Data.DataRow dr in dtRightBox.Rows)
{
<div class="div-box" onclick="showBox(this,'@dr["id"].ToString()')">
<div style="background: url(@Url.Content("~/Images/Cargo/yougui.png")) no-repeat;">
@boxInfoDal.GetName(dr["cargoCode"].ToString())
</div>
</div>
}

Floors.cshtml页面代码:

 
@using System.Data;
@using DAL;
@{
BoxInfoDal boxInfoDal = new BoxInfoDal();
string boxId = ViewBag.boxId;
DataRow drBox = boxInfoDal.Get(boxId).Rows[0];
string boxCode = drBox["cargoCode"].ToString();
string floorNum = drBox["floorNum"].ToString();
string floorType = drBox["floorType"].ToString();
}
<script type="text/javascript">
$(function () {
$("input[name='floorType'][value='" + @floorType + "']").attr("checked", "checked");
for (var i = 1; i <= parseInt('@floorNum', 10) ; i++) {
$("#divroads_" + i).load("Roads?boxId=" + '@boxId' + "&floor=" + i);
}
});
</script>
<div style="border-left: solid 1px #999; border-right: solid 1px #999; border-top: 0;">
<div style="padding: 10px; border-bottom: solid 1px #000;">
<div style="float: left; height: 20px; line-height: 20px;">
设置 @boxInfoDal.GetName(boxCode) 货道层数: <span class="span-floorNum">@floorNum</span>层
</div>
<img onclick="addfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
<img onclick="delfloor(this, '@boxId')" alt="" class="img-btn2" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
</div>
@for (int i = 1; i <= int.Parse(floorNum); i++)
{
DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, i);
<table class="table-floor" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom: solid 1px #999; width: 100%;">
<tr>
<td style="padding: 10px; padding-bottom: 20px; vertical-align: top;">
<div style="padding: 10px;">
设置第 @i 层货道数: <span class="span-roadNum">@dtRoadList.Rows.Count</span>
<button onclick="addroads(this,'@boxId',@i)" style="margin-left: 20px;" >更换货箱</button>
</div>
<!--货道-->
<div id="divroads_@i"></div>
</td>
<td>
<div style="float: right;">
<div style="text-align: center; margin-top: 15px;">
<img onclick="addroad(this,'@boxId',@i)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_add.png")" />
</div>
<div style="margin-top: 50px; text-align: center;">
<img onclick="delroad(this,'@boxId',@i)" alt="" class="img-btn" src="@Url.Content("~/Images/Cargo/roadset_Del.png")" />
</div>
</div>
</td>
</tr>
</table>
}
</div>

Roads.cshtml页面代码:

 
@using System.Data;
@using DAL;
@{
BoxInfoDal boxInfoDal = new BoxInfoDal();
string boxId = ViewBag.boxId;
int floor = ViewBag.floor;
DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, floor);
int j = 0;
}
@foreach (System.Data.DataRow drRoad in dtRoadList.Rows)
{
j++;
<div class="div-road">
<table class="table-road" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<tr>
<td>
<div style="margin: 2px;">@boxInfoDal.NumToABCD(floor)@j.ToString()</div>
</td>
</tr>
<tr>
<td>
<div style="margin: 2px;">货道 @drRoad["roadSpec"].ToString()</div>
</td>
</tr>
<tr style="line-height: 11px;">
<td>&nbsp;</td>
</tr>
<tr>
<td style="text-align: center;">
<input value="0" type="text" style="height: 17px; width: 25px; text-align: center;" />
</td>
</tr>
<tr>
<td style="text-align: center;">现
<input value="@drRoad["existProductNum"].ToString()" type="text" style="height: 19px; width: 25px; border: 0; background-color: red; text-align: center;" readonly="readonly" /><input value="@drRoad["maxProductNum"].ToString()" type="text" style="height: 19px; width: 25px; border: 0; background-color: gray; text-align: center;" readonly="readonly" />

</td>
</tr>
<tr>
<td style="text-align: center; font-weight: bold;">
<div style="margin-top: 5px;">@drRoad["productName"].ToString()&nbsp;</div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div style="position: relative; float: right; margin-right: -1px; margin-bottom: -1px; border: solid 1px #000; padding: 3px; cursor: pointer; background-color: white;">调</div>
</td>
</tr>
</table>
</div>
}

控制器代码:

 
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using DAL;
using Newtonsoft.Json;
namespace Controllers.Backstage.MachineMng
{
/// <summary>
/// 货道设置
/// </summary>
public class RoadSetController : AdminBaseController
{
#region 构造函数及变量
private SQLiteHelper.SQLiteHelper sqliteHelper;
private BoxInfoDal boxInfoDal;
private CargoInformationDal cargoInformationDal;
public RoadSetController()
{
sqliteHelper = new SQLiteHelper.SQLiteHelper();
boxInfoDal = new BoxInfoDal();
cargoInformationDal = new CargoInformationDal();
}
#endregion
#region Index页面
public ActionResult Index()
{
ViewBag.cargoCode = "112";
return View();
}
#endregion
#region Boxs页面
public ActionResult Boxs(string cargoCode)
{
ViewBag.cargoCode = cargoCode;
return View();
}
#endregion
#region Floors页面
public ActionResult Floors(string boxId)
{
ViewBag.boxId = boxId;
return View();
}
#endregion
#region Roads页面
public ActionResult Roads(string boxId, int floor)
{
ViewBag.boxId = boxId;
ViewBag.floor = floor;
return View();
}
#endregion
#region 添加贷柜
public ActionResult AddBox(int addType, string cargoCode, string floorType)
{
DataTable dtCargo = cargoInformationDal.Get(cargoCode);
DataRow drCargo = dtCargo.Rows[0];
string boxId = Guid.NewGuid().ToString();
string positionNum = null;
string boxCode = null; //货柜编号
DataTable dtLeftBoxList = boxInfoDal.GetList(cargoCode, addType);
boxCode = addType.ToString() + (dtLeftBoxList.Rows.Count + 1).ToString("00");
positionNum = addType.ToString() + (dtLeftBoxList.Rows.Count + 1).ToString("00");
StringBuilder sql = new StringBuilder();
//插入货柜表
sql.AppendFormat(@"
insert into
mas_box_info(id, shopId, positionNum, cargoCode, floorType, floorNum, delFlag, addTime, addUserId, addMark)
values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
boxId, drCargo["shopId"].ToString(), positionNum, boxCode, floorType, 1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
//插入关联表
sql.AppendFormat(@"
insert into
mas_cargo_container(id, boxId, positionNum, cargoCode, positionDescription, xCoordinate, yCoordinate, delFlag, addTime, addUserId, addMark)
values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}','{10}');", Guid.NewGuid().ToString(), boxId, positionNum, cargoCode, "", 0, 0, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
sqliteHelper.BeginTransaction();
try
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = true;
dic["id"] = boxId;
dic["name"] = (addType == 1 ? "左" : "右") + (dtLeftBoxList.Rows.Count + 1) + "柜";
return Content(JsonConvert.SerializeObject(dic));
}
catch (Exception ex)
{
sqliteHelper.Rollback();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = false;
dic["msg"] = ex.Message;
return Content(JsonConvert.SerializeObject(dic));
}
}
#endregion
#region 删除贷柜
public ActionResult DelBox(int addType, string cargoCode)
{
DataTable dtCargo = cargoInformationDal.Get(cargoCode);
DataRow drCargo = dtCargo.Rows[0];
string boxId = null;
string boxCode = null; //货柜编号
DataTable dtLeftBoxList = boxInfoDal.GetList(cargoCode, addType);
boxCode = addType.ToString() + dtLeftBoxList.Rows.Count.ToString("00");
foreach (DataRow dr in dtLeftBoxList.Rows)
{
if (dr["cargoCode"].ToString() == boxCode)
{
boxId = dr["id"].ToString();
}
}
if (boxId == null)
{
return Content("");
}
StringBuilder sql = new StringBuilder();
//删除货柜
sql.AppendFormat(@"
delete from mas_box_info
where id='{0}';", boxId);
//删除货机货柜关联
sql.AppendFormat(@"
delete from mas_cargo_container
where boxid='{0}';", boxId);
//删除货道
sql.AppendFormat(@"
delete from mas_box_road_info
where id in
(select roadId from mas_container_cargo_road
where containerId='{0}');", boxId);
//删除货柜货道关联
sql.AppendFormat(@"
delete from mas_container_cargo_road
where containerId='{0}';", boxId);
sqliteHelper.BeginTransaction();
try
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
return Content("ok");
}
catch (Exception ex)
{
sqliteHelper.Rollback();
return Content("错误:" + ex.Message);
}
}
#endregion
#region 添加货道
public ActionResult AddRoad(string boxId, int floor)
{
string roadId = Guid.NewGuid().ToString();
DataTable dtRoadList = boxInfoDal.GetRoadList(boxId, floor);
string roadNo = boxInfoDal.NumToABCD(floor) + (dtRoadList.Rows.Count + 1).ToString();
StringBuilder sql = new StringBuilder();
//插入货道表
sql.AppendFormat(@"
insert into
mas_box_road_info(id, roadNO, roadSpec, existProductNum, maxProductNum, productID, delFlag, addTime, addUserId, addMark)
values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
roadId, roadNo, "C20/75", 0, 10, -1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
//插入关联表
sql.AppendFormat(@"
insert into
mas_container_cargo_road(id, containerId, layerNo, roadId, sort, delFlag, addTime, addUserId, addMark)
values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}');", Guid.NewGuid().ToString(), boxId, floor, roadId, dtRoadList.Rows.Count + 1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
sqliteHelper.BeginTransaction();
try
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = true;
dic["id"] = roadId;
dic["roadNo"] = roadNo;
dic["roadSpec"] = "C20/75";
dic["maxProductNum"] = "10";
return Content(JsonConvert.SerializeObject(dic));
}
catch (Exception ex)
{
sqliteHelper.Rollback();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = false;
dic["msg"] = ex.Message;
return Content(JsonConvert.SerializeObject(dic));
}
}
#endregion
#region 删除货道
public ActionResult DelRoad(string boxId, int floor)
{
DataTable dtRoad = boxInfoDal.GetRoadLast(boxId, floor);
if (dtRoad.Rows.Count > 0)
{
string roadId = dtRoad.Rows[0]["id"].ToString();
StringBuilder sql = new StringBuilder();
//删除货道
sql.AppendFormat(@"
delete from mas_box_road_info
where id='{0}';", roadId);
//删除货柜货道关联
sql.AppendFormat(@"
delete from mas_container_cargo_road
where roadId='{0}';", roadId);
sqliteHelper.BeginTransaction();
try
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
return Content("ok");
}
catch (Exception ex)
{
sqliteHelper.Rollback();
return Content("错误:" + ex.Message);
}
}
else
{
return Content("ok");
}
}
#endregion
#region 添加货道层
public ActionResult AddFloor(string boxId)
{
DataTable dtBox = boxInfoDal.Get(boxId);
int floorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString());
StringBuilder sql = new StringBuilder();
//修改货柜信息
sql.AppendFormat(@"
update mas_box_info
set floorNum={1}
where id='{0}';", boxId, floorNum + 1);
sqliteHelper.BeginTransaction();
try
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = true;
dic["name"] = boxInfoDal.GetName(dtBox.Rows[0]["cargoCode"].ToString());
dic["floorNum"] = floorNum + 1;
return Content(JsonConvert.SerializeObject(dic));
}
catch (Exception ex)
{
sqliteHelper.Rollback();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = false;
dic["msg"] = ex.Message;
return Content(JsonConvert.SerializeObject(dic));
}
}
#endregion
#region 删除货道层
public ActionResult DelFloor(string boxId)
{
DataTable dtBox = boxInfoDal.Get(boxId);
int floorNum = int.Parse(dtBox.Rows[0]["floorNum"].ToString());
StringBuilder sql = new StringBuilder();
//修改货柜信息
sql.AppendFormat(@"
update mas_box_info
set floorNum={1}
where id='{0}';", boxId, floorNum - 1);
//删除货道
sql.AppendFormat(@"
delete from mas_box_road_info
where id in
(select road.id
from mas_box_road_info road
left join mas_container_cargo_road ccr on ccr.roadId=road.id
where ccr.layerNo={0}
and ccr.containerId='{1}');", floorNum, boxId);
//删除货柜货道关联
sql.AppendFormat(@"
delete from mas_container_cargo_road
where roadId in
(select road.id
from mas_box_road_info road
left join mas_container_cargo_road ccr on ccr.roadId=road.id
where ccr.layerNo={0}
and ccr.containerId='{1}');", floorNum, boxId);
sqliteHelper.BeginTransaction();
try
{
if (floorNum > 1)
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
}
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = true;
return Content(JsonConvert.SerializeObject(dic));
}
catch (Exception ex)
{
sqliteHelper.Rollback();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = false;
dic["msg"] = ex.Message;
return Content(JsonConvert.SerializeObject(dic));
}
}
#endregion
#region 更换货箱
public ActionResult AddRoads(string boxId, int floor, int roadNum, string roadSpec)
{
StringBuilder sql = new StringBuilder();
//删除货道
sql.AppendFormat(@"
delete from mas_box_road_info
where id in
(select road.id
from mas_box_road_info road
left join mas_container_cargo_road ccr on ccr.roadId=road.id
where ccr.layerNo={0}
and ccr.containerId='{1}');", floor, boxId);
//删除货柜货道关联
sql.AppendFormat(@"
delete from mas_container_cargo_road
where roadId in
(select road.id
from mas_box_road_info road
left join mas_container_cargo_road ccr on ccr.roadId=road.id
where ccr.layerNo={0}
and ccr.containerId='{1}');", floor, boxId);
for (int i = 1; i <= roadNum; i++)
{
string roadId = Guid.NewGuid().ToString();
//插入货道表
sql.AppendFormat(@"
insert into
mas_box_road_info(id, roadNO, roadSpec, existProductNum, maxProductNum, productID, delFlag, addTime, addUserId, addMark)
values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}');",
roadId, i, roadSpec, 0, 10, -1, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
//插入关联表
sql.AppendFormat(@"
insert into
mas_container_cargo_road(id, containerId, layerNo, roadId, sort, delFlag, addTime, addUserId, addMark)
values('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}');", Guid.NewGuid().ToString(), boxId, floor, roadId, i, 0, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), -1, -1);
}
sqliteHelper.BeginTransaction();
try
{
sqliteHelper.Execute(sql.ToString());
sqliteHelper.Commit();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = true;
dic["roadNo"] = boxInfoDal.NumToABCD(floor);
dic["roadNum"] = roadNum;
dic["maxProductNum"] = "10";
return Content(JsonConvert.SerializeObject(dic));
}
catch (Exception ex)
{
sqliteHelper.Rollback();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic["ok"] = false;
dic["msg"] = ex.Message;
return Content(JsonConvert.SerializeObject(dic));
}
}
#endregion
}
}

效果图:

 
分类: ASP.NET MVC
标签: ASP.NET MVC

ASP.NET MVC局部视图的更多相关文章

  1. 使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面

    以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观.简捷.易于维护,由于不用JS ...

  2. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  3. ASP.NET MVC必知必会知识点总结(二)

    一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectCon ...

  4. ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  5. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  6. asp.net mvc 4 高级编程学习笔记:第三章 视图(2)

    页面布局 asp.net MVC中提供了布局的支持,默认情况下才布局文件保存到 /View/Shared/目录下的_Layout.cshtml,View目录有个_ViewStart.cshtml文件, ...

  7. asp.net mvc 如何调用微信jssdk接口:分享到微信朋友(圈)| 分享到qq空间

    如何在asp.net mvc 项目里, 调用微信jssdk接口,现实功能: 分享到微信朋友(圈)| 分享到qq空间 1 创建一个Action,准备一些数据,初始化数据(签名): /// <sum ...

  8. ASP.NET MVC分页实现之改进版-增加同一个视图可设置多个分页

    我之前就已经实现了ASP.NET MVC分页(查看该博文),但它有局限性,必须确保在同一个视图中只能有一处分页,若需要在同一个视图中设置多个分页,却无能为力,为此,我重新对原先的代码进行了优化,增加了 ...

  9. ASP.NET MVC分页实现

    ASP.NET MVC中不能使用分页控件,所以我就自己写了一个分页局部视图,配合PageInfo类,即可实现在任何页面任意位置呈现分页,由于采用的是基于POST分页方式,所以唯一的限制就是必须放在FO ...

随机推荐

  1. 移动端 常见布局CSS3的细节

    结合 Framework7 和ios UI系统,微信weUI,支付宝H5    我们在移动端一些css用法 细节的有了更深的了解: 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,bac ...

  2. android利用jdk制作签名

    Apk签名首先要有一个keystore的签名用的文件. keystore是由jdk自带的工具keytool生成的.详细生成方式參考一下: 開始->执行->cmd->cd 到你安装的j ...

  3. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  4. TP-Link WR842N VPN错误619 不能建立到远程计算机的连接

    一直在用Tenacy这个VPN,不限时间不限流量的,可是近期发现链接VPN总是失败.在网上查了一下,发现居然是路由器的问题!回忆一下果然是路由器出事儿了,换这个842N之前,一直是能够链接VPN的,所 ...

  5. a web-based music player(GO + html5)

    github 住址:https://github.com/codercheng/music-player 后台是用GO (windows/ linux 都能够),前端是HTML5 推荐用chrome浏 ...

  6. (大数据工程师学习路径)第二步 Vim编辑器----Vim文档编辑

    一.vim重复命令 1.重复执行上次命令 在普通模式下.(小数点)表示重复上一次的命令操作 拷贝测试文件到本地目录 $ cp /etc/protocols . 打开文件进行编辑 $ vim proto ...

  7. DEV GridView嵌套

    近来的DEV搞更多.试图寻找专业点的程序做,对这样一个小小的研究. 本篇是多么真实,现在的记录,可以通过点击这条线的子表的内容相关联的行中打开的列表.的影响,如下面的: 以下是实现过程: 1.设计器里 ...

  8. JavaScript之函数作用域

    有过类似C语言编程经验的同学应该都知道“块级作用域(block scope)”:花括号内的每一段代码都具有各自的作用域,而且在声明它们的代码段之外是不可见的.而在JavaScript中是没有块级作用域 ...

  9. C语言的这些事情有关内存

    C语言的程序内存布局,从高到低依次为:栈区.堆区.未初始化数据区.初始化数据区.代码区. 一.栈区 由编译器自己主动管理,无需程序猿手工控制.存放函数的參数值.局部变量的值等.栈区内容从高地址到低地址 ...

  10. 谈话Java在ThreadLocal理解类

    我们必须先了解:ThreadLocal不超过一个线程类,或者它应该被称为线程局部变量.这从ThreadLocal的JDK我们可以看到的定义 public class ThreadLocal<T& ...