第一次使用easyui配合ajax在.net下的mvc3中做项目,,,我能说我一直被各种人鄙视么???╮(╯_╰)╭,说多了都是泪啊
几乎每一个增删改功能,对我来说,每一步都是新的,一点儿一点儿来,总结:遇到的问题大概有:
<1>、时间格式化显示 <2>、上传文件 <3>、submit提交表单 <4>、加载表单时的数据绑定 <5>、 True和true在js里的区别
<6>、field绑定数据 <7>、json的Data数据的简单操作 <8>、页面返回提示
由于,教师详细信息内容过多,就把详细信息分出来,单独添加,中间牵涉到性别,生日等不同类别的信息的默认选中等,以及文件上传,没少费工夫。
以教师信息管理为例子,总结如下 第一步——>显示列表信息——>添加——>修改——>修改详细——>删除
1、使用easyui显示用户列表,为了让更方便写程序,把js单独拿出来,csthml页面里不再写js,教师信息列表页面如下:
Index.cshtml:
1 @{ 2 ViewBag.Title = "教师信息管理"; 3 Layout = "~/Views/Shared/_Layout2.cshtml"; 4 } 5 <script src="@Url.Content("~/Scripts/BasicSchool_TeacherJS.js")" type="text/javascript"></script> 6 7 <div region="center" style="width: 550px; height: 300px; padding: 1px; overflow-y: hidden"> 8 <div id="grid"> 9 </div> 10 </div> 11 <div id="Dlg-Edit" title="窗口" style="width: 500px; height: 300px;" buttons="#buttons"> 12 <div style="padding: 20px 20px 40px 40px;"> 13 <form method="post" id="Form1"> 14 <table> 15 <tr> 16 <td style="text-align: right"> 17 登陆账号: 18 </td> 19 <td> 20 <input type="text" name="userName" id="userName" class="easyui-validatebox" required="true" 21 style="width: 200px;" maxlength="25" /> 22 (限制:50个字节) 23 </td> 24 </tr> 25 <tr> 26 <td style="text-align: right"> 27 真实姓名: 28 </td> 29 <td> 30 <input type="text" name="RealName" id="RealName" class="easyui-validatebox" required="true" 31 style="width: 200px;" /> 32 </td> 33 </tr> 34 <tr> 35 <td style="text-align: right"> 36 密码: 37 </td> 38 <td> 39 <input type="password" name="pwd" id="pwd" class="easyui-validatebox" required="true" 40 style="width: 200px;" /> 41 </td> 42 </tr> 43 <tr> 44 <td style="text-align: right"> 45 确认密码: 46 </td> 47 <td> 48 <input type="password" name="pwdAgain" id="pwdAgain" class="easyui-validatebox" required="true" 49 style="width: 200px;" /> 50 </td> 51 </tr> 52 </table> 53 </form> 54 </div> 55 </div> 56 <div id="buttons"> 57 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveData()"> 58 保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" 59 onclick="javascript:$('#Dlg-Edit').dialog('close')">关闭</a> 60 </div> 61 <div id="search-window" title="搜索教师账号信息" style="width: 350px; height: 250px; padding: 10px"> 62 <div style="padding: 10px; background: #fff; border: 1px solid #ccc;"> 63 <form method="post" id="Form2"> 64 <table> 65 <tr> 66 <td style="text-align: right"> 67 登陆账号: 68 </td> 69 <td> 70 <input name="lName" id="lName" style="width: 150px;" /> 71 </td> 72 </tr> 73 <tr> 74 <td style="text-align: right"> 75 真实姓名: 76 </td> 77 <td> 78 <input name="tName" id="tName" style="width: 150px;" /> 79 </td> 80 </tr> 81 </table> 82 </form> 83 </div> 84 <div style="text-align: right; padding: 5px; vertical-align: bottom"> 85 <a href="javascript:void(0)" onclick="SearchOK()" id="btn-search" icon="icon-ok">搜索</a> 86 <a href="javascript:void(0)" onclick="closeSearchWindow()" id="btn-search-cancel" 87 icon="icon-cancel">取消</a> 88 </div> 89 </div> 90 91 <div title="完善教师账号信息" id="Creat_Dialog" style="width: 450px; height: 500px;padding: 10px; background: #fff; border: 1px solid #ccc;" /> 92