MVC4 WEBAPI(一)使用概述
所谓概述,也就是总结一些WEB API常用的使用用法。MVC APIWEB是一个轻量级的服务接口,完全符合RestFul框架设计,每个URL代表一种资源,使用方便,没有WCF那么庞大,但是麻雀虽小五脏俱全,WEBAPI提供的内容很值得研究;API请求方式有GET、POST、PUT、DELETE。所以WEBAPI对应的APIControl提供的接口也分为以上4个类型。
1、WEBAPI创建:
使用的时候也很简单,利用VS2013新建项目,选择MVC4,让后选择WEBAPI,创建完成,这就是默认的MVC WEBAPI项目;
2、WEBAPI分析:
WEB API默认的路由是:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
这个是默认提供的路由,通过路由,我们不难发现通过Control下的id进行匹配查找,所以接下的代码也是根据ID进行处理;由于服务请求的方式GET、POST、DELETE、PUT,所以每个APIControl也就提供这4中类型,针对这个轻量级框架,这4中方式处理好,一个APIControl应对自己的逻辑也就足够了。
代码展示:
public class ProductController : ApiController
{
static List<Product> products =new List<Product> () {
new Product{Id=,Name="Nokia Lumia 1520",Category="移动电话",Price=},
new Product{Id=,Name="Lenovo Thinkpad T430S",Category="便携式计算机",Price=},
new Product{Id=,Name="锤子手机",Category="移动电话",Price=},
new Product{Id=,Name="Wii",Category="电视游戏机",Price=},
new Product{Id=,Name="Xbox 360",Category="电视游戏机",Price=}
};
/// <summary>
/// Get
/// </summary>
/// <returns></returns>
public IEnumerable<Product> GetAllProducts()
{
return products.OrderBy(p => p.Id);
} /// <summary>
/// Get
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public Product GetProductById(int id)
{
Product product = products.FirstOrDefault(p => p.Id == id);
if (product==null)
{
var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
throw new HttpResponseException(resp);
}
return product;
} /// <summary>
/// Get
/// </summary>
/// <param name="productName"></param>
/// <returns></returns>
public Product GetProductByName(string productName,string category)
{
Product product = products.FirstOrDefault(p => p.Name.Contains(productName) && p.Category == category);
if (product == null)
{
var resp = new HttpResponseMessage(HttpStatusCode.NotFound);
throw new HttpResponseException(resp);
}
return product;
}
public IEnumerable<Product> GetAllProductsByCategory(string category)
{
if (category.Equals("--请选择--"))
{
return products;
}
IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase));
return productList.OrderBy(p => p.Id);
} public bool PostProduct(Product product)
{
int index = products.FindIndex(p => p.Name == product.Name);
if (index != -)
{
return false;
}
product.Id = products.Max(p => p.Id) + ;
products.Add(product);
return true;
} //public IEnumerable<Product> PostProductByCategory(string Category)
//{
// //if (currpate.Category.Equals("--请选择--"))
// //{
// // return products;
// //}
// //IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, currpate.Category, StringComparison.OrdinalIgnoreCase));
// return products;// productList.OrderBy(p => p.Id);
//} //public IEnumerable<Product> PostProductByCategory22([FromBody] JObject currpate)
//{
// dynamic json = currpate;
// JObject curtxt = json.prodcut;
// //if (currpate.Category.Equals("--请选择--"))
// //{
// // return products;
// //}
// //IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, currpate.Category, StringComparison.OrdinalIgnoreCase));
// return products;// productList.OrderBy(p => p.Id);
//} public bool PutProduct(int id, [FromBody]Product product)
{
int index = products.FindIndex(p => p.Id == id);
if (index == -)
{
return false;
}
products.RemoveAt(index);
products.Add(product);
return true;
} /// <summary>
/// DELETE
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public bool DeleteProduct(int id)
{
Product product = products.FirstOrDefault(p => p.Id == id);
if (product == null)
{
return false;
}
else
{
products.Remove(product);
return true;
}
} }
}
代码分析:
以上就是一个简单的ControlAPI,通过代码分析,一个APIControl也就包含4中请求方式,准对GET方式请求,我们就要仔细区分ID参数进行逻辑判断。
看看客户端JS请求的方式:
<script type="text/javascript">
$(function () {
$InitData();
$bindClick();
});
$InitData = function () {
$.getJSON("../api/Product", function (data) {
if (data != null)
{
if ($("#resultList").length > ) {
$("#resultList").remove();
}
var html = "<ol id='resultList' class='round'>";
$.each(data, function (key, value) { html += "<li class='one'><h5>" + value.Name + "</h5>类型:" + value.Category
+ " 价格:" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>";
});
html += "</ol>";
$("#result").append(html);
}
});
}
$bindClick = function () {
// 01.按产品类型搜索产品
$("#productTypes").bind("change", function () {
//$.getJSON("../api/Product", { category: $(this).find("option:selected").text() }, function (data) {
// if (data != null) {
// $("#resultList").remove();
// var html = "<ol id='resultList' class='round'>";
// $.each(data, function (key, value) {
// html += "<li class='one'><h5>" + value.Name + "</h5>类型:" + value.Category
// + " 价格:" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>";
// });
// html += "</ol>";
// $("#result").append(html);
// }
//});
var prodcut = {
Category: "移动电话",
Price:,
Id:
};
var prodcut2 = {
Category: "移动电话2",
Price: ,
Id:
};
//$.ajax({
// type: "POST",
// url: "../api/Product/PostProductByCategory",
// data: JSON.stringify({ prot: prodcut }),
// contentType: "application/json",
// dataType:"xml",
// success: function (data) {
// console.log(data);
// if (data != null) {
// $("#resultList").remove();
// var html = "<ol id='resultList' class='round'>";
// $.each(data, function (key, value) {
// html += "<li class='one'><h5>" + value.Name + "</h5>类型:" + value.Category
// + " 价格:" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>";
// });
// html += "</ol>";
// $("#result").append(html);
// }
// }
//}); $.ajax({
type: "POST",
url: "../api/Product",
data: { Category: $("#editProductType").find("option:selected").text()}, success: function (data) {
console.log(data);
if (data != null) {
$("#resultList").remove();
var html = "<ol id='resultList' class='round'>";
$.each(data, function (key, value) {
html += "<li class='one'><h5>" + value.Name + "</h5>类型:" + value.Category
+ " 价格:" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>";
});
html += "</ol>";
$("#result").append(html);
}
}
}); });
// 02.按产品名搜索产品
$("#btnSearchByName").bind("click", function () {
var searchName = $("#productName").val();
if (searchName == "") {
showMsg("提示", "您还没有输入要搜索的产品名称");
}
$.getJSON("../api/Product", { productName: searchName, category: '电视游戏机' }, function (data) {
if (data != null) {
$("#resultList").remove();
var html = "<ol id='resultList' class='round'>";
html += "<li class='one'><h5>" + data.Name + "</h5>类型:" + data.Category
+ " 价格:" + data.Price + " | <a href='#' onclick='editProduct(" + data.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + data.Id + ")'>删除</a></li>";
html += "</ol>";
$("#result").append(html);
clearText();
}
});
});
// 03.搜索全部产品信息
$("#btnSearchAll").bind("click", $InitData);
// 04.新增一个产品信息
$("#btnPostProduct").bind("click", function () {
var productName = $("#newProductName").val();
var productCategory = $("#newProductType").find("option:selected").text();
var productPrice = $("#newProductPrice").val(); if (productName == "") {
showMsg("提示", "请输入产品名称");
}
else if (productCategory == "" || productCategory == "--请选择--") {
showMsg("提示", "请选择产品类型");
}
else if (productPrice == "") {
showMsg("提示", "请输入产品价格");
}
else if (isNaN(productPrice)) {
showMsg("提示", "产品价格请输入数字类型");
}
else {
$.post("../api/Product", {
Name: productName,
Category: productCategory,
Price: productPrice
}, function (data) {
if (data != null && data == true) {
$InitData();
clearText();
showMsg("提示", "添加新产品操作成功");
}
else {
showMsg("提示", "添加新产品操作失败");
}
});
}
});
// 07.修改一个产品信息
$("#btnPutProduct").bind("click", function () {
var productId = $("#hiddProductId").val();
$.ajax({
type: "PUT",
url: "../api/Product/" + productId,
data: {
Id: productId,
Name: $("#editProductName").val(),
Category: $("#editProductType").find("option:selected").text(),
Price: $("#editProductPrice").val()
},
success: function (data) {
if (data == true) {
$InitData();
$("#myEditModal").window("close");
showMsg("提示", "您已成功修改那玩意");
}
else {
showMsg("提示", "修改那玩意操作失败");
}
}
});
});
// 关闭模态对话框
$("#btnCloseModal").bind("click", function () {
$("#myEditModal").window("close");
});
}
// 05.编辑一个产品信息
function editProduct(productId) {
$.getJSON("../api/Product", { id: productId }, function (data) {
if (data != null) {
$("#hiddProductId").val(data.Id);
$("#editProductName").val(data.Name);
switch (data.Category) {
case "移动电话":
$("#editProductType").val("");
break;
case "便携式计算机":
$("#editProductType").val("");
break;
case "电视游戏机":
$("#editProductType").val("");
break;
}
$("#editProductPrice").val(data.Price);
}
});
$("#myEditModal").show();
$("#myEditModal").window({
title: "编辑产品信息",
modal: true,
collapsible: true,
minimizable: false,
maximizable: false,
resizable: false,
width: ,
height:
});
}
// 06.删除一个产品信息
function deleteProduct(productId) {
$.messager.confirm("提示", "您确定要删除这玩意?", function (r) {
if (r) {
$.ajax({
type: "DELETE",
url: "../api/Product/" + productId,
data: {},
success: function (data) {
if (data == true) {
$InitData();
showMsg("提示", "您已成功删除那玩意");
}
else {
showMsg("提示", "删除那玩意操作失败");
}
}
});
}
});
} function showMsg(title, msg) {
$.messager.alert(title, msg, "info");
} function clearText() {
$("input[type=text]").val("");
} </script>
JS也就是采用数据请求的方式,Ajax请求完成数据操作。
3、WEB API路由扩展:
在MVC中,大家看到的更多的路由模式是含有Action,可是WEBAPI就没有了,当然如果想使用自定义路由模式展现Action也是可行的,注册自定义路由
public static void Register(HttpConfiguration config)
{
//自定义路由
config.Routes.MapHttpRoute(
name: "DefaultSprtApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
); config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
); // 取消注释下面的代码行可对具有 IQueryable 或 IQueryable<T> 返回类型的操作启用查询支持。
// 若要避免处理意外查询或恶意查询,请使用 QueryableAttribute 上的验证设置来验证传入查询。
// 有关详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=279712。
//config.EnableQuerySupport(); // 若要在应用程序中禁用跟踪,请注释掉或删除以下代码行
// 有关详细信息,请参阅: http://www.asp.net/web-api
config.EnableSystemDiagnosticsTracing();
}
这这个里面,我们就把Action 加载里面了,有了这个Action,那么我们的APIControl又该怎么操作,才能获取我们想要的数据。不着急,这就展示APIControl代码
public IEnumerable<Product> PostProductByCategory22([FromBody] JObject currpate)
{
dynamic json = currpate;
JObject curtxt = json.prodcut;
//if (currpate.Category.Equals("--请选择--"))
//{
// return products;
//}
//IEnumerable<Product> productList = products.Where(p => string.Equals(p.Category, currpate.Category, StringComparison.OrdinalIgnoreCase));
return products;// productList.OrderBy(p => p.Id);
}
代码参数中多了一个FromBody,FromBody有什么功能那?查询CSDN发现,FromBody能够强制APIControl通过客户端或者Body读取参数,所以看看JS代码:
var prodcut = {
Category: "移动电话",
Price:,
Id:
};
var prodcut2 = {
Category: "移动电话2",
Price: ,
Id:
};
$.ajax({
type: "POST",
url: "../api/Product/PostProductByCategory",
data: JSON.stringify({ prot: prodcut }),
contentType: "application/json",
dataType:"xml",
success: function (data) {
console.log(data);
if (data != null) {
$("#resultList").remove();
var html = "<ol id='resultList' class='round'>";
$.each(data, function (key, value) {
html += "<li class='one'><h5>" + value.Name + "</h5>类型:" + value.Category
+ " 价格:" + value.Price + " | <a href='#' onclick='editProduct(" + value.Id + ")'>编辑</a><a href='#' onclick='deleteProduct(" + value.Id + ")'>删除</a></li>";
});
html += "</ol>";
$("#result").append(html);
}
}
});
使用这个地方这种方式,客户端需要注意事项:
1、需要设置请求content-Type。这里设置为contentType: "application/json";
2、发送的数据格式JSon.
服务端ControlAPI也需要注意,这个只能设置一个类型为FromBody参数,所以逻辑一定要封装好。
参考文章:
http://blog.jobbole.com/85008/
http://www.cnblogs.com/wk1234/archive/2012/04/28/2468491.html
MVC:
http://www.cnblogs.com/babycool/p/3922738.html
MVC4 WEBAPI(一)使用概述的更多相关文章
- CentOS Mono Nginx 部署 MVC4+WebApi
CentOS Mono Nginx 部署 MVC4+WebApi 经过几天的折磨,终于在CentOS上成功部署了MVC4+WebApi.Mono上的服务器推荐两种:Jexus(国产高人写的一款很牛的服 ...
- 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(四)授权代码维护
一.前言 权限系统设计中,授权代码是用来控制数据访问权限的.授权代码说白了只是一树型结构的数据,没有什么其它的业务意义.那么这个页面的功能也就非常简单授权代码维护:新增.修改.删除授权代码数据. 二. ...
- 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(三)图形化机构树
一.前言 组织机构是国内管理系统中很重要的一个概念,以前我们基本都是采用数据列表的形式展现,最多只是采用树形列表展现.虽然够用,但是如果能做成图形化当然是最好不过了.这里我不用任何图形控件,就用最原始 ...
- 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航
一.前言 上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始. 二.实现 这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护 ...
- mvc4 web-api 与unity搭建接口
对于接口重要的应该是 功能实现,合法性验证,性能监控,日志等模块 通过unity aop功能可以实现统一的日志模块和性能监控. 1.新建mvc4 webapi项目 nuget添加 unity 3.0+ ...
- IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)[转]
IOS5开发-http get/post调用mvc4 webapi互操作(图片上传) 目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservi ...
- MVC4 + WebAPI + EasyUI + Knockout-授权代码维护
我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(四)授权代码维护 一.前言 权限系统设计中,授权代码是用来控制数据访问权限的.授权代码说白了只是一树型结构的数据 ...
- 权限系统设计实现MVC4 + WebAPI + EasyUI + Knouckout
权限系统设计实现MVC4 + WebAPI + EasyUI + Knouckout (一) 一.前言 之前的博客一直都还没写到框架的实现及权限系统,今天开始写我的权限系统,我以前做过的项目基本上都有 ...
- MVC4 WebAPI中如何返回一张图片
public HttpResponseMessage Get(string imageName, int width, int height) { Image img = GetImage(image ...
随机推荐
- spring mvc 传参数
1.页面:(1)js传参数:location.href="${ctx }/forum/changeCtm.html?ctmId="+id; (2)将内容写在form表单里面,然后用 ...
- 2016年10月16日--ArrayList集合、特殊集合
ArrayList集合 使用前引用 using System.Collections; ArrayList集合 实例化.初始化 ArrayList al = new ArrayList(); Arra ...
- MS DOS 命令大全
刚好看到留下来以备用: 一)MD——建立子目录命令 1.功能:创建新的子目录 2.类型:内部命令 3.格式:MD[盘符:][路径名]〈子目录名〉 4.使用说明: (1)“盘符”:指定要建立子目录的磁盘 ...
- 二分图水一波~~~~d带你飞
Current Time: 2016-03-11 17:45:36 Contest Type: Public Start Time: 2016-03-04 13:00:00 Contest Statu ...
- 9.4---集合子集(CC150)
这题非常复杂.牛客网上对应的题目对结果要求比较苛刻,所以要调整. 整体思路是:先放进去一个,然后第二个来的时候插入到已有的,并且把自己也放进去. public static ArrayList< ...
- sql server2008 获取动态sql的变量值
--通过SQL 字符串 查询 获取查出的值sp_executesql declare @QuerySql nvarchar(500),@uid int,@Ucode varchar(100);set ...
- PHPCMS V9教程之快速入门
这篇文章要为大家来介绍PHPCMS V9这个系统的一些基本知识,PHPCMS是基于面向对象的,严格的安装MVC开发模式开发的CMS系统,同时他还是一个非 常不错的PHP框架.下面我们一起看一下PHPC ...
- 网页的title左边的小图片怎么添加
首先,代码中的title标签里是不能加图片的.但是浏览器标提栏前面是可以加一个小图标的. 解决方案:第一步,做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透 ...
- Read N Characters Given Read4 I & II
The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...
- Nodejs 及 NPM 的安装
Nodejs 及 NPM 的安装,有两种方式: 方式1.Nodejs 及 NPM 一起安装 https://nodejs.org/en/download/ 下载 Windows Installe ...