【C#】CRUD操作WEB API 服務

- 5月 24, 2024

延續先前Blog︰【C#】MVC WEB API 語法架構，介紹的範例實作呼叫WebApi進行非同步新增、讀取、修改、刪除。

在Controllers加入控制器"MVC 5 控制器 - 空白"之MVC控制器。

部分MVC控制器之程式碼（Home8Controller.cs僅供參考）︰
public class Home8Controller : Controller
{
// GET: Home8
public ActionResult Index2()
{
return View();
}
}

部分View之程式碼（Index2.cshtml僅供參考）︰

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


@{
ViewBag.Title = "呼叫WebApi進行非同步新增、修改、刪除";
}
<script>
$(document).ready(function () {
var apiurl = "http://localhost:49580/api/Customer"; //呼叫web api
$("#btnCreate").on("click", fnCreate); //按下新增按鈕，呼叫fnCreate函式
$("#btnEdit").on("click", fnEdit); //按下編輯按鈕，呼叫fnEdit函式
$("#btnDelete").on("click", fnDelete); //按下刪除按鈕，呼叫fnDelete函式
fnLoadData(); //資料載入，呼叫fnLoadData函式

//資料載入
function fnLoadData() {
$.ajax({
url: apiurl,
type: "GET",
success: function (data) {
$("#tableshow").empty();
//alert(data.length);
for (var i = 0; i < data.length; i++) {
$("#tableshow").append
(
"<tr>" +
"<td>" + data[i].fId + "</td>" +
"<td>" + data[i].fName + "</td>" +
"<td>" + data[i].fPhone + "</td>" +
"<td>" + data[i].fEmail + "</td>" +
"<td>" + data[i].fAddress + "</td>" +
"<td><input type='button' value='選取' id='btnSelect" + i + "' class='btn btn-info' /></td>" +
"</tr>"
);

//按下選取按鈕，呼叫fnSelectData函式，並傳入參數fid
$("#btnSelect" + i).on("click", { fid: data[i].fId }, fnSelectData);
}
$("#fid").val("");
$("#fname").val("");
$("#fphone").val("");
$("#femail").val("");
$("#faddress").val("");
}
});
}

//選擇指定資料，並顯示在表單欄位內
function fnSelectData(event) {
var fid = event.data.fid;
$.ajax({
url: apiurl + "?fid=" + encodeURI(fid),
type: 'GET',
success: function (data) {
$("#fid").val(data.fId);
$("#fname").val(data.fName);
$("#fphone").val(data.fPhone);
$("#femail").val(data.fEmail);
$("#faddress").val(data.fAddress);
}
});
}

//新增一筆資料
function fnCreate() {
var r = confirm("確定要新增嗎?");
if (r == true) {
var fname, fphone, femail, faddress;
fname = $("#fname").val();
fphone = $("#fphone").val();
femail = $("#femail").val();
faddress = $("#faddress").val();
var data = "?fname=" + fname + "&fphone=" + fphone + "&femail=" + femail + "&faddress=" + faddress;
$.ajax({
url: apiurl + encodeURI(data),
type: 'POST',
success: function (result) {
if (result != 0) {
alert("新增成功");
fnLoadData();
} else {
alert("新增失敗");
}
}
});
}
}

//編輯一筆資料
function fnEdit() {
var r = confirm("確定要修改嗎?");
if (r == true) {
var fid, fname, fphone, femail, faddress;
fid = $("#fid").val();
fname = $("#fname").val();
fphone = $("#fphone").val();
femail = $("#femail").val();
faddress = $("#faddress").val();
var data = "?fid=" + fid + "&fname=" + fname + "&fphone=" + fphone + "&femail=" + femail + "&faddress=" + faddress;
$.ajax({
url: apiurl + encodeURI(data),
type: 'PUT',
success: function (result) {
if (result != 0) {
alert("修改成功");
fnLoadData();
} else {
alert("修改失敗");
}
}
});
}
}

//刪除一筆資料
function fnDelete() {
var r = confirm("確定要刪除嗎?");
if (r == true) {
var fid = $("#fid").val();
$.ajax({
url: apiurl + "?fid=" + encodeURI(fid),
type: 'DELETE',
success: function (result) {
if (result != 0) {
alert("刪除成功");
fnLoadData();
} else {
alert("刪除失敗");
}
}
});
}
}

});
</script>

<h2>呼叫WebApi進行非同步新增、修改、刪除</h2>
<div class="panel panel-primary">
<div class="panel-heading">客戶管理</div>
<div class="panel-body">
<div class="form-group">
<label for="fname">編號</label>
<input type="text" class="form-control" id="fid" readonly>
</div>
<div class="form-group">
<label for="fname">姓名</label>
<input type="text" class="form-control" id="fname" required>
</div>
<div class="form-group">
<label for="fphone">電話</label>
<input type="text" class="form-control" id="fphone" required>
</div>
<div class="form-group">
<label for="femail">信箱</label>
<input type="email" class="form-control" id="femail" required>
</div>
<div class="form-group">
<label for="faddress">地址</label>
<input type="text" class="form-control" id="faddress" required>
</div>
<input type="button" value="新增" id="btnCreate" class="btn btn-primary" />
<input type="button" value="修改" id="btnEdit" class="btn btn-success" />
<input type="button" value="刪除" id="btnDelete" class="btn btn-danger" />
</div>
</div>
<table class="table" id="tableshow">
<tr>
<th>編號</th>
<th>姓名</th>
<th>電話</th>
<th>信箱</th>
<th>地址</th>
<th></th>
</tr>
</table>

執行畫面-列表（參考）︰