ASP.NET MVC局部视图 使用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;
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=" 960px; margin: auto; background-color: #fff; padding: 7px;">
<div style="height: 110px; border: solid 1px #999;">
<div style="float: left; 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;
120px;
height: 35px;
border: solid 1px #999;
font-size: 18px;
line-height: 35px;
text-align: center;
cursor: pointer;
}

.div-button2
{
float: left;
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;
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; 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; 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; 100%; height: 33px; line-height: 33px; text-align: center;">
<div style="float: left; margin-left: 100px;">
货机暂停才可以进行以下操作:以下操作完成须启动货机
</div>
</div>
<div style="float: left; 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;
97px;
background-color: #f5f5f5;
cursor: default;
}

.div-box div
{
float: left;
margin-top: 15px;
margin-left: 9px;
height: 120px;
80px;
line-height: 120px;
font-size: 16px;
font-family: 黑体;
text-align: center;
}

.ul-instructions
{
float: left;
200px;
padding: 0;
margin: 0;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}

.ul-instructions li
{
float: left;
list-style: none;
200px;
line-height: 25px;
font-size: 12px;
margin: 0;
padding: 3px;
}

.ul-instructions li div
{
float: left;
}

.div-road
{
float: left;
height: 130px;
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
{
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 />
</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 ].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; 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 />
</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; 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; 25px; text-align: center;" />
</td>
</tr>
<tr>
<td style="text-align: center;">现
<input value="@drRoad["existProductNum"].ToString()" type="text" style="height: 19px; 25px; border: 0; background-color: red; text-align: center;" readonly="readonly" /><input value="@drRoad["maxProductNum"].ToString()" type="text" style="height: 19px; 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局部视图避免JS拼接HTML,编写易于维护的HTML页面ASP.NET MVC局部视图
使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面

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

    以前使用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;
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=" 960px; margin: auto; background-color: #fff; padding: 7px;">
<div style="height: 110px; border: solid 1px #999;">
<div style="float: left; 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;
120px;
height: 35px;
border: solid 1px #999;
font-size: 18px;
line-height: 35px;
text-align: center;
cursor: pointer;
}

.div-button2
{
float: left;
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;
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; 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; 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; 100%; height: 33px; line-height: 33px; text-align: center;">
<div style="float: left; margin-left: 100px;">
货机暂停才可以进行以下操作:以下操作完成须启动货机
</div>
</div>
<div style="float: left; 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;
97px;
background-color: #f5f5f5;
cursor: default;
}

.div-box div
{
float: left;
margin-top: 15px;
margin-left: 9px;
height: 120px;
80px;
line-height: 120px;
font-size: 16px;
font-family: 黑体;
text-align: center;
}

.ul-instructions
{
float: left;
200px;
padding: 0;
margin: 0;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}

.ul-instructions li
{
float: left;
list-style: none;
200px;
line-height: 25px;
font-size: 12px;
margin: 0;
padding: 3px;
}

.ul-instructions li div
{
float: left;
}

.div-road
{
float: left;
height: 130px;
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
{
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 />
</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 ].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; 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 />
</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; 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; 25px; text-align: center;" />
</td>
</tr>
<tr>
<td style="text-align: center;">现
<input value="@drRoad["existProductNum"].ToString()" type="text" style="height: 19px; 25px; border: 0; background-color: red; text-align: center;" readonly="readonly" /><input value="@drRoad["maxProductNum"].ToString()" type="text" style="height: 19px; 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局部视图避免JS拼接HTML,编写易于维护的HTML页面ASP.NET MVC局部视图
使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面