我想了一下是一层一层的写还是一个功能一个功能的写,决定完成一个功能再进行下一个,这样可以让每个功能更有连贯性,看起来更容易理解。之后写完再一层一层的看就好啦。
今天我们要完成的功能是用一个表格先将数据库的数据展示出来(之后的增删改查是在这个表格之上进行的操作,所以把展示内容放在了第一步)。这也相当于是一个查询功能。
1.现在我们是进行单个功能的层次化编写。就决定从下层往上层开始写吧!来到DAL(数据库访问层),因为我们要查数据库的所有数据(可能不止一条),所以应该用List<>来接收多个model的集合。
(1)添加必要的命名空间
(2)对查询方法SeachList(string _where)进行编写
public List<Model.Model> SearchList(string _where)
{
List<Model.Model> list = new List<Model.Model>();
SqlHelper sqlhep = new SqlHelper();
string str = "select * from ThreeLayer_Test where 1=1 " + _where + " ";
DataTable table = sqlhep.ExecuteDataTable(str);
if (table.Rows.Count > 0)
{
foreach (DataRow item in table.Rows)
{
list.Add(new Model.Model()
{
Indentity = item["indentity"].ToString(),
Name = item["name"].ToString(),
Gender = item["gender"].ToString(),
});
}
}
return list;
}
注:这里解释一些_where这个参数,现在我们进行的查询数据库的所有内容(即有什么装什么),但是我们之后的查询是一个条件查询,所以我们需要一个参数。这里的想法是结合sqlsever语句传一个字符串进来,这个字符串是在Handler.ashx里对传入的indentity(条件)进行拼接的结果。意思就是,如果indentity为空相当于没有条件,就是查询所有数据,如果indentity有值,即查询符合indentity条件的数据。
下面是Handler.ashx里的内容放在这里方便查看理解。
注:这里的indentity是你之后会在页面上输入的数据,现在结合上面的语句就可以知道为什么要这样写啦。不清楚的可以百度一下sqlserver条件查询语句哦!
2.现在我们去到BLL(业务逻辑)层!它比较简单,它的作用就是一个过渡层。对于数据访问层而言,它是调用者;对于表示层而言,它却是被调用者。
public List<Model.Model> SearchList(string _where)
{
return dal.SearchList(_where);
}
3.现在我们去到前端界面!
(1)建立一个html文件(注意它放的位置)
(2)开始编写(我们先进行简单的排版即可,如果想进行优化,我们之后再来完成)。记得引入js文件哦(没有的话先去官网下载https://jquery.com/download/)下载之后放在项目中再进行引用。
(3)来吧,现在我们先做一个简单的页面!
<table>
<tr>
<td>身份证号:</td>
<td><input /></td>
<td><button>查询</button></td>
</tr>
<tr>
<td><button>添加</button></td>
<td><button>修改</button><button>删除</button></td>
<td></td>
</tr>
</table>
</div>
<div id="list"></div>
注意个id=“list”的div,我们这里是想动态生成一个表,div是承载这个表的容器。
(4)好啦,现在我们来进行function()的编写吧!
<script>
search("")
function search(_indentity)
{
$.ajax({
type: 'POST',
url: "Handler.ashx",
data: {
type: "searchlist",
indentity:_indentity
},
success: function (result) {
var json = JSON.parse(result);
if (json.Status == 1) console.log(json.Data);
{
var str = "";
str += '<table style="text-align:center">';
str += '<tr>';
str += '<th style="width:200px">姓名</th>';
str += '<th style="width:200px">性别</th>';
str += '<th style="width:200px">身份证号</th>';
str += '</tr>';
}
for (var i = 0; i < json.Data.length; i++) {
str += '<tr>';
str += '<td>' + json.Data[i].Name + '</td>';
str += '<td>' + json.Data[i].Gender + '</td>';
str += '<td>' + json.Data[i].Indentity + '</td>';
str += '</tr>';
}
str += '</table>';
$("#list").html(str);
}
})
}
</script>
这里最麻烦的就是动态表的实现。第一行的search("")表示我加载这个页面的时候就执行这个search(""),传入一个空字符串,相当于不添加条件,即查询所有内容,和我上面讲的相对应哦,如果不清楚这个ajax请求,可以去看我之前写过的一篇文章(https://blog.csdn.net/qq_40422692/article/details/107509382)
4.注意到ajax里面的url了吗,Handler.ashx就是我们现在要完成的内容啦(这里面如果有不理解也可以看上面那个链接里的文章)
(1)首先:先建立一个Handler.ashx
(2)建立好啦,现在我们来编写里面的内容吧(有不理解看上面的链接哦)
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
using Model;
namespace ThreeLayer
{
/// <summary>
/// Summary description for Handler
/// </summary>
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var type = context.Request["type"];
if(type == "searchlist")
{
SearchList(context);
}
}
public void SearchList(HttpContext context)
{
Bll bll = new Bll();
var indentity = context.Request["indentity"];
var _where = "";
if (!string.IsNullOrEmpty(indentity))
{
_where = "and indentity like '%" + indentity + "%'";
}
ReasultModel resmodel = new ReasultModel();
List<Model.Model> modelist = bll.SearchList(_where);
resmodel.Status = 1;
resmodel.Data = modelist;
var result = Newtonsoft.Json.JsonConvert.SerializeObject(resmodel);
context.Response.Write(result);
}
public class ReasultModel
{
public int Status { get; set; }
public string Msg { get; set; }
public object Data { get; set; }
public string Deg { get; set; }
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
对啦:这里我们需要引用一个包(因为我们需要处理json数据,所以我们需要Newtonsoft Json工具),详细过程在这里看哦。(https://jingyan.baidu.com/article/d2b1d102da01645c7e37d4da.html)
5.因为我们没有做添加功能,所以我们先手动在数据库里添加一些数据,来测试一下吧!下面是我的运行结果(界面还不是很好看)
随意优化一下页面吧
这个过程就完成啦!
(优化的地方:表格居中,表格边框线,表格内字体居中,调节控件间距)有需要可以百度哦!