先理解一下WebAPI的概念，官方给的很详细：
什么是Web API？
在我们了解什么是Web API之前，让我们看看什么是API（应用程序编程接口）。
根据维基百科的API定义：在计算机编程中，应用程序编程接口（API）是一组用于构建软件和应用程序的子例程定义，协议和工具。
简单来说，API是某种接口，它具有一组允许程序员访问应用程序，操作系统或其他服务的特定功能或数据的功能。
Web API顾名思义，是一个可以使用HTTP协议访问的Web上的API。这是一个概念，而不是一种技术。我们可以使用不同的技术（如Java，.NET等）构建Web API。
ASP.NET Web API
ASP.NET Web API是一个可扩展的框架，用于构建基于HTTP的服务，可以在不同的平台上访问，例如Web，Windows，移动等。它的工作方式与ASP.NET MVC Web应用程序的工作方式大致相同，除了它将数据作为响应而不是html视图发送。它就像一个Web服务或WCF服务，但例外是它只支持HTTP协议
从这张图可以看出，不同的客户端都可以访问这个接口，应该就是所谓的跨平台吧，只负责出数据，移动端，微信端，PC端，等等 都可以访问，再简单理解就是webpi就是一个出数据的接口，找到对应的接口，拿到对应的数据！
下边对webapi简单操作，在官方看过以后总结一下，调用webapi 实现对数据表的增删改查（暂时不用前端框架，所以拿到数据后用js动态拼出表格）
HTML代码：
<h2>WebApi增删改查</h2>
<h3>添加</h3>
<form action="javascript:void(0);" method="POST" onsubmit="addItem()">
<input type="text" id="add-name" placeholder="New to-do">
<input type="submit" value="Add">
</form>
<div id="spoiler">
<h3>修改</h3>
<form class="my-form">
<input type="hidden" id="edit-id">
<input type="text" id="edit-name">
<input type="submit" value="Save">
<a onclick="closeInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Name</th>
<th>修改</th>
<th>删除</th>
</tr>
<tbody id="todos"></tbody>
</table>
官方CSS样式：
<style>
input[type=‘submit‘], button, [aria-label] {
cursor: pointer;
}
#spoiler {
display: none;
}
table {
font-family: Arial, sans-serif;
border: 1px solid;
border-collapse: collapse;
}
th {
background-color: #0066CC;
color: white;
}
td {
border: 1px solid;
padding: 5px;
}
</style>
JavaScript代码:
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script>
const uri = "/api/values"; //定义全局接口路径
let todos = null; //定义全局变量，存放查出所有数据，在修改时候循环遍历，与传的主键进行比对
function getCount(data) { //数据条数 data.length
const el = $("#counter");
let name = "to-do";
if (data) {
if (data > 1) {
name = "to-dos";
}
el.text(data + " " + name);
} else {
el.text("No " + name);
}
}
$(document).ready(function () {
//页面就绪加载，调用查询数据方法
getData();
//修改提交事件
$(".my-form").on("submit", function () {
//获取新输入的内容，和修改数据的主键
const item = {
MName: $("#edit-name").val(),
Mid: $("#edit-id").val()
};
$.ajax({
url: uri + "/" + $("#edit-id").val(),
type: "PUT",
accepts: "application/json",
contentType: "application/json",
data: JSON.stringify(item),
//修改成功，刷新页面
success: function (result) {
getData();
}
});
//关闭修改模块
closeInput();
return false;
});
});
//数据的查询
function getData() {
$.ajax({
type: "GET",
url: uri,
cache: false,
success: function (data) {
const tBody = $("#todos");//通过主键，获得tBody，将查询的数据拼进来
$(tBody).empty();
getCount(data.length);//数据总数
//循环遍历数据，动态拼出表格，并将数据显示在表格，最后边为操作，分别是修改和删除
$.each(data, function (key, item) {
const tr = $("<tr></tr>")
.append($("<td></td>").text(item.MName))//MName 为数据库中表字段，电影名称
.append(
$("<td></td>").append(
$("<button>Edit</button>").on("click", function () { //拼出button 修改
editItem(item.Mid); //调用修改方法，并将主键传入
})
)
)
.append(
$("<td></td>").append(
$("<button>Delete</button>").on("click", function () { //拼出button 删除
deleteItem(item.Mid); //调用删除方法，并将主键传入
})
)
);
tr.appendTo(tBody);//appendTo拼接
});
todos = data;//将查询的数据
}
});
}
//数据的添加
function addItem() {
//获取输入的内容
const item = {
MName: $("#add-name").val()
};
$.ajax({
type: "POST",
accepts: "application/json",
url: uri,
contentType: "application/json",
data: JSON.stringify(item),
error: function (jqXHR, textStatus, errorThrown) {
alert("Something went wrong!");
},
//添加成功，刷新页面，清空文本框的值
success: function (result) {
getData();
$("#add-name").val("");
}
});
}
//数据的删除 id为数据的主键，删除完成刷新页面
function deleteItem(id) {
$.ajax({
url: uri + "/" + id,
type: "DELETE",
success: function (result) {
getData();
}
});
}
//数据的修改 id为数据的主键
function editItem(id) {
//循环上边查询的所有数据，进行比对，成功将需修改的数据显示在文本框内
$.each(todos, function (key, item) {
if (item.Mid === id) {
$("#edit-name").val(item.MName);
$("#edit-id").val(item.Mid);
}
});
//显示修改模块，修改完成后将关闭
$("#spoiler").css({ display: "block" });
}
//关闭修改模块，什么时候修改数据，将显示，修改完成后将关闭
function closeInput() {
$("#spoiler").css({ display: "none" });
}
</script>
Controllers代码：
public class ValuesController : ApiController
{
DB_MoviesEntities db = new DB_MoviesEntities();
// GET api/values
/// <summary>
/// 查询数据
/// </summary>
/// <returns></returns>
public IEnumerable<MoviesInfomation> Get()
{
var list = db.MoviesInfomation;
return list;
}
// POST api/values
/// <summary>
/// 添加数据
/// </summary>
/// <param name="value">需添加的值</param>
public void Post(MoviesInfomation value)
{
db.MoviesInfomation.Add(value);
db.SaveChanges();
}
// PUT api/values/5
/// <summary>
/// 修改数据
/// </summary>
/// <param name="id">修改数据的主键</param>
/// <param name="value">新数据</param>
public void Put(int id, MoviesInfomation value)
{
MoviesInfomation model = db.MoviesInfomation.Find(id);
if (model != null)
{
model.MName = value.MName; ;
db.Entry<MoviesInfomation>(model).State = System.Data.Entity.EntityState.Modified;
db.SaveChanges();
}
}
// DELETE api/values/5
/// <summary>
/// 删除数据
/// </summary>
/// <param name="id">需删除数据的主键</param>
public void Delete(int id)
{
MoviesInfomation model = db.MoviesInfomation.Find(id);
if (model != null)
{
db.MoviesInfomation.Remove(model);
db.SaveChanges();
}
}
}
代码很简单，到这就结束了，另外，数据的传输默认的好像是xml 如果想改json 可以在Global.asax添加：
GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();就可以了！
原文地址：https://www.cnblogs.com/dcy521/p/10902185.html
时间： 2024-10-12 21:30:18