初学wenapi做了一个从数据库增删改查的项目

webapi：

　1.创建项目：visual C# —> ASP.NET MVC 4 web应用程序 模板—>web api;

　

2.注册路由:

　　

　　路由表中的每一个条目都包含一个路由模板。这个Web API默认的路由模版是"api/{controller}/{id}"。在这个模版中，“api”是一个文字式路径片段，而{controller}和{id}则是占位符变量。

　　当Web API框架接收一个HTTP请求时，它会试图根据路由表中的一个路由模板来匹配其URI。如果无路由匹配，客户端会接收到一个404（未找到）错误。

3.linq to sql连接数据库

　　1.建立数据库建表

　　2.在models文件夹里面新建linq to sql类文件

　　3.工具->连接到数据库

　　4.将要用的表拖入设计区

　　

5.获取数据库Getway。"linq to sql class"文件名+Datacontext实例化这个对象，数据表就会映射到一个集合属性中，personDataDataContext db = new personDataDataContext();

6.增删改查

　　增：

　　public Boolean Post([FromBody]UserInfo userInfo) 　　{ 　　

　　　　personDataDataContext db = new personDataDataContext();

　　　　var s1 = new test2 　　

　　　　{ 　　

　　　　　　UserName =userInfo.UserName, 　　Id=userInfo.Id, 　　Age=userInfo.Age 　　

　　　　};

　　　　if (db.test2.SingleOrDefault<test2>(s => s.Id == userInfo.Id) == null) 　　

　　　　　　{ 　　

　　　　　　　　db.test2.InsertOnSubmit(s1); 　　

　　　　　　　　db.SubmitChanges(); 　　

　　　　　　　　return true; 　　

　　　　　　} 　　else { 　　

　　　　　　　　return false; 　　

　　　　　　}
　　}

　　删:

　　public bool Delete(int id) 　　

　　{ 　　

　　　　personDataDataContext db = new personDataDataContext(); 　　

　　　　var deleteperson = db.test2.SingleOrDefault<test2>(s => s.Id == id); 　　

　　　　if (deleteperson == null) 　　

　　　　{ 　　

　　　　　　return false; 　　

　　　　} 　　else { 　　

　　　　　　　db.test2.DeleteOnSubmit(deleteperson); 　　

　　　　　　　db.SubmitChanges(); 　　

　　　　　　　return true; 　　

　　　　　　}
　　　　}

　　改:　　　　

　　public Boolean Put(int id, [FromBody]UserInfo userInfo) 　　

