Asp.Net+Oracle+BootStrap+Jquery实现简单的增删查改
概要:相信有了解过BootStrap的朋友都知道,BootStrap这家伙很强大,尽管你不是学做美工的,你都会爱上它.我这边通过一些学习写了一套前端基于BootStrap+Jquery,后端是Oracle+Ado.Net的一套简单的增删查改.我们可以一起学习.
正文,义不容辞首先来张主页面,整体的的页面布局:
index.html,BootStrap可以去网上下载:
<!DOCTYPE HTML> <html> <head> <title>后台管理系统</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/BootStrap/assets/css/dpl-min.css" rel="stylesheet" type="text/css" /> <link href="/BootStrap/assets/css/bui-min.css" rel="stylesheet" type="text/css" /> <link href="/BootStrap/assets/css/main-min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header"> <!--logo--> <div class="dl-title"> <!--<img src="/chinapost/Public/assets/img/top.png">--> </div> <div class="dl-log">欢迎您，<span class="dl-log-user">YZR</span><a href="#" title="退出系统" class="dl-log-quit">[退出]</a> </div> </div> <div class="content"> <div class="dl-main-nav"> <div class="dl-inform"><div class="dl-inform-title"><s class="dl-inform-icon dl-up"></s></div></div> <ul id="J_Nav" class="nav-list ks-clear"> <li class="nav-item dl-selected"><div class="nav-item-inner nav-home">系统管理</div></li> <li class="nav-item dl-selected"><div class="nav-item-inner nav-order">业务管理</div></li> </ul> </div> <ul id="J_NavContent" class="dl-tab-conten"> </ul> </div> <script type="text/javascript" src="/BootStrap/assets/js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="/BootStrap/assets/js/bui-min.js"></script> <script type="text/javascript" src="/BootStrap/assets/js/common/main-min.js"></script> <script type="text/javascript" src="/BootStrap/assets/js/config-min.js"></script> <script> BUI.use('common/main',function(){ var config = [ { id: '1', menu: [ { text: '系统管理', items: [ { id: '12', text: '机构管理', href: 'Node/index.html' }, { id: '3', text: '角色管理', href: 'Role/index.html' }, { id: '4', text: '用户管理', href: '/BootStrap/User/index.html' }, { id: '6', text: '菜单管理', href: 'Menu/index.html' } ] }] }, { id: '7', homePage: '9', menu: [ { text: '业务管理', items: [ { id: '9', text: '查询业务', href: 'Node/index.html' } ] }] }]; new PageUtil.MainPage({ modulesConfig : config }); }); </script> <!--页脚--> <div style="text-align:center;"> </div> </body> </html>
基于用户管理写一套增删查改:
User/index.html:
<!DOCTYPE html> <html> <head> <title>用户管理</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/BootStrap/Css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/BootStrap/Css/bootstrap-responsive.css" /> <link rel="stylesheet" type="text/css" href="/BootStrap/Css/style.css" /> <script type="text/javascript" src="/BootStrap/Js/jquery.js"></script> <!--<script type="text/javascript" src="/BootStrap/Js/jquery.sorted.js"></script>--> <script type="text/javascript" src="/BootStrap/Js/bootstrap.js"></script> <script type="text/javascript" src="/BootStrap/Js/ckform.js"></script> <script type="text/javascript" src="/BootStrap/Js/common.js"></script> <script src="/Js/AjaxHelp.js"></script> <script src="/TempJS/Yzr.js"></script> <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max- 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } } </style> </head> <body> <script src="../../TempJS/Yzr.js"></script> 用户名称： <input type="text" name="ENAME" id="ENAME"class="abc input-default" placeholder="" value=""> <button type="button" class="btn btn-primary" onclick="QueryByName()">查询</button> <button type="button" class="btn btn-success" id="addnew">新增用户</button> <table id="EMP_grid" class="table table-bordered table-hover definewidth m10"> <thead> <tr> <th>员工编号</th> <th>姓名</th> <th>工作</th> <th>薪水</th> <th>雇佣日期</th> <th>绩效奖金</th> <th>补贴</th> <th>部门编号</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </body> </html> <script> var Template = { 1: "<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td><td>{6}</td><td>{7}</td><td><a href='/BootStrap/User/edit.aspx?empno={0}'>编辑</a> | <a href='javascript:void(0);' onclick='del({0})'>删除</a></td></tr>" } $(function () { getlist(); //新增User $('#addnew').click(function(){ window.location.href="/BootStrap/User/add.aspx"; }); }); function getlist() { //获取表格数据 AjaxHelp.ProcessGet("/Ajax/BootstrapHandler.ashx?action=query", function (ajaxObj) { getdata(ajaxObj); }) } function getdata(ajaxObj) { var template = Template[1]; var innerhtml = ""; for (var i = 0; i < ajaxObj.length; i++) { innerhtml = innerhtml + StringFormat.execute(template, ajaxObj[i].EMPNO, ajaxObj[i].ENAME, ajaxObj[i].JOB, ajaxObj[i].MGR, ajaxObj[i].HIREDATE, ajaxObj[i].SAL, ajaxObj[i].COMM, ajaxObj[i].DEPTNO); } $("#EMP_grid tbody").html(innerhtml); } function del(id) { if(confirm("确定要删除吗？")) { AjaxHelp.ProcessGet("/Ajax/BootstrapHandler.ashx?action=del&empno=" + id, function (ajxaObj) { alert(ajxaObj); var url = "/BootStrap/User/index.html"; window.location.href = url; }); } } function QueryByName() { var ename = $("#ENAME").val(); AjaxHelp.ProcessGet("/Ajax/BootstrapHandler.ashx?action=queryByname&ename=" + ename, function (ajaxObj) { if(ajaxObj.Status==1){ getdata(ajaxObj.Datas); } }); } </script>
编辑页面和新增页面基本一致:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="edit.aspx.cs" Inherits="myOracle.UI.BootStrap.User.edit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>编辑</title> <link rel="stylesheet" type="text/css" href="/BootStrap/Css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/BootStrap/Css/bootstrap-responsive.css" /> <link rel="stylesheet" type="text/css" href="/BootStrap/Css/style.css" /> <script type="text/javascript" src="/BootStrap/Js/jquery.js"></script> <!-- <script type="text/javascript" src="../Js/jquery.sorted.js"></script>--> <script type="text/javascript" src="/BootStrap/Js/bootstrap.js"></script> <script type="text/javascript" src="/BootStrap/Js/ckform.js"></script> <script type="text/javascript" src="/BootStrap/Js/common.js"></script> <script src="/TempJS/showdate.js"></script> <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max- 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } } </style> </head> <body> <form method="post" class="definewidth m20"> <input type="hidden" name="id" value="" /> <table class="table table-bordered table-hover definewidth m10"> <tr> <td width="10%" class="tableleft">empno</td> <td><input type="text" name="empno" value="" id="empno"/></td> </tr> <tr> <td class="tableleft">ename</td> <td><input type="text" name="ename" value="" id="ename"/></td> </tr> <tr> <td class="tableleft">job</td> <td><input type="text" name="job" value="" id="job"/></td> </tr> <tr> <td class="tableleft">mgr</td> <td><input type="text" name="mgr" value="" id="mgr"/></td> </tr> <tr> <td class="tableleft">hiredate</td> <td><input type="text" name="hiredate" value="" id="hiredate" onclick="return Calendar('hiredate');" /></td> </tr> <tr> <td class="tableleft">sal</td> <td><input type="text" name="sal" value="" id="sal"/></td> </tr> <tr> <td class="tableleft">comm</td> <td><input type="text" name="comm" value="" id="comm"/></td> </tr> <tr> <td class="tableleft">deptno</td> <td><input type="text" name="deptno" value="" id="deptno"/></td> </tr> <tr> <td class="tableleft"></td> <td> <button type="submit" class="btn btn-primary">保存</button> <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button> </td> </tr> </table> </form> </body> </html> <script type="text/javascript"> var row='<%=Mstr %>'; var cols = row.split(','); $("#id").val(cols[0]); $("#empno").val(cols[0]); $("#ename").val(cols[1]); $("#job").val(cols[2]); $("#mgr").val(cols[3]); $("#hiredate").val(cols[4]); $("#sal").val(cols[5]); $("#comm").val(cols[6]); $("#deptno").val(cols[7]); </script> <script> $(function () { $('#backid').click(function () { window.location.href = "/BootStrap/User/index.html"; }); }); </script>
BootstrapHandler.ashx:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace myOracle.UI.Ajax { using myOracle.Bll; using System.Data; using myOracle.Comm; using myOracle.Model; using myOracle.Utility; using System.Text; /// <summary> /// BootstrapHandler 的摘要说明 /// </summary> public class BootstrapHandler : BaseHandler { EmpBll bll = new EmpBll(); public override void SubPR(HttpContext context) { string action = Query<string>("action"); switch(action) { case "query": Query(); break; case "del": Delete(); break; case "queryByname": queryByname(); break; } } /// <summary> /// by YZR /// </summary> private void queryByname() { string ename = Query<string>("ename").ToUpper(); string pageSize = "20"; string pageIndex = "1"; DataTable dt = DbHelper.GetDataTableFromIDataReader(bll.GetDataReaderByPage(" ename like '%"+ename+"%'", int.Parse(pageSize), int.Parse(pageIndex))); string strJson = JSonHelper.DataTableToJson(dt); StringBuilder sb = new StringBuilder(); sb.Append("{"Status":1,"Datas":"); sb.Append(strJson); sb.Append("}"); response.Write(sb); } /// <summary> /// by YZR /// </summary> private void Delete() { string empno=Query<string>("empno"); int count = 0; count = bll.DeleteList(empno); if (count > 0) { HttpContext.Current.Response.Write("共删除了" + count + "条数据"); } else { HttpContext.Current.Response.Write("error"); } } /// <summary> /// by YZR /// </summary> private void Query() { string pageSize="20"; string pageIndex="1"; DataTable dt=DbHelper.GetDataTableFromIDataReader(bll.GetDataReaderByPage("",int.Parse(pageSize),int.Parse(pageIndex))); string strJson = JSonHelper.DataTableToJson(dt); response.Write(strJson); } } }
Note:个人觉得,BootStrap确实很强大,如果美工能力稍微差一点的话,配合EasyUI等JS框架也同样可以做出挺漂亮的东西.
本文仅用于学习!
END