MVC3.0动态添加表格的行数并Controller中获取添加数据
最近由于项目的中的相关需求，需要在MVC的视图中动态的添加添加数据的行数，并将前台输入的多行数据在Controller中获得传回服务端。本文将介绍如何从MVC的View端动态添加数据行数并将输入的数据在Controller中获得。
问题分析
一、设计前台显示页面（View）。
视图中样式
@*添加上课班信息窗口*@
<div id="Addwin" class="easyui-window" title="添加教学班信息" style="width: 815px; height: 400px"
data-options="iconCls:'icon-save',modal:true">
<div style="padding: 15px 15px 10px 60px;">
<form id="AddForm" method="post" style="width: 710px;height: 300px">
<table cellpadding="3" id="myTab">
@*<thead>*@
<tr align="center">
<td>教学班编号</td>
<td>教学班名称</td>
<td>课程名称</td>
<td>教师名</td>
<td>教工号</td>
<td>选择学生</td>
<td>人数</td>
<td style="border:0"></td>
</tr>
<tr>
<td>
<input type='text' style='width:80px' name="OnClassNo1" id="OnClassNo1" />
</td>
<td>
<input type='text' style='width:130px' name="OnClassName1" id="OnClassName1" />
</td>
<td>
<input type='text' style='width:100px' name="CourseName1" id="CourseName1" />
</td>
<td>
<input type='text' style='width:50px' name="TeacherName1" id="TeacherName1" />
</td>
<td>
<input type='text' style='width:80px' name="EmployeeNo1" id="EmployeeNo1" />
</td>
<td>
<a id="selectStu1" href="#" onclick="addStudentWin();">选择学生</a>
</td>
<td>
<input type='text' style='width:40px' name="TotalMember1" id="TotalMember1" />
</td>
<td style="border:0">
<input style='width:40px; border:0' type='hidden' name="StudentArray1" id="StudentArray1" />
</td>
<td>
<div>
<a onclick="addNewRow();" plain="true" iconcls="icon-add" class="easyui-linkbutton" href="#" id="add"></a>
<a onclick="removeRow();" plain="true" iconcls="icon-remove" class="easyui-linkbutton" href="#" id="eidt"></a>
</div>
</td>
</tr>
</table>
@*position:fixed;bottom:15px;left:250px;*@
</form>
<div class="login" style="text-align: center;bottom:15px;margin-top: 5px " >
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submitInfo();" align="center">确认</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="margin-left: 50px" onclick="javascript:$('#Addwin').window('close');">取消</a>
</div>
</div>
</div>
二、如何动态的添加（删除）记录的行数。
在这里我尝试了两种方法，都能够实现动态的添加行数的作用下面是两种方法的JS文件内容。
方法一：
<pre name="code" class="javascript">var i = 1;
function addRow() {
//用于表格id的自增长
++i;
if (i<5) {
//克隆指定的行
var newTr =tr1.cloneNode(true);
//指定新行的id
newTr.id = "tr" + i;
//指定新行的name
newTr.name = "tr" + i;
//在当前表格中插入行
tr1.parentNode.insertAdjacentElement("beforeEnd", newTr);
} else {
alert("提示消息","最多添加四行！");
}
}
function delRow() {
var tab = document.getElementById('list');
if (tab.rows.length > 2) {
tab.deleteRow(tab.rows.length - 1);
}
else {
alert("已经剩下最后一行，不能删除！");
}
}
方法二：
//动态创建table
function addNewRow() {
var tabObj = document.getElementById("myTab");//获取添加数据的表格
var rowsNum = tabObj.rows.length; //获取当前行数
var colsNum = tabObj.rows[rowsNum - 1].cells.length;//获取行的列数
var myNewRow = tabObj.insertRow(rowsNum);//插入新行
if (rowsNum >= 9) {
alert("警告，最多添加八行记录！");
} else {
var newTdObj1 =myNewRow.insertCell(0);
newTdObj1.innerHTML = "<input type='text' style='width:80px'name='OnClassNo" +rowsNum + "'id='OnClassNo" +rowsNum + "'/>";
var newTdObj2 =myNewRow.insertCell(1);
newTdObj2.innerHTML = "<inputtype='text' style='width:130px' name='OnClassName" + rowsNum + "'id='OnClassName" +rowsNum + "'/>";
var newTdObj3 =myNewRow.insertCell(2);
newTdObj3.innerHTML = "<inputtype='text' style='width:100px' name='CourseName" + rowsNum + "' id='CourseName" + rowsNum + "' />";
var newTdObj4 =myNewRow.insertCell(3);
newTdObj4.innerHTML = "<input type='text' style='width:50px'name='TeacherName" + rowsNum + "' id='TeacherName" + rowsNum + "'/>";
var newTdObj5 = myNewRow.insertCell(4);
newTdObj5.innerHTML = "<inputtype='text' style='width:80px' name='EmployeeNo" + rowsNum + "'id='EmployeeNo" +rowsNum + "'/>";
var newTdObj6 =myNewRow.insertCell(5);
newTdObj6.innerHTML = "<inputtype='text' style='width:50px' name='selectStudent" + rowsNum + "'id='selectStudent" + rowsNum + "' value='选择学生'/>";
newTdObj6.innerHTML = "<aid='selectStu" +rowsNum + "'href='#' onclick='addStudentWin();'>选择学生</a>";
var newTdObj7 =myNewRow.insertCell(6);
newTdObj7.innerHTML = "<inputtype='text' style='width:40px' name='TotalMember" + rowsNum + "'id='TotalMember" +rowsNum + "' />";
var newTdObj8 =myNewRow.insertCell(7);
newTdObj8.innerHTML = "<inputtype='hidden' style='width:40px; border:0' name='StudentArray" + rowsNum + "'id='StudentArray" + rowsNum + "' />";
var newTdObj9 =myNewRow.insertCell(8);
newTdObj9.innerHTML = "<div><aonclick='addNewRow();' plain='true' iconcls='icon-add'class='easyui-linkbutton' href='#' id='add'>加</a>" +
"<aonclick='removeRow();' plain='true' iconcls='icon-remove'class='easyui-linkbutton' href='#' id='eidt'>删</a></div>";
}
}
//窗口表格删除一行
function removeRow() {
var tab = document.getElementById('myTab');
var i = tab.rows.length;
if (tab.rows.length > 2) {
tab.deleteRow(tab.rows.length - 1);
--i;
}
else {
alert("已经剩下最后一行，不能删除！");
}
}
最终我选择了第二种方案，因为相对于第一种方案第二种方案中的数据更容易获得。第一种方案不同的是行号，每行中相同字段的数据不易区分；第二种方案每行相同字段的ID是不一样的易于数据的获得。
三、如何提交输入的数据
JS实现如下：
//提交表单
function submitInfo() {
//提交表单
$.messager.progress(); // 显示进度条
$('#AddForm').form('submit', {
url: "/OnClass/AddOnClassInfo",
onSubmit: function () {
},
success: function (data) {
if (data > 0) {
alert("保存成功");
}
$('#dg').datagrid('reload'); // 重新载入当前页面数据
//$.messager.progress('close'); // 如果提交成功则隐藏进度条
$('#Addwin').window('close'); //关闭窗口
}
});
}
四、在Controller中获得前台输入的数据
数据已经提交了如何去或者这些数据，就又是一个问题了，如何解决详见如下代码。
<pre name="code" class="csharp"> public void AddOnClassInfo(IList<OnClass> lstOnClass)
{
//1.获取行数
int rowNum = 0;
string strOnClassName = "";
bool flag = true;
do
{
rowNum++;
//stringstrTeachingName = "teachingClassName" + rowNum;
strOnClassName = Request["teachingClassName" + rowNum];
if (strOnClassName==null || strOnClassName=="")
{
flag = false;
}
} while (flag);
//2.循环每一行，给实体对象分别赋值
List<OnClass> lstOnClassInfo= new List<OnClass>();
for (int i = 1; i <rowNum; i++)
{
OnClass onClass = new OnClass()
{
OnClassID = Guid.NewGuid(),
OnClassName = Request["teachingClassName" + i],
// for (int j = 0; j< rowNum; j++)
//{
//}
};
lstOnClassInfo.Add(onClass);
}
//调用服务端服,跟本文主题无关
onClassService.AddOnClassBatch(objOnClass);
}
本分的思路想必读完文章之后大家也能有所了解，我将这个问题分解成了四部分，每一部分既独立又相互联系，最后达到了自己想要的结果。
我想，无论考虑什么问题我们都应该像这篇文章一样将问题分解，然后一个一个的小问题去解决，最终达到解决整个问题的目标。首先从简单的入手，从自己已有的积累出发。
时间： 2024-10-03 15:34:32