关于webapi练习过程中遇到的一系列问题记录
最近在尝试本地进行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 == ) {
// 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 == ) {
// 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)" />
。。。
关于webapi练习过程中遇到的一系列问题记录的更多相关文章
- Swift开发iOS应用过程中的问题和解决记录
虚拟机里安装OSX+XCode开发环境 用真机的请直接跳过这个部分. 主要是在VitrualBox里安装mac系统和xcode,参考这篇教程,VirtualBox的版本是4.3.18 r96156,O ...
- 准备PPT过程中的一些文档记录
http://jm.taobao.org/2016/12/23/20161223/ https://www.csdn.net/article/2015-02-10/2823900 https://da ...
- xampp 使用过程中刚遇到的问题记录
开始使用XAMPP的时候,都是可以正常连接的,但是过一段时间后,在用它创建表或其他操作,会报错,提示如下错误 Access denied for user ''@'localhost' to data ...
- ubuntu熟悉过程中遇到一些小问题记录一下
0. 使用su命令时提示: authentication failur 安装ubuntu系统默认是没有激活root用户的,需要我们手工进行操作,在命令行界面下,或者在终端中输入如下命令:sudo p ...
- Web API应用架构在Winform混合框架中的应用（3）--Winfrom界面调用WebAPI的过程分解
最近一直在整合WebAPI.Winform界面.手机短信.微信公众号.企业号等功能,希望把它构建成一个大的应用平台,把我所有的产品线完美连接起来,同时也在探索.攻克更多的技术问题,并抽空写写博客,把相 ...
- 通过py2exe打包python程序的过程中，解决的一系列问题
py2exe的使用方法参考<py2exe使用方法>. 注:程序可以在解释器中正常运行,一切问题都出在打包过程中. 问题1: 现象:RuntimeError: maximum recursi ...
- lua解析脚本过程中的关键数据结构介绍
在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...
- ios逆向过程中lldb调试技巧
在ios逆向过程中,善于运用lldb,会给逆向带来很大的方便 一般的命令: 1.image list -o -f 看看各个模块在内存中的基址 2.register read r0 读取寄存器r0的 ...
- 使用beanstalkd实现定制化持续集成过程中pipeline
持续集成是一种项目管理和流程模型,依赖于团队中各个角色的配合.各个角色的意识和配合不是一朝一夕能练就的,我们的工作只是提供一种方案和能力,这就是持续集成能力的服务化.而在做持续集成能力服务化的过程中, ...
随机推荐
- hw_module_t 加载过程
每一个HAL模块都有一个ID值,以这些ID值为参数来调用硬件抽象层提供的函数hw_get_module就可以将指定的模块加载到内存来,并且获得 一个hw_module_t接口来打开相应的设备. 函数h ...
- python数据类型，int,str,bool
一,python中的int() int在python中主要用来运算,对字符串的转化,用int(str)表示,并且需要str.isdigit为真. 在int()中二进制的转换如下: #bit_lengt ...
- 记一次内存溢出的分析经历——使用thrift
背景: 有一个项目做一个系统,分客户端和服务端,客户端用c++写的,用来收集信息然后传给服务端(客户端的数量还是比较多的,正常的有几千个), 服务端用Java写的(带管理页面),属于RPC模式,中间的 ...
- MySQL 5.7.10 自动备份、自动清理旧备份集(转)
1,mysqldump备份脚本 备份脚本为,里面有几个需要注意的参数: (1)--master-data=2 :这个参数可以在搭建从库的时候,记录当前备份的复制点信息. (2)--extended-i ...
- XSS自动化检测 Fiddler Watcher & x5s & ccXSScan 初识
一.标题:XSS 自动化检测 Fiddler Watcher & x5s & ccXSScan 初识 automated XSS testing assistant 二.引言 ...
- java从键盘输入数，分解质因数，
总结:1.break;的用法 当最小质因数不能被输入的值整除时,需要继续循环.k++. 当然输入的数,本身就是质数时,那么 package com.b; import java.util.Scanne ...
- Rails通过页面Debug
<%= debug(headers) %>--在视图中显示伴随请求的头部信息 <%= debug(params) %>--在视图中显示请求中的参数 <%= debug(a ...
- [转]浅谈javascript函数劫持
转自:Ph4nt0m Security Team 这么多年了,现在学习依然还是有很多收货,向前辈致敬.转载一方面是自己存档一份,另一方面是让更多喜欢安全的人一同学习. ================ ...
- java selenium webdriver第一讲 seleniumIDE
Selenium是ThoughtWorks公司,一个名为Jason Huggins的测试为了减少手工测试的工作量,自己实现的一套基于Javascript语言的代码库 使用这套库可以进行页面的交互操作, ...
- spring bean管理
轻量级,无侵入 Bean管理 1 创建applicationContext.xml 2 配置被管理的Bean 3 获取Bean pom.xml配置 <dependency> <gro ...