webapi初學項目(增刪改查)
初學wenapi作了一個從數據庫增刪改查的項目css
webapi：html
1.建立項目：visual C# —> ASP.NET MVC 4 web應用程序 模板—>web api;前端
2.註冊路由:jquery
路由表中的每個條目都包含一個路由模板。這個Web API默認的路由模版是"api/{controller}/{id}"。在這個模版中，「api」是一個文字式路徑片斷，而{controller}和{id}則是佔位符變量。web
當Web API框架接收一個HTTP請求時，它會試圖根據路由表中的一個路由模板來匹配其URI。若是無路由匹配，客戶端會接收到一個404（未找到）錯誤。ajax
3.linq to sql鏈接數據庫sql
1.創建數據庫建表數據庫
2.在models文件夾裏面新建linq to sql類文件bootstrap
3.工具->鏈接到數據庫api
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">×</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纔剛剛接觸，這是個人第一篇文章，後面我還會將我學習的東西分享給你們，若是有什麼地方作的很差的也歡迎你們給予指正！
- 1. webapi初學項目(增刪改查)，webapi增刪
- 2. Asp.net WebApi 項目示例（增刪改查）
- 3. ASP.NET WebAPI 項目示例（增刪改查）
- 4. WebApi增刪改查Demo
- 5. 基於Angular+WebAPI+OData的增刪改查
- 6. webApi實現增刪改查操做
- 7. JAVA項目之增刪改查
- 8. 項目的增刪改查demo
- 9. MVC項目的增刪查改
- 10. SSM簡易項目（增刪改查）
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • Mozilla 項目 - 瀏覽器信息
- • 適用於PHP初學者的學習線路和建議
- • 算法總結-二分查找法
-
每一个你不满意的现在，都有一个你没有努力的曾经。