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);
        }

 

         本分的思路想必读完文章之后大家也能有所了解，我将这个问题分解成了四部分，每一部分既独立又相互联系，最后达到了自己想要的结果。

         我想，无论考虑什么问题我们都应该像这篇文章一样将问题分解，然后一个一个的小问题去解决，最终达到解决整个问题的目标。首先从简单的入手，从自己已有的积累出发。