　　{ 　　

　　　　personDataDataContext db = new personDataDataContext(); 　　

　　　　var editperson = db.test2.SingleOrDefault<test2>(s => s.Id == userInfo.Id); 　　

　　　　if (editperson == null) 　　

　　　　{ 　　

　　　　　　return false; 　　

　　　　} 　　else { 　　

　　　　　　　editperson.Age = userInfo.Age; 　　

　　　　　　　editperson.UserName = userInfo.UserName; 　　

　　　　　　　db.SubmitChanges(); 　　

　　　　　　　return true; 　　

　　　　} 　　

　　查:

　　public IEnumerable<test2> Get() 　　

　　{ 　　

　　　　personDataDataContext db = new personDataDataContext(); 　　

　　　　var query = from s in db.test2 　　

　　　　orderby s.UserName 　　

　　　　select s; 　　

　　　　return query; 　　

　　}

　　// GET api/values/5 　　

　　public string Get(int id) 　　

　　{ 　　

　　　　return "value"; 　　

　　}

　　这里我新建了一个userinfo类

　　public class UserInfo 　　{ 　　　　public string UserName { get; set; } 　　　　public int Id { get; set; } 　　　　public int Age { get; set; } 　　}

　　用来接收前端页面ajax请求中的data数据，s => s.Id == userInfo.Id是lamda表达式创建委托方法意思是在db.test2的person集合中查找某个person的Id与userinfo接收到的id相等的person对象

前端页面部分

　　

@{     Layout = null; }

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>index</title>

<link href="~/CSS/bootstrap.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.11.3.min.js"></script>

<script src="~/Scripts/bootstrap.js"></script>

<script src="~/Scripts/sweetalert-dev.js"></script>

<script src="~/Scripts/sweetalert.min.js"></script>

<script src="~/Scripts/table.js"></script>

<link href="~/CSS/sweetalert.css" rel="stylesheet" />

<link href="~/CSS/table.css" rel="stylesheet" />

</head>

<body>

<div>

<input type="button" data-toggle="modal" href="#modal-login" class="btn btn-success btn-primary btn-lg btn-block" value="增加" />

</div>

<table id="table" class="table table-hover table-bordered">

<thead>

<tr class="active">

<th>用户名</th>

<th>工号</th>

<th>年龄</th>

<th>操作</th>

</tr>

</thead>

<tbody></tbody>

</table>

<!---------------------------------------------模态框------------------------------------------------>

<div id="modal-login" class="modal fade">

<!--半透明遮罩-->

<div class="modal-dialog">

<!--宽、定位-->

<div class="modal-content">

<!--背景色、边框、阴影-->

<div class="modal-header">

<span data-dismiss="modal" class="close">&times;</span>

<h3 class="modal-title">用户信息添加</h3>

</div>

<div class="modal-body">

<form>

<div class="form-group">

<label for="uname">用户名：</label>

<input class="form-control" id="uname" type="text" />

</div>

<div class="form-group">

<label for="uid">工号：</label>

<input class="form-control" id="uid" type="text" />

</div>

<div class="form-group">

<label for="upwd">年龄：</label>

<input class="form-control" id="uage" type="text" />

</div>

</form>

</div>

<div class="modal-footer">

<input id="submitData" class="btn btn-success" type="button" value="提交" />

<input id="cancel" data-dismiss="modal" class="btn btn-danger" type="button" value="取消" />

</div>

</div>

</div>

</div>

</body>

</html>

js文件:

$(function () {

$.ajax({

type: "GET",

url: "/api/Values",

data: {},

success: function (data) {

for (var i = 0; i < data.length; i++) {

var $info = $("<tr><td>" + data[i].UserName + "</td><td>" + data[i].Id + "</td><td>" + data[i].Age + "</td><td><input type='button' class='btn btn-warning btn-lg' id='btnPutUserInfo' data-toggle='modal' href='#modal-login' href='#modal-login' value='修改' /><input type='button' class='btn btn-danger btn-lg delete' value='删除'/></td></tr>");

$("#table>tbody").append($info);

}

}

})

//绑定post按钮点击事件 $("#submitData").click(function (e) {

if (e.target.value !== '修改') { console.log(e.target.value !== '修改'); console.log(e.target.value)

var uname = document.getElementById("uname");

var uid = document.getElementById("uid");

var uage = document.getElementById("uage");

if (uid.value === null) { return false }

$.ajax({

type: "POST",

url: "/api/Values",

data: { "Id": uid.value, "Age": uage.value, "UserName": uname.value },

success: function (data) {

if (data == true) {

swal("添加成功!","", "success");

} else {

swal("添加失败!","","error");

}
                    $(".confirm").click(function () { window.location.reload(); })

}

})

}

})

//绑定修改和删除事件 $("table").on('click', function (e) {

if (e.target.value == '删除') { swal({

title: "您确定要删除吗？", text: "您确定要删除这条数据？", type: "warning",

showCancelButton: true,

closeOnConfirm: false,

confirmButtonText: "是的，我要删除", confirmButtonColor: "#ec6c62"

}, function() {

$.ajax({

type: "DELETE",

url: "/api/Values/" + e.target.parentNode.parentNode.firstChild.nextSibling.innerHTML,

data: {},

}).done(function (data) {

swal("操作成功!", "已成功删除数据！", "success");

$(".confirm").click(function () { window.location.reload(); })

}).error(function(data) {

swal("OMG", "删除操作失败了!", "error");

$(".confirm").click(function () { window.location.reload(); })

});
            });

} else if (e.target.value == '修改') {

　　　　　　try { $("#submitData")[0].id = "submitChange" }

catch (e) { };

$("form div:nth-child(2)").remove();

$("#submitChange")[0].value = '修改'; var uname = document.getElementById("uname");

var uage = document.getElementById("uage");

var age = e.target.parentNode.previousSibling;

var id = age.previousSibling;

var name = id.previousSibling;

uage.value = age.innerHTML//年龄 uname.value = name.innerHTML//用户名
　　　　　 $("h3")[0].innerHTML = "用户信息修改"

$("#submitChange").click(function () {

console.log(id.innerHTML);

$.ajax({

type: "PUT",

url: "/api/Values/" + id.innerHTML,

data: { "Id": id.innerHTML, "Age": uage.value, "UserName": uname.value },

success: function (data) {

if (data == true) {

swal("修改成功!","", "success");

} else {

swal("修改失败!","", "error");

}

$(".confirm").click(function () { window.location.reload(); })

}

})

})

$("#cancel").click(function () { window.location.reload();  })
        }
    })
})

前端截图:

　　

　   　　　

css对表格做了些样式处理我就不贴出来了，这里我用了一个弹窗的jquery插件叫sweetalert.js所有里面有swal这个方法调用。说一下前端页面我主要遇到的问题:

前端我在页面加载后执行Get方法获取数据库中的所有记录。通过遍历拼接字符串加载表格和按钮。

1.在对按钮绑定事件的时候我发现修改和删除按钮绑定的事件不能被触发可能是由于这两个按钮是生成的按钮不能绑定click事件，于是我先绑定原先的table，再用e.target获取事件对象，对事件对象进行判断，执行修改或删除命令。

