最近在尝试本地进行webapi调用的过程中，遇到一系列的问题，demo很小但着实让人头疼，先附上demo.
前台页面，目的是展示新闻的分类：
类别模型如下：
控制器代码如下：
public ActionResult Category() { List<MODELS.Type> type = bll.GetNewsType(); ViewData["type"] = type; return View(); }
页面代码如下：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Category</title> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <link href="~/Content/mydiy.css" rel="stylesheet" /> </head> <body> <div class="wind"> <div> <a href="javascript:;" id="add" class="btn btn-default">新增分类</a> </div> <table class="table"> <th>类名</th> <th>该类目下新闻条数</th> <th>操作</th> @foreach (var type in (List<MODELS.Type>)ViewData["type"]) { <tr> <td>@type.TypeName</td> <td>@type.News.Count()</td> <td> <div class="tpl-table-black-operation"> <a class="tpl-table-black-operation-del" onclick="del('@type.Id','@type.News.Count()')"> <i class="am-icon-trash"></i>删除 </a> </div> </td> </tr> } </table> <!--点击新增的弹出层--> <div id="cslj"> <div class="qhcq"> <div class="tcc" id="gbaaa"><img src="~/images/closeBlack.jpg" /></div> <div id="nei"> <p>输入新增分类名：</p> <input type="text" id="catename" /> <input type="button" id="addbtn" value="确定" /> </div> </div> </div> </div> <script src="~/Scripts/jquery-1.7.1.js"></script> <script> //显示弹出框 $("#add").click(function () { $("#cslj").show(); }); /*关闭弹出框*/ $("#gbaaa").click(function () { if ($("#cslj").css("display") == "block") { $("#cslj").hide(); } }); </script> <script> //删除 function del(id, count) { if (confirm("是否删除该条新闻？")) { if (count == 0) { // alert(count); $.ajax({ type: "get", url: "http://localhost:51064/api/Category/deleteCate", data: { "id": id }, success: function (data) { if (data == "OK") { alert("删除成功"); location.reload(); } else alert("删除失败"); } }) } else { alert("该分类下面有含有新闻，不允许删除"); return false; } } } //新增 $("#addbtn").click(function () { // alert("新增成功"); var name = $("#catename").val().trim(); // alert(name); $.ajax({ type: "get", url: "http://localhost:51064/api/Category/addCate", data: { "name": name }, success: function (data) { if (data == "exist") { alert("对不起，分类已存在"); $("#cslj").hide(); window.location.reload(); } else if (data == "OK") { alert("添加分类成功"); $("#cslj").hide(); window.location.reload(); } else { alert("添加失败"); $("#cslj").hide(); window.location.reload(); } } }) }) </script> </body> </html>
页面呈现的效果如下：
现在做的尝试是，利用webapi 的方式实现该页面上的新增和删除功能（有一点为了webapi而这样做的意味，而后的一些问题也着实让人感觉多此一举，此处就当是做一个了解）。在解决方案上新建一个web应用程序，
此处我选择的是空模板，下面勾选 webapi（这里最开始我直接选择的是webapi模板而非空，结果出现了 找到了与该请求匹配的多个操作 ，多方搜集解决办法仍然无济于事（修改路由仍然无效），最后重新做了webapi项目的新建，即空模板此类的选择才最终没有出现这个问题。)
webapi中新建控制器 Category ：
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace webapi.Controllers { public class CategoryController : ApiController { BLL.BCategory bll = new BLL.BCategory(); /// <summary> /// 得到所有的新闻分类 /// </summary> /// <returns></returns> public IEnumerable<MODELS.Type> GetAll() { return bll.GetTypes(); } /// <summary> /// 删除新闻分类 /// </summary> /// <param name="id"></param> /// <returns></returns> [HttpGet] public string deleteCate(int id) { if (bll.deleteCate(id)) { return "OK"; } else { return "NO"; } } /// <summary> /// 新增新闻分类 /// </summary> /// <param name="name"></param> /// <returns></returns> [HttpGet] public string addCate(string name) //此处没有使用[frombody] { if (bll.checkIsExist(name)) { MODELS.Type type = new MODELS.Type { News = null, //由于类型模型与新闻模型有关联，所以需要指定新闻的所属 TypeName = name }; if (bll.addCate(type)) { return "OK"; } else { return "No"; } } else { return "exist"; } } } }
至此，搭建出来一个大致的模型，开始做自己的尝试的时候，出现了诸多的问题，在此做了部分个人觉得棘手的问题的记录：
（1）webapi调试的时候无法找到对应的请求（找到了与该请求匹配的多个操作”）
（2）webapi 指定的架构无效
（3）AJAX调用时候无法跨域
其中第一个问题：得以从修改路由上解决：
在 App_start文件夹下面的webapiConfig文件里面修改，
添加 action ，在使用AJAX调用的使用按照路由的格式进行URL的填写，
ajax 代码如下：
//删除 function del(id, count) { if (confirm("是否删除该条新闻？")) { if (count == 0) { // alert(count); $.ajax({ type: "get", url: "http://localhost:51064/api/Category/deleteCate", data: { "id": id }, success: function (data) { if (data == "OK") { alert("删除成功"); location.reload(); } else alert("删除失败"); } }) } else { alert("该分类下面有含有新闻，不允许删除"); return false; } } } //新增 $("#addbtn").click(function () { // alert("新增成功"); var name = $("#catename").val().trim(); // alert(name); $.ajax({ type: "get", url: "http://localhost:51064/api/Category/addCate", data: { "name": name }, success: function (data) { if (data == "exist") { alert("对不起，分类已存在"); $("#cslj").hide(); window.location.reload(); } else if (data == "OK") { alert("添加分类成功"); $("#cslj").hide(); window.location.reload(); } else { alert("添加失败"); $("#cslj").hide(); window.location.reload(); } } }) })
第二个问题，指定架构无效，在此这个问题犹如MVC中的类似此问题的解决方式一样，NuGet 包 添加引用 EntityFramework.dll ，然后webconfig 中添加连接字符串，该问题得以解决。
<connectionStrings>
<add name="Model1Container" connectionString="metadata=res://*/Model1.csdl|res://*/Model1.ssdl|res://*/Model1.msl;provider=System.Data.SqlClient;provider connection string="data source=.;initial catalog=GraduationProject;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
第三个问题，AJAX调用跨域的问题，开始的时候尝试 ajax中用JSONP进行传输，但是失败了，最后找到的解决办法是在webapi所在项目的webconfig 中的 <system.webServer> 节点 添加如下代码：
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
至此得以解决三个问题，之后进行项目的调试，得以正确运行，以上三个是在项目中比较棘手的问题，当然还有一些小的问题，没有做如此详细的记载，简单的记录一下：
Razor 语句中使用三目运算符，<input type="text" value="@(Model.PName == null?"":Model.PName)" />
。。。