2.在修改时因为我添加事件也使用了之前那个模态框导致我做修改的时候程序是走到了绑定添加的事件里面的，为了将这两个事件区别开，我在put方法下先修改了提交按钮的id，在绑定这个新的id的按钮事件来解决这个问题。

大致的经过就是这样，之前一直是做的前端这一块，对.net才刚刚接触，这是我的第一篇文章，后面我还会将我学习的东西分享给大家，如果有什么地方做的不好的也欢迎大家给予指正！

webapi初学项目(增删改查)的更多相关文章

  1. webapi初学项目(增删改查)，webapi增删

    wenapi做了一个从数据库增删改查的项目 webapi: 1.创建项目:visual C# —> ASP.NET MVC 4 web应用程序 模板—>web api; 2.注册路由: 路 ...

  2. 初试KONCKOUT+WEBAPI简单实现增删改查

    初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...

  3. (转)初试konckout+webapi简单实现增删改查

    原文地址:http://www.cnblogs.com/flykai/p/3361064.html 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc ...

  4. 基于Angular+WebAPI+OData的增删改查

    对于在ASP.NET WebAPI中怎么使用OData,已经在我前面的日志中的说明, 在ASP.NET Web API中使用OData 在这个示例中.我新建了一个Order的实体,在前端使用Angul ...

  5. idea社区版+第一个spring boot项目+增删改查+yml修改端口号

    参考:https://www.cnblogs.com/tanlei-sxs/p/9855071.html 中途出现问题时参考了太多 1.下载idea社区版 2.在settings -> Plug ...

  6. jsp+Servlet+JavaBean+JDBC+MySQL项目增删改查

    1简单的Mvc,分层建包. java resources src/mian/java (1)dao 包 JDBC连接类,连接数据库.增删改查方法,其他的方法. (2)model包 实体类,数据库字段, ...

  7. C#学习笔记（6）——大项目增删改查

    说明(2017-5-28 11:35:39): 1. 需要注意的地方很多 2. 首先是连接字符串str要直接写在类里面,不然每个按钮里面都要写一遍. 3. 查询用到sqlDataReader等三个方法 ...

  8. 初学.net增删改查

    分页显示 DAL: public List GetListByPager(int PageIndex, int PageSize, out int RowCount) { string sql = & ...

  9. Asp.Net WebApi学习教程之增删改查

    webapi简介 在asp.net中,创建一个HTTP服务,有很多方案,以前用ashx,一般处理程序(HttpHandler),现在可以用webapi 微软的web api是在vs2012上的mvc4 ...

随机推荐

  1. 使用亚马逊的Route53服务

    自从自己的博客从github迁移到AWS以上,再也不用担心Github被墙了.再加上CloudFront的CDN功能,那访问速度真是杠杆的,无论是在中国内陆,还是澳洲海边,秒开无压力. 但是这几天突然 ...

  2. Java关于流知识总结

    流总结: 一.流的分类: 数据单位:字节流  字符流 方向:  输出流 输入流 角色:  节点流 套节流 字节流:以Stream结尾. 字符流:以Reader 和Writer 结尾. 输入流:所有带有 ...

  3. EF架构~在Linq to Entity中使用日期函數

    回到目录 眾所周知,在linq to entity的查询语句中,不允许出现ef不能识别的关键字,如Trim,Substring,TotalDays等.net里的关键字,在EF查询里都是不被支持的,它的 ...

  4. jQuery插件开发的五种形态[转]

    这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细. 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队 ...

  5. BugHD for JavaScript上线，轻松收集前端 Error

    从收集 APP 崩溃信息到全面收集网站出现的 Error,现在的 BugHD 变得更加强大.目前,BugHD JS Error 收集功能 已正式上线,前端 er 们不用再面对一堆 Bug 无处下手. ...

  6. python学习 变量的操作 与 基本数据类型

    一变量(本文使用python3.5): #变量:是计算机内存中的一块区域,变量可以存储规定范围内的值,变量可以改变#在python中变量是计算机内存中数据的引用 python的变量没有明显的类型,具体 ...

  7. NPM安装之后CMD中不能使用

    NPM安装之后CMD中不能使用 这个情况就是path环境变量没有添加NPM 添加环境变量并重启CMD C:\Users\Mark\AppData\Roaming\npm\ 看看这个文件夹就知道为什么要 ...

  8. [java]输入一个算术表达式输出结果

    动手有益. 输入一个表达式,没有括号,数字小于0-9之间,输出计算结果,所有的中间结果化为整形.例如:  输入:3+8×2/9-2  输出:2 /** * input a calculate stri ...

  9. Linux (Ubuntu12.04) 下开发工具安装和使用

    Linux (Ubuntu12.04) 下开发工具安装和使用 这里讲述的是关于在ubuntu12.04下面安装和使用各种IDE 开发环境和初步使用的知识.说一下背景:很多的开发基本都是在linux操作 ...

  10. AngularJS快速入门01-基础

    记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多.我们询问他面试情况时,他给 